在做项目的时候,经常会碰到关于异步的问题,遇到多个异步请求,又要控制其顺序,该怎么办?涉及多个回调形成回调地狱又该如何处理?ES2017 标准引入了 async 函数,使得异步操作变得更加方便。本文主要从async/await的基本用法、平行任务、注意事项几个方面来介绍。
0.传统js的异步编程方法
ES6 诞生以前,异步编程的方法,大概有下面四种。
- 回调函数
- 事件监听
- 发布/订阅
- promise对象
1.基本用法
首先我们通过一个例子,分别使用async/await与传统异步方法进行编写,进而对async/await写法有个初步的了解。
先定义一个 Fetch 方法用于获取信息:
function fetchUser(){
return new Promise((resolve, reject) => {
fetch('https://whuzxq.com/userList/4356')
.then((data) => {
resolve(data.json());
}, (error) => {
reject(error);
})
});
}
复制代码
Promise方式
function getuserByPromise(){
fetchUser()
.then((data) => {
console.log(data);
}, (error) => {
console.log(error);
})
}
复制代码
Promise的方式虽然解决了回调地狱,但是整段代码充满then,语义化不明显,代码流程不能很好的表示执行流程。
async 方式
/**
* async 方式
*/
async function getUserByAsync(){
let user = await fetchUser();
return user;
}
getUserByAsync()
.then(v => console.log(v));
复制代码
async 函数完美的解决了上面两种方式的问题。同时 async 函数自带执行器,执行的时候无需手动加载。
通过以上两个例子,应该对async的使用有了一个初步的认识,下文将详细列出async/await相关的重要知识点。
async
1.async函数返回一个promise对象。
2.async函数内部return语句返回的值,会成为then方法回调函数的参数。
async function f() {
return 'hello world';
}
f().then(v => console.log(v))
复制代码
3.async函数返回的 Promise 对象,必须等到内部所有await命令后面的 Promise 对象执行完,才会发生状态改变,除非遇到return语句或者抛出错误。也就是说,只有async函数内部的异步操作执行完,才会执行then方法指定的回调函数。
async function getTitle(url) {
let response = await fetch(url);
let html = await response.text();
return html.match(/<title>([\s\S]+)<\/title>/i)[1];
}
getTitle('https://tc39.github.io/ecma262/').then(console.log)
// "ECMAScript 2017 Language Specification"
复制代码
上面代码中,函数getTitle内部有三个操作:抓取网页、取出文本、匹配页面标题。只有这三个操作全部完成,才会执行then方法里面的console.log。
await命令
需要理解以下要点: 1.正常情况下,await命令后面是一个 Promise 对象。如果不是,会被转成一个立即resolve的 Promise 对象。
async function f() {
return await 123;
}
f().then(v => console.log(v))
// 123
复制代码
2.只要一个await语句后面的 Promise 变为reject,那么整个async函数都会中断执行。
async function f() {
await Promise.reject('出错了');
await Promise.resolve('hello world'); // 不会执行
}
复制代码
有时,我们希望即使前一个异步操作失败,也不要中断后面的异步操作。这时可以将第一个await放在try...catch结构里面,这样不管这个异步操作是否成功,第二个await都会执行。
async function f() {
try {
await Promise.reject('出错了');
} catch(e) {
}
return await Promise.resolve('hello world');
}
f()
.then(v => console.log(v))
// hello world
复制代码
另一种方法是await后面的 Promise 对象再跟一个catch方法,处理前面可能出现的错误。
async function f() {
await Promise.reject('出错了')
.catch(e => console.log(e));
return await Promise.resolve('hello world');
}
f()
.then(v => console.log(v))
// 出错了
// hello world
复制代码
注意事项
1.前面已经说过,await命令后面的Promise对象,运行结果可能是rejected,所以最好把await命令放在try...catch代码块中。
2.await命令只能用在async函数之中,如果用在普通函数,就会报错。
2.等待平行任务
进行 JavaScript 异步编程时,大家经常需要逐一编写多个复杂语句的代码,并都在调用语句前标注了 await。由于大多数情况下,一个语句并不依赖于前一个语句,但是你仍不得不等前一个语句完成,这会导致性能问题。因此,多个await命令后面的异步操作,如果不存在继发关系,最好让它们同时触发。
let foo = await getFoo();
let bar = await getBar();
复制代码
上面代码中,getFoo和getBar是两个独立的异步操作(即互不依赖),被写成继发关系。这样比较耗时,因为只有getFoo完成以后,才会执行getBar,完全可以让它们同时触发。
// 写法一
let [foo, bar] = await Promise.all([getFoo(), getBar()]);
// 写法二
let fooPromise = getFoo();
let barPromise = getBar();
let foo = await fooPromise;
let bar = await barPromise;
复制代码
3.实例
实例一:假定某个 DOM 元素上面,部署了一系列的动画,前一个动画结束,才能开始后一个。如果当中有一个动画出错,就不再往下执行,返回上一个成功执行的动画的返回值。
async function chainAnimationsAsync(elem, animations) {
let ret = null;//变量ret用来保存上一个动画的返回值
try {
for(let anim of animations) {
ret = await anim(elem);
}
} catch(e) {
/* 忽略错误,继续执行 */
}
return ret;
}
复制代码
实例二:实际开发中,经常遇到一组异步操作,需要按照顺序完成。比如,依次远程读取一组 URL,然后按照读取的顺序输出结果。
async function logInOrder(urls) {
for (const url of urls) {
const response = await fetch(url);
console.log(await response.text());
}
}
复制代码
上面代码确实大大简化,问题是所有远程操作都是继发。只有前一个 URL 返回结果,才会去读取下一个 URL,这样做效率很差,非常浪费时间。我们需要的是并发发出远程请求。
async function logInOrder(urls) {
// 并发读取远程URL
const textPromises = urls.map(async url => {
const response = await fetch(url);
return response.text();
});
// 按次序输出
for (const textPromise of textPromises) {
console.log(await textPromise);
}
}
复制代码
上面代码中,虽然map方法的参数是async函数,但它是并发执行的,因为只有async函数内部是继发执行,外部不受影响。后面的for..of循环内部使用了await,因此实现了按顺序输出。
4.参考网址
http://es6.ruanyifeng.com/#docs/async https://github.com/xitu/gold-miner/pull/3738/files https://juejin.cn/post/6844903487805849613 https://juejin.cn/post/6844903597629505544
原文可访问我的博客