|
一、前言 实际上对async/await并不是很陌生，早在阮大大的ES6教程里面就接触到了，但是一直处于理解并不熟练使用的状态，于是决定重新学习并且总结一下，写了这篇博文。如果文中有错误的地方还请各位批评指正！ 二、介绍async/await 1.async/await 是异步代码的新方式 2.async/await 基于 Promise 实现 3.async/await使得异步代码更像同步代码 4.await 只能用在 async 函数中，不能用在普通函数中 await 关键字后面必须跟 Promise 对象 函数执行到 await 后，Promise 函数执行完毕，但因为 Promise 内部一般都是异步函数，所以事件循环会一直 等待，直到事件轮询检查到 Promise 有了状态 resolve 或 reject 才重新执行这个函数后面的内容 三、特点 async函数ES2017标准引入的语法，是Generator函数的语法糖，因此其相对于Generator函数，具有以下基本特点。 内置执行器： 使用async函数可以像使用普通函数一样，直接调用即可执行。不用像Generator函数一样使用co模块来实现流程控制。 语义化更强： async关键字表示是一个异步的函数，await表示需要等待执行。相对于yield表达式，语义化更强。 返回值是Promise： async函数返回值是Promise对象，这比Generator函数的返回值是Iterator对象方便多了，可以使用then方法来指定下一步的操作。
四、基本用法 1.async函数的返回值 async函数返回一个 Promise 对象，async函数内部return语句返回的值，会成为then方法回调函数的参数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。 [size=1em] | async function f() {
return 'hello world';
}
f().then(v => console.log(v))
// "hello world"
|
上面代码中，函数f内部return命令返回的值，会被then方法回调函数接收到。 async函数内部抛出错误，会导致返回的 Promise 对象变为reject状态。抛出的错误对象会被catch方法回调函数接收到。 [size=1em] | async function f() {
throw new Error('出错了');
}
f().then(
v => console.log('resolve', v),
e => console.log('reject', e)
)
//reject Error: 出错了
|
2.Promise的状态变化 async函数返回的 Promise 对象，必须等到内部所有await命令后面的 Promise 对象执行完，才会发生状态改变，除非遇到return语句或者抛出错误。也就是说，只有async函数内部的异步操作执行完，才会执行then方法指定的回调函数。 [size=1em] | 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。 3.await命令 如果await命令后面是一个 Promise 对象，返回该对象的结果。如果不是 Promise 对象，就直接返回对应的值。 [size=1em] | async function f() {
// 等同于
// return 123;
return await 123;
}
f().then(v => console.log(v))
// 123
|
如果await命令后面是一个thenable对象（即定义了then方法的对象），那么await会将其等同于 Promise 对象。 [size=1em]1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| class Sleep {
constructor(timeout) {
this.timeout = timeout;
}
then(resolve, reject) {
const startTime = Date.now();
setTimeout(
() => resolve(Date.now() - startTime),
this.timeout
);
}
}
(async () => {
const sleepTime = await new Sleep(1000);
console.log(sleepTime);
})();
// 1000
|
如果await命令后面的 Promise 对象变为reject状态，则reject的参数会被catch方法的回调函数接收到。 [size=1em] | async function f() {
await Promise.reject('出错了');
}
f()
.then(v => console.log(v))
.catch(e => console.log(e))
// 出错了
|
任何一个await语句后面的 Promise 对象变为reject状态，那么整个async函数都会中断执行。 [size=1em] | async function f() {
await Promise.reject('出错了');
await Promise.resolve('hello world'); // 不会执行
}
|
为了避免一些不必要的麻烦，建议把await放入try—catch中 [size=1em]1
2
3
4
5
6
7
8
9
10
11
12
13
14
| async function myFunction() {
try {
await somethingThatReturnsAPromise();
} catch (err) {
console.log(err);
}
}
// 另一种写法
async function myFunction() {
await somethingThatReturnsAPromise()
.catch(function (err) {
console.log(err);
});
}
|
4.总结 （1）async函数内部的异步操作执行完，根据其执行的状态，对应执行then或catch （2）遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。 （3）任何一个await语句后面的 Promise 对象变为reject状态，那么整个async函数都会中断执行。 五、实现原理 async 函数的实现原理，就是将 Generator 函数和自动执行器，包装在一个函数里。【Generator可以理解为一个状态机，内部封装了很多状态，同时返回一个迭代器Iterator对象。可以通过这个迭代器遍历相关的值及状态。 Generator的显著特点是可以多次返回，每次的返回值作为迭代器的一部分保存下来，可以被我们显式调用。】 [size=1em] | async function fn(args) {
// ...
}
// 等同于
function fn(args) {
return spawn(function* () {
// ...
});
}
|
所有的async函数都可以写成上面的第二种形式，其中的spawn函数就是自动执行器。下面给出spawn函数的实现 [size=1em]1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| function spawn(genF) {
return new Promise(function(resolve, reject) {
const gen = genF();
function step(nextF) {
let next;
try {
next = nextF();
} catch(e) {
return reject(e);
}
if(next.done) {
return resolve(next.value);
}
Promise.resolve(next.value).then(function(v) {
step(function() { return gen.next(v); });
}, function(e) {
step(function() { return gen.throw(e); });
});
}
step(function() { return gen.next(undefined); });
});
}
|
六、注意事项 1.await只能使用在async函数内部，在普通函数中使用会报错 2.任何一个await语句后面的 Promise 对象变为reject状态，那么整个async函数都会中断执行。最好将其放入try—catch中 3.在某些场景下并不适合使用await，会增加页面交互时间，要合理利用
有相同爱好的可以进来一起讨论哦：企鹅群号：1046795523
| 
/1 
|手机版|OpenEdv-开源电子网
( 粤ICP备12000418号-1 )
发表于 2020-10-15 15:57:36
