异步函数允许您像编写同步代码一样编写基于 promise 的代码。
Chrome、Edge、Firefox 和 Safari 默认启用异步函数,坦率地讲,它们的作用相当不可思议。它们允许您像编写同步代码一样编写基于 promise 的代码,但不会阻塞主线程。它们可以降低异步代码的“智能”和可读性。
异步函数的工作方式如下:
async function myFirstAsyncFunction() {
try {
const fulfilledValue = await promise;
} catch (rejectedValue) {
// …
}
}
如果在函数定义之前使用 async
关键字,则可以在函数中使用 await
。当您对 promise 执行 await
操作时,该函数会以非阻塞方式暂停,直到 promise 产生结果。如果 promise 执行,则会返回值。如果 promise 拒绝,则会抛出拒绝的值。
浏览器支持
示例:记录提取
假设您想要提取网址并以文本形式记录响应。以下是使用 promise 时的方式:
function logFetch(url) {
return fetch(url)
.then((response) => response.text())
.then((text) => {
console.log(text);
})
.catch((err) => {
console.error('fetch failed', err);
});
}
使用异步函数时的情况是一样的:
async function logFetch(url) {
try {
const response = await fetch(url);
console.log(await response.text());
} catch (err) {
console.log('fetch failed', err);
}
}
代码行数相同,但所有回调都消失了。这样会使其更易于阅读,尤其是对于不太熟悉 promise 的人。
异步返回值
无论您是否使用 await
,异步函数始终都会返回一个 promise。该 promise 会在解析时返回异步函数返回的任何内容,而在拒绝时返回异步函数抛出的任何结果。因此,对于:
// wait ms milliseconds
function wait(ms) {
return new Promise((r) => setTimeout(r, ms));
}
async function hello() {
await wait(500);
return 'world';
}
调用 hello()
会返回一个在执行时使用了 "world"
的 promise。
async function foo() {
await wait(500);
throw Error('bar');
}
调用 foo()
会返回一个使用 Error('bar')
拒绝的 promise。
示例:流式传输响应
在更复杂的示例中,异步函数的优势更明显。假设您想在流式传输响应的同时注销数据块,并返回最终大小。
下面是使用 Promise 编写的代码:
function getResponseSize(url) {
return fetch(url).then((response) => {
const reader = response.body.getReader();
let total = 0;
return reader.read().then(function processResult(result) {
if (result.done) return total;
const value = result.value;
total += value.length;
console.log('Received chunk', value);
return reader.read().then(processResult);
});
});
}
看看我,“wielder of promise”的 Jake, Archibald。看到我在内部调用 processResult()
来设置异步循环了吗?这让我感觉很聪明。但与大多数“智能”代码一样,您必须盯着它看很长时间,才能弄明白它的作用,就像上世纪 90 年代的魔眼图片那样。
我们用异步函数再试一次:
async function getResponseSize(url) {
const response = await fetch(url);
const reader = response.body.getReader();
let result = await reader.read();
let total = 0;
while (!result.done) {
const value = result.value;
total += value.length;
console.log('Received chunk', value);
// get the next result
result = await reader.read();
}
return total;
}
所有“智能”都不见了。让我大有裨益的异步循环被一个可靠、单调乏味的 while 循环所取代。好多了。将来,您将获得异步迭代器,它会将 while
循环替换为 for-of 循环,使其更加简洁。
其他异步函数语法
我已经向您介绍了 async function() {}
,但 async
关键字可以与其他函数语法一起使用:
箭头函数
// map some URLs to json-promises
const jsonPromises = urls.map(async (url) => {
const response = await fetch(url);
return response.json();
});
对象方法
const storage = {
async getAvatar(name) {
const cache = await caches.open('avatars');
return cache.match(`/avatars/${name}.jpg`);
}
};
storage.getAvatar('jaffathecake').then(…);
类方法
class Storage {
constructor() {
this.cachePromise = caches.open('avatars');
}
async getAvatar(name) {
const cache = await this.cachePromise;
return cache.match(`/avatars/${name}.jpg`);
}
}
const storage = new Storage();
storage.getAvatar('jaffathecake').then(…);
小心!避免过于循序
虽然您编写的是看起来同步的代码,但切勿错失并行执行的机会。
async function series() {
await wait(500); // Wait 500ms…
await wait(500); // …then wait another 500ms.
return 'done!';
}
以上代码需要 1000 毫秒才能完成,而:
async function parallel() {
const wait1 = wait(500); // Start a 500ms timer asynchronously…
const wait2 = wait(500); // …meaning this timer happens in parallel.
await Promise.all([wait1, wait2]); // Wait for both timers in parallel.
return 'done!';
}
以上代码需要 500 毫秒才能完成,因为两个等待时间会同时发生。我们来看一个实际示例。
示例:按顺序输出提取内容
假设您想要提取一系列网址,并尽快按正确顺序记录它们。
深呼吸 - 以下是使用 promise 时的效果:
function markHandled(promise) {
promise.catch(() => {});
return promise;
}
function logInOrder(urls) {
// fetch all the URLs
const textPromises = urls.map((url) => {
return markHandled(fetch(url).then((response) => response.text()));
});
// log them in order
return textPromises.reduce((chain, textPromise) => {
return chain.then(() => textPromise).then((text) => console.log(text));
}, Promise.resolve());
}
是的,没错,我使用 reduce
来链接 promise 序列。我太聪明了。但这种编码方式非常智能,您最好不要使用这种编码。
但是,将上面的代码转换为异步函数时,很容易变得过于依序:
async function logInOrder(urls) { for (const url of urls) { const response = await fetch(url); console.log(await response.text()); } }
function markHandled(...promises) { Promise.allSettled(promises); } async function logInOrder(urls) { // fetch all the URLs in parallel const textPromises = urls.map(async (url) => { const response = await fetch(url); return response.text(); }); markHandled(...textPromises); // log them in sequence for (const textPromise of textPromises) { console.log(await textPromise); } }
浏览器支持解决方法:生成器
如果您要定位到支持生成器的浏览器(其中包含所有主流浏览器的最新版本),可以使用 polyfill 异步函数。
Babel 会为您执行此操作,这里提供了通过 Babel REPL 实现的示例
- 注意转译的代码有多相似。此转换是 Babel 的 es2017 预设的一部分。
我建议采用转译方法,因为在目标浏览器支持异步函数后,您可以直接将其关闭,但如果您确实不想使用转译器,可以自己使用 Babel 的 polyfill。来替代:
async function slowEcho(val) {
await wait(1000);
return val;
}
...您可以在其中添加 polyfill 并写入:
const slowEcho = createAsyncFunction(function* (val) {
yield wait(1000);
return val;
});
请注意,您必须将生成器 (function*
) 传递给 createAsyncFunction
,并使用 yield
而不是 await
。除此之外,其工作原理相同。
临时解决方法:再生器
如果您以旧版浏览器为目标平台,Babel 还可以转译生成器,以便您使用异步函数(低至 IE8)。为此,您需要 Babel 的 es2017 预设 和 es2015 预设。
输出不够美观,因此请注意避免代码膨胀。
全面异步化!
一旦异步函数登陆所有浏览器,就在每一个返回 promise 的函数中使用它们!它们不仅能让代码更加简洁,还能确保该函数将始终返回 promise。
早在 2014 年,我就对异步函数感到非常兴奋,并且很高兴看到它们真正登陆浏览器。哎呀!