Javascript之async四重奏（三）_语言 & 开发_Think体验设计



 写点什么

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