async/await 是以更舒适的方式使用 promise 的一种特殊语法。
在 Salesforce 中，如果你有开发过 lwc 相关的组件，想必应该使用过 Async/Await 语法。其实在 JavaScript 中做异步开发时，我们通常会毫不犹豫的使用 Async/Await. 不管是并发还是串行，Async/Await 都能处理的很好，而且还保证了代码的可读性。本篇内容主要是我根据一些资料和官方文档来阐述对 Async/Await 语法的一些理解，如有叙述不对的地方，欢迎指正。
什么是 async/await?
JavaScript 中的 async/await 是 AsyncFunction 特性中的关键字。目前为止，除了 IE 之外，常用浏览器和 Node.js (v7.6+) 都已经支持该特性。具体支持情况可以在参考 这里。
async/await 是一种建立在 Promise 之上的编写异步或非阻塞代码的新方法 (Generator 的语法糖), 普遍认为是 JS 异步操作的最优雅的解决方案。相对于 Promise 和回调，它的可读性和简洁度都更高。只要 function 标记为 async, 就表示函数里面可以写 await 的同步语法，而 await 顾名思义就是「等待」,它会确保一个 promise 都解決 ( resolve ) 或出错 ( reject ) 后才会进行下一步，当 async function 的内容全部执行结束，会返回一个 promise, 表示后续代码可以使用 .then 语法來连接，基本的代码就像下面这样：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
async function a(){
await b();
..... // 等 b() 完成后才会执行
await c();
..... // 等 c() 完成后才会执行
await new Promise(resolve=>{
.....
});
..... // 上方的 promise 完成后才会执行
}
a();
a().then(()=>{
..... // 等 a() 完成后接著执行
});
async 的作用？
我们先看如下代码的输出结果是什么：
1
2
3
4
5
6
async function testAsync() {
return "hello async";
}
const result = testAsync();
console.log(result); //Promise {<fulfilled>: 'hello async'}
所以，async 函数返回的是其实一个 Promise 对象。从文档中也可以得到这个信息。async 函数会返回一个 Promise 对象。如果在函数中 return 一个直接量，async 会把这个直接量通过 Promise.resolve() 封装成 Promise 对象。
async 函数返回的是一个 Promise 对象，所以在最外层不用 await 获取其返回值的情况下，我们可以用原来的方式:then() 链来处理这个 Promise 对象，就像这样：
1
2
3
testAsync().then(v => {
console.log(v); // 输出 hello async
});
await 在等待什么呢？
根据 MDN 文档 上写的：
1
[return_value] = await expression;
await 等待的是一个表达式，那么表达式，可以是一个常量 ,变量，promise, 函数等，换句话说，就是没有特殊限定。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function getSomething() {
return "something";
}
async function testAsync() {
return Promise.resolve("hello async");
}
async function test() {
const v1 = await getSomething();
const v2 = await testAsync();
console.log(v1, v2);
}
test(); // something hello async
为什么 await 关键词只能在 async 函数中用？
await 操作符等的是一个返回的结果，如果它等到的是一个 Promise 对象，它会阻塞后面的代码，等着 Promise 对象 resolve，然后得到 resolve 的值，作为 await 表达式的运算结果。这就是 await 必须用在 async 函数中的原因。async 函数调用不会造成阻塞，它内部所有的阻塞都被封装在一个 Promise 对象中异步执行。
async/await 的优势
假设一个业务，分多个步骤完成，每个步骤都是异步的，而且依赖于上一个步骤的结果。我们先用 setTimeout 来模拟异步操作：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function takeLongTime(n) {
return new Promise(resolve => {
setTimeout(() => resolve(n + 200), n);
});
}
function step1(n) {
console.log(`step1 with ${n}`);
return takeLongTime(n);
}
function step2(n) {
console.log(`step2 with ${n}`);
return takeLongTime(n);
}
function step3(n) {
console.log(`step3 with ${n}`);
return takeLongTime(n);
}
现在用 Promise 方式来实现这三个步骤的处理：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function doIt() {
console.time("doIt");
const time1 = 300;
step1(time1)
.then(time2 => step2(time2))
.then(time3 => step3(time3))
.then(result => {
console.log(`result is ${result}`);
console.timeEnd("doIt");
});
}
doIt();
//step1 with 300
// step2 with 500
// step3 with 700
// result is 900
// doIt: 1512.908935546875 ms
如果用 async/await 来实现呢，会是这样：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
async function doIt() {
console.time("doIt");
const time1 = 300;
const time2 = await step1(time1);
const time3 = await step2(time2);
const result = await step3(time3);
console.log(`result is ${result}`);
console.timeEnd("doIt");
}
doIt();
// step1 with 300
// step2 with 500
// step3 with 700
// result is 900
// doIt: 1512.2080078125 ms
结果和之前的 Promise 实现是一样的，但是这个代码看起来清晰得多，几乎跟同步代码一样。
思考：为什么需要异步编程？
JavaScript 是单线程的，就是必须等待上一个任务执行完才能执行下一个任务，这种执行模式叫：同步.
但是随着业务复杂度的提升，很多情况下有处理高并发 (单位时间内极大的访问量) 和 I/O 密集场景 (ps: I/O 操作往往非常耗时，所以异步的关键在于解决 I/O 耗时问题), 如果采用同步编程，问题就来了，服务器处理一个 I/O 请求需要大量的时间，后面的请求都将排队，造成浏览器端的卡顿。异步编程能解决这个问题。
