Async/await详解

一、概念与背景

他是在ES8被提出的一种异步方式，它其实是promise的一种语法糖

二、 Async关键字

async 关键字用于快速声明异步函数 ，可以用在函数声明、函数表达式、箭头函数和方法上

async function foo() {} 
let bar = async function() {}; 
let baz = async () => {}; 
class Qux { async qux() {} } 

2.1、特性

• async声明的异步函数，如果没有返回值，则它就是普通函数，没有什么特别

async function foo() {console.log(1); 
} 
foo(); 
console.log(2); 
// 1 
// 2

• async声明的异步函数，如果有返回值，则返回值会被Promise.resolve自动包装成promise返回
• async声明的异步函数，可以用await来调用其他异步函数

三、await

该关键字可以暂停异步函数代码的执行，等待解决

let p = new Promise((resolve, reject) => setTimeout(resolve, 1000, 3));p.then((x) => console.log(x)); // 3// 使用 async/await 可以写成这样:
async function foo() {
let p = new Promise((resolve, reject) => setTimeout(resolve, 1000, 3));console.log(await p);
}
foo(); // 3

3.1、特性

• await 关键字期待(但实际上并不要求)一个实现 thenable 接口的对象，但常规的值也可以。如果是实现 thenable 接口的对象，则这个对象可以由 await 来“解包”。如果不是，则这个值就被当作 已经解决的期约

// 等待一个原始值
async function foo() {console.log(await 'foo'); }
foo(); 
// foo// 等待一个没有实现 thenable 接口的对象async function bar() {console.log(await ['bar']); 
}
bar();// ['bar']// 等待一个实现了 thenable 接口的非期约对象 
async function baz() {const thenable = {then(callback) { callback('baz');}
};
console.log(await thenable); }
baz(); 
// baz// 等待一个期约 
async function qux() {console.log(await Promise.resolve('qux')); 
}
qux();
// qux

• 如果await等待的结果是抛出了一个错误，或者是一个失败的promise，则不会执行异步函数中后面的代码了，该异步函数就会返回一个失败的promise

async function foo2() { console.log(1);const aaa = await (() => { throw 3; })();console.log(2)
}
foo2().then(console.log).catch(console.log)
// 1 3async function foo2() { console.log(1);const aaa = await 	Promise.reject(3)console.log(2)
}
foo2().then(console.log).catch(console.log)
// 1 3

3.2、await使用场景

await关键字只能在这两个场景下使用：
1、async定义的异步函数中；
2、模块的最外层作用域中（a、html中的script标签声明type='module’类型，b、es6中的模块js文件中）

四、分析执行顺序demo

async function foo() {console.log(await Promise.resolve('foo'));
}
async function bar() { console.log(await 'bar');
}
async function baz() { console.log('baz');
}
const p = new Promise(resolve=>{console.log(2222),resolve('promise')})
p.then(v=>console.log(v))
foo();
bar();
baz();

async function t1() { console.log(1111);console.log(await t2());console.log(2222);
}
async function t2() { console.log(3333);return await 4444
}
t1()
console.log(5555);
setTimeout(() => {console.log(6666);
}, 0)
new Promise((resolve, reject) => { console.log(7777);resolve()
}).then(() => { console.log(8888); 
})
console.log(9999);

async function foo() {console.log(2);console.log(await Promise.resolve(8));console.log(9);
}
async function bar() {console.log(4);console.log(await 6); console.log(7);
}
console.log(1);
foo();
console.log(3);
bar(); 
console.log(5);

async function t1() { console.log('start test1');console.log(await t2());console.log('end test1');
}
async function t2() { console.log('test2');return await 'return test2 value'
}
t1()
console.log('start async');
setTimeout(() => {console.log('settimeout');
}, 0)
new Promise((resolve, reject) => { console.log('promise1');resolve()
}).then(() => { console.log('promise2'); })
console.log('end async');