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函数有以下优点：

有内置执行器，不用调用next
Generator函数是需要调用next指令来运行异步的语句，async不需要调用next，直接像运行正常的函数那样运行就可以
有更好的语义化
语义化更明确，相比较于Generator的*和yield，async和await更明确。
await后面可以跟promise或者任意类型的值
yield命令后面只能是 Thunk 函数或 Promise 对象，而async函数的await命令后面，可以是Promise 对象和原始类型的值（数值、字符串和布尔值，但这时等同于同步操作）。
返回一个promise对象，可以调用.then
async直接返回一个promise对象，可以用then和catch来处理。

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

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

创作场景

Javascript 之 async 四重奏（三）