详细了解 async 和 await

在项目中经常会遇到需要等待一些异步操作进行完后再进行后续操作，例如等待一个接口请求完后再请求另一个接口，那么我比较习惯的操作就是使用 async / await 进行处理；

async testBtn() {
  let i = await this.load()
  console.log(i)
},
load() {
  return this.$server.loading()
},

上面的例子是一段简单的等待接口 load 的返回值再进行后续操作的代码，但是光这样很难看出 async和await 在其中具体起到什么作用，而 async 可以单独使用，await 又为什么需要和 async 一起使用；

async

async function test(){
	return "test";
}
async function test1(){
	return new Promise(resolve => {
    setTimeout(() => {
      resolve('hello');
    }, 1000);
  });
}
console.log(test())  // Promise {<resolved>: "test"}
console.log(test1())  // Promise {<resolved>: "hello"}

打印出的结果显示，如果一个 Promise 被传递给一个 await 操作符，await 将等待 Promise 正常处理完成并返回其处理结果；如果该值不是一个 Promise，await 会把该值转换为已正常处理的Promise，然后等待其处理结果。

await

await 可以用于等待一个 Promise 对象或者任何要等待的值，如果等待的是 promise对象则返回 Promise 对象的处理结果。如果等待的不是 Promise 对象，则返回该值本身。

MDN：await 表达式会暂停当前 async function 的执行，等待 Promise 处理完成。若 Promise 正常处理(fulfilled)，其回调的resolve函数参数作为 await 表达式的值，继续执行 async function。

也就是说 await 会等待其后的表达式执行完成，也就形成了阻塞，这就是为什么 async 和 await 必须配合使用。