一次性让你懂async/await

简介: 一次性让你懂async/await

async 函数是 Generator 函数的语法糖。使用 关键字 async 来表示,在函数内部使用 await 来表示异步。相较于 Generator,async 函数的改进在于下面四点:


内置执行器。Generator 函数的执行必须依靠执行器,而 async 函数自带执行器,调用方式跟普通函数的调用一样

更好的语义。async 和 await 相较于 * 和 yield 更加语义化

更广的适用性。co 模块约定,yield 命令后面只能是 Thunk 函数或 Promise对象。而 async 函数的 await 命令后面则可以是 Promise 或者 原始类型的值(Number,string,boolean,但这时等同于同步操作)

返回值是 Promise。async 函数返回值是 Promise 对象,比 Generator 函数返回的 Iterator 对象方便,可以直接使用 then() 方法进行调用


怎么用?

async function asyncFn() {
  return 'hello world';
}
asyncFn();
 

async 表示函数里有异步操作

await 表示紧跟在后面的表达式需要等待结果。

async function asyncFn() {
    return '我后执行'
}
asyncFn().then(result => {
    console.log(result);
})
console.log('我先执行');

上面的执行结果是先打印出'我先执行',虽然是上面asyncFn()先执行,但是已经被定义异步函数了,不会影响后续函数的执行。


现在理解了async基本的使用,那还有什么特性呢?


async定义的函数内部会默认返回一个promise对象,如果函数内部抛出异常或者是返回reject,都会使函数的promise状态为失败reject。

async function e() {    
    throw new Error('has Error');
}
e().then(success => console.log('成功', success))   
   .catch(error => console.log('失败', error));

我们看到函数内部抛出了一个异常,返回rejectasync函数接收到之后,判定执行失败进入catch,该返回的错误打印了出来。

async function throwStatus() {    
    return '可以返回所有类型的值'
}
throwStatus().then(success => console.log('成功', success))             
             .catch(error => console.log('失败', error));
 
//打印结果
 
成功 可以返回所有类型的值
async`函数接收到返回的值,发现不是`异常`或者`reject`,则判定成功,这里可以`return`各种数据类型的值,`false`,`NaN`,`undefined`...总之,都是`resolve


相关文章
|
网络架构 Python
在Flask中,如何定义路由并处理HTTP请求的不同方法(GET、POST等)?
在Flask中,路由通过`@app.route()`装饰器定义,如`/hello`示例处理GET请求。要支持POST,可添加`methods=['POST']`。单一函数可处理多个方法,检查`request.method`。动态路由如`/user/<username>`允许传入变量到函数。这些基础构成Flask处理HTTP请求的核心。
677 1
扩展ASCII编码(Extended ASCII或8-bit ASCII)
扩展ASCII编码(Extended ASCII或8-bit ASCII)
3726 5
|
JavaScript 前端开发 编译器
看完这篇文章,不再害怕Vue3的源码(一)
看完这篇文章,不再害怕Vue3的源码
|
移动开发 Python
Bartlett 球 形检验
Bartlett 球 形检验
4381 4
|
机器学习/深度学习 编解码 Shell
|
JavaScript
Vue自定义组件实现类似elementUI的append-to-body功能,将创建的元素插入、挂载到body上面(网页最外层),适用于父元素overflow: hidden、绝对定位fixed的场景
Vue自定义组件实现类似elementUI的append-to-body功能,将创建的元素插入、挂载到body上面(网页最外层),适用于父元素overflow: hidden、绝对定位fixed的场景
|
8月前
|
人工智能 自然语言处理 JavaScript
使用Playwright MCP实现UI自动化测试:从环境搭建到实战案例
本文介绍如何通过Playwright与MCP协议结合,实现基于自然语言指令的UI自动化测试。从环境搭建、核心工具到实战案例,展示AI驱动的测试新范式,降低技术门槛,提升测试效率与适应性。
|
7月前
|
SQL 存储 关系型数据库
MySQL 高频面试题
本课程深度解析阿里MySQL高频面试题,涵盖底层原理、索引优化、性能调优与故障排查四大核心模块。结合阿里实战场景,精讲MVCC、B+树、事务ACID、死锁处理、慢SQL定位、分库分表等关键技术点,提供可落地的优化方案与标准答案,助力掌握“原理+实战”双能力,精准应对高并发、大数据量下的数据库挑战,适合中高级开发者冲击大厂offer。
|
前端开发 JavaScript
从 async 和 await 函数返回值说原理
昨天在文章《JavaScript中的 async 和 await》中简单的介绍了其使用方法。那么 async 和 await 如何工作,如何正确的使用 async 和 await 。
649 0
|
前端开发
react使用antd中的Checkbox实现多选
在React项目中,通过Ant Design的Checkbox组件实现多选。引入Checkbox,使用Checkbox.Group来管理Checkbox,设置`value`属性绑定选中项数组,通过`onChange`更新数组。维护一个全选状态,根据选中项数量与总数决定全选按钮状态。全选按钮的`onChange`事件用于控制所有Checkbox的选中状态。
914 1
react使用antd中的Checkbox实现多选

热门文章

最新文章