一次性让你懂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


相关文章
|
6月前
|
前端开发
async和await 优雅处理异步
async和await 优雅处理异步
|
前端开发 JavaScript
|
6月前
|
前端开发
Await和Async是什么?跟Promise有什么区别 使用它有什么好处
Await和Async是什么?跟Promise有什么区别 使用它有什么好处
|
6月前
|
前端开发 JavaScript 开发者
阿珊带你深入理解 async/await 函数
阿珊带你深入理解 async/await 函数
|
6月前
|
前端开发 JavaScript
async/await
async/await
36 0
|
3月前
|
C#
C# async await 异步执行方法
C# async await 异步执行方法
53 0
|
3月前
|
前端开发 JavaScript
如何在forEach内使用异步调用 async/await
如何在forEach内使用异步调用 async/await
|
6月前
|
前端开发
Promise和async/await之间有什么区别
Promise与async/await是异步编程的两种模式。Promise使用.then()和.catch()处理回调,语法较复杂,易出现回调地狱;而async/await提供更清晰的顺序代码,使用try/catch进行错误处理,使异步操作更易读、易维护。Promise在控制流和错误堆栈方面较为灵活,但定位错误难,而async/await自动等待、线性控制流,错误堆栈清晰。两者各有优势,选择取决于具体需求和偏好。
|
6月前
|
监控 前端开发 JavaScript
等一下!深入async/await的异步世界
等一下!深入async/await的异步世界
96 1
|
6月前
|
前端开发 JavaScript