Javascript 之 async 四重奏(三)

阅读数:2 2019 年 12 月 31 日 15:42

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

评论

发布