理解 async/await

kid143 发布于2019-08-20 18:08 / 2642人阅读

摘要：而函数的命令后面则可以是或者原始类型的值，，，但这时等同于同步操作返回值是。抛出的错误而会被方法回调函数接收到。

ES7 提出的async 函数，终于让 JavaScript 对于异步操作有了终极解决方案。No more callback hell。
async 函数是 Generator 函数的语法糖。使用关键字 async 来表示，在函数内部使用 await 来表示异步。
想较于 Generator，Async 函数的改进在于下面四点：

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

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

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

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

Async 与其他异步操作的对比

先定义一个 Fetch 方法用于获取 github user 的信息：

function fetchUser() { 
    return new Promise((resolve, reject) => {
        fetch("https://api.github.com/users/superman66")
        .then((data) => {
            resolve(data.json());
        }, (error) => {
            reject(error);
        })
    });
}

Promise 方式

/**
 * Promise 方式
 */
function getUserByPromise() {
    fetchUser()
        .then((data) => {
            console.log(data);
        }, (error) => {
            console.log(error);
        })
}
getUserByPromise();

Promise 的方式虽然解决了 callback hell，但是这种方式充满了 Promise的 then() 方法，如果处理流程复杂的话，整段代码将充满 then。语义化不明显，代码流程不能很好的表示执行流程。
Generator 方式

/**
 * Generator 方式
 */
function* fetchUserByGenerator() {
    const user = yield fetchUser();
    return user;
}

const g = fetchUserByGenerator();
const result = g.next().value;
result.then((v) => {
    console.log(v);
}, (error) => {
    console.log(error);
})

Generator 的方式解决了 Promise 的一些问题，流程更加直观、语义化。但是 Generator 的问题在于，函数的执行需要依靠执行器，每次都需要通过 g.next() 的方式去执行。
async 方式

/**
 * async 方式
 */
 async function getUserByAsync(){
     let user = await fetchUser();
     return user;
 }
getUserByAsync()
.then(v => console.log(v));

async 函数完美的解决了上面两种方式的问题。流程清晰，直观、语义明显。操作异步流程就如同操作同步流程。同时 async 函数自带执行器，执行的时候无需手动加载。

语法

async 函数返回一个 Promise 对象

async 函数内部 return 返回的值。会成为 then 方法回调函数的参数。

async function  f() {
    return "hello world"
};
f().then( (v) => console.log(v)) // hello world

如果 async 函数内部抛出异常，则会导致返回的 Promise 对象状态变为 reject 状态。抛出的错误而会被 catch 方法回调函数接收到。

async function e(){
    throw new Error("error");
}
e().then(v => console.log(v))
.catch( e => console.log(e));

async 函数返回的 Promise 对象，必须等到内部所有的 await 命令的 Promise 对象执行完，才会发生状态改变

也就是说，只有当 async 函数内部的异步操作都执行完，才会执行 then 方法的回调。

const delay = timeout => new Promise(resolve=> setTimeout(resolve, timeout));
async function f(){
    await delay(1000);
    await delay(2000);
    await delay(3000);
    return "done";
}

f().then(v => console.log(v)); // 等待6s后才输出 "done"

正常情况下，await 命令后面跟着的是 Promise ，如果不是的话，也会被转换成一个立即 resolve 的 Promise
如下面这个例子：

async function  f() {
    return await 1
};
f().then( (v) => console.log(v)) // 1

如果返回的是 reject 的状态，则会被 catch 方法捕获。

Async 函数的错误处理

async 函数的语法不难，难在错误处理上。
先来看下面的例子：

let a;
async function f() {
    await Promise.reject("error");
    a = await 1; // 这段 await 并没有执行
}
f().then(v => console.log(a));

如上面所示，当 async 函数中只要一个 await 出现 reject 状态，则后面的 await 都不会被执行。
解决办法：可以添加 try/catch。

// 正确的写法
let a;
async function correct() {
    try {
        await Promise.reject("error")
    } catch (error) {
        console.log(error);
    }
    a = await 1;
    return a;
}

correct().then(v => console.log(a)); // 1

如果有多个 await 则可以将其都放在 try/catch 中。

如何在项目中使用

依然是通过 babel 来使用。
只需要设置 presets 为 stage-3 即可。
安装依赖：

npm install babel-preset-es2015 babel-preset-stage-3 babel-runtime babel-plugin-transform-runtime

修改.babelrc:

"presets": ["es2015", "stage-3"],
"plugins": ["transform-runtime"]

这样就可以在项目中使用 async 函数了。

Further Reading

Understanding JavaScript’s async await

Async/Await - Best Practices in Asynchronous Programming

异步操作和 Async 函数

文章首发于我的博客：chenhuichao.com

GPU云服务器云服务器 async await 全面理解理解理解对象

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84122.html

8张图帮你一步步看清 async/await 和 promise 的执行顺序

摘要：第部分画图一步步看清宏任务微任务的执行过程我们以开篇的经典面试题为例，分析这个例子中的宏任务和微任务。注意这里只是把推入微任务队列，并没有执行。执行结束，才能继续执行后面的代码如图此时当前宏任务都执行完了，要处理微任务队列里的代码。 8张图让你一步步看清 async/await 和 promise 的执行顺序为什么写这篇文章？测试一下自己有没有必要看需要具备的前置基础知识主...

weizx 2019-08-23 13:51 评论0 收藏0
理解 JavaScript 的 async/await

摘要：因为函数返回一个对象，所以可以用于等待一个函数的返回值这也可以说是在等函数，但要清楚，它等的实际是一个返回值。帮我们干了啥作个简单的比较上面已经说明了会将其后的函数函数表达式或的返回值封装成一个对象，而会等待这个完成，并将其的结果返回出来。随着 Node 7 的发布，越来越多的人开始研究据说是异步编程终级解决方案的 async/await。我第一次看到这组关键字并不是在 JavaSc...

tracymac7 2019-08-20 12:24 评论0 收藏0
promise async await 理解笔记

摘要：在异步编程中，提供了对象的方式。例如等同于所以可以理解为生成一个实例。那么自然也可以去调用则是配合使用的。等于是等待一个返回值，等待的执行结果。但是函数不会造成阻塞，所以配合使用，则没有影响到外部。在异步编程中，es6提供了promise对象的方式。简单的用法 var promise = new Promise((resolve,reject)=>{ if(){ ...

NoraXie 2019-08-26 11:57 评论0 收藏0
[译]带你理解 Async/await

摘要：所以是在一秒后显示的。这个行为不会耗费资源，因为引擎可以同时处理其他任务执行其他脚本，处理事件等。每个回调首先被放入微任务队列然后在当前代码执行完成后被执行。，函数是异步的，但是会立即运行。否则，就返回结果，并赋值。「async/await」是 promises 的另一种更便捷更流行的写法，同时它也更易于理解和使用。 Async functions 让我们以 async 这个关键字开...

xiaochao 2019-08-23 18:09 评论0 收藏0
令人费解的 async/await 执行顺序

摘要：问题的关键在于其执行过程中的微任务数量，下文中我们需要用上述代码中的方式对微任务的执行顺序进行标记，以辅助我们理解这其中的执行过程。原文发布在掘金社区：https://juejin.im/post/5c3cc981f265da616a47e028 起源 2019年了，相信大家对 Promise 和 async/await 都不再陌生了。前几日，我在社区读到了一篇关于 async/...

WilsonLiu95 2019-08-23 14:50 评论0 收藏0