仅以此篇加深记忆:
1、什么是async、await?
async / await 是Generator函数的语法糖,原理是通过Generator函数 + 自动执行器 实现的,这使得async / await 跟普通函数一样,不用一直 next( ) 执行了。
例子1
function f(){
return new Promise((resolve,reject)=>{
resolve('f 函数执行成功的结果');
});
}
async function doo(){
let x = await f();
console.log(x);
}
async function foo(){
let y = await 6;
console.log(y);
}
doo();
foo();
console.log('start:');
------打印结果:----------------------
start:
6
f 函数执行成功的结果
-
首先,看了上面例子,书本上 介绍的 async 特点,被证实的有:
- 函数前面 async 修饰,标明它是一个异步函数;
- await 运算符,它会阻塞后面的代码 ;
- await 表达式返回的值:如果是promise对象,则得到起resolve的值(你也可接受reject的返回值,那么 let x = await f(); 处需有catch处理)
-
疑惑:await 后面接一个函数或 实际值,跟接Promise对象,执行顺序是怎样的?
2、Generator 函数介绍
Generator函数是一个状态机,封装了多个内部状态。(也就是《JavaScript高级程序设计》里介绍的生成器)。
它有几个特点:
1. 返回值:返回一个遍历器对象
2. 只有调用 next 方法才会遍历下一个内部状态
3.函数内 yield 表示暂停状态
Generator函数暂停 / 执行的原理
先了解下协程的概念:
一个线程 A 执行到一半的时候,可以暂停执行,将执行权交给B线程,等稍后收回执行权的时候,A再恢复执行。这种可以并行执行、交换执行权的线程(A)叫做协程。
- 自动执行器
3. async / await 执行顺序
通过例子阐述:
- await 后面是Promise对象时:
console.log('script start')
async function async1() {
await async2();
console.log('async1 end')
}
function async2() {
console.log('async2 begin');
return new Promise((resolve,reject)=>{
console.log("Promise2");
resolve(33);
})
}
async1();
new Promise(resolve => {
console.log('Promise')
resolve()
})
.then(function () {
console.log('promise1')
})
.then(function () {
console.log('promise2')
})
console.log('script end')
------------------打印结果-----------
script start
async2 begin
Promise2
Promise
script end
promise1
promise2
async1 end
- await 后面是 非Promise对象 时:
console.log('script start')
async function async1() {
await async2();
console.log('async1 end')
}
//区别在这 aysnc2 函数的返回值
function async2() {
console.log('async2 begin');
}
async1();
new Promise(resolve => {
console.log('Promise')
resolve()
})
.then(function () {
console.log('promise1')
})
.then(function () {
console.log('promise2')
})
console.log('script end')
---------------------打印结果-----------------
script start
async2 begin
Promise
script end
async1 end
promise1
promise2
- 当await 接收的值非Promise 对象时,它会将返回值包装成Promise.then(返回值)将值和恢复执行的消息一起添加到消息队列中;
- 如果是Promise对象,先添加到消息队列,等待可用值;等有可用值后再把恢复执行的消息添加到消息队列;有两个添加到消息队列的操作。