Javascript 之 async 四重奏（三）

async-await 的兼容并包

async 函数

在 es7 中引入的 async 函数使得处理异步操作更加方便：
直接在普通函数前面加上 async，表示这是一个异步函数，在要异步执行的语句前面加上 await，表示后面的表达式需要等待。我们通过下面的例子先简单了解一下：
（注：左右 / 上下滑动屏幕可查看全部代码）

function timeout(ms) {
 return new Promise((resolve) => {
   setTimeout(resolve, ms);
 });
}
async function asyncPrint(value, ms) {
 await timeout(ms);
 console.log(value);
}
asyncPrint('hello world', 50);

上面的代码指定 50 毫秒后输出 hello world

async 函数有多种使用方式：
// 函数声明式：
async function foo() {}
// 函数表达式：
const foo = async function () {}
// 对象的方法：
let obj = {async foo() {}}
obj.foo().then()
// 箭头函数：
const foo = async () => {}

async 函数返回一个 promise 对象，可以使用 then 方法添加回调函数：
（注：左右 / 上下滑动屏幕可查看全部代码）

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

Await 命令后面是一个 promise 对象，如果不是会被转成一个立即 resolve 的 promise 对象：
（注：左右 / 上下滑动屏幕可查看全部代码）

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

通过 async 函数来发送多个请求：
（注：左右 / 上下滑动屏幕可查看全部代码）

async function dbFuc(db) {
let docs = ['/posts.json', '/gets.json', '/puts.json'];
let promises = docs.map((doc) => db.post(doc));
let results = await Promise.all(promises);
console.log(results);
}

由此可见，async 函数不仅包含了 promise、generator，代码也更加简洁。

总的来说，async 函数就是 generator 函数的语法糖，相对于 generator 函数 async 函数有以下优点：

1. 有内置执行器，不用调用 next
   Generator 函数是需要调用 next 指令来运行异步的语句，async 不需要调用 next，直接像运行正常的函数那样运行就可以

2. 有更好的语义化
   语义化更明确，相比较于 Generator 的 * 和 yield，async 和 await 更明确。

3. await 后面可以跟 promise 或者任意类型的值
   yield 命令后面只能是 Thunk 函数或 Promise 对象，而 async 函数的 await 命令后面，可以是 Promise 对象和原始类型的值（数值、字符串和布尔值，但这时等同于同步操作）。

4. 返回一个 promise 对象，可以调用.then
   async 直接返回一个 promise 对象，可以用 then 和 catch 来处理。

本文转载自 Think 体验设计公众号。

原文链接： https://mp.weixin.qq.com/s/QgC2OjVF4pvltte9V_gkIQ