ES8 中 async/await

async 和 await 是一种更加优雅的异步编程解决方案，是 Promise 的拓展，如果对 Promise 还不了解的话，请移步 Promise 章节进行学习。

在我们处理异步的时候，比起回调函数，Promise 的 then 方法会显得较为简洁和清晰，但是在处理多个彼此之间相互依赖的请求的时候，就会显的有些繁琐。这时候，用 async/await 更加优雅。

我们知道 JavaScript 是单线程的，使用 Promise 之后可以让我们书写异步操作更加简单，而 async 是让我们写起 Promise 像同步操作。看下示例：

基本语法

方法前面加上 async 里面加上 await ,await 后面跟的就是 Promise 对象

function timeout() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log(1);
      resolve(); // resolve('success')
    }, 1000);
  });
}

// 不加async和await是2、1   加了是1、2
async function foo() {
  await timeout(); // let res = await timeout() res是success
  console.log(2);
}
foo();

在 async 函数中使用 await，那么 await 这里的代码就会变成同步的了，意思就是说只有等 await 后面的 Promise 执行完成得到结果才会继续下去，await 就是等待。

应用举例

// 把ajax封装成模块
import ajax from "./ajax";

function request(url) {
  return new Promise((resolve) => {
    ajax(url, (res) => {
      resolve(res);
    });
  });
}
async function getData() {
  let res1 = await request("static/a.json");
  console.log(res1);
  let res2 = await request("static/b.json");
  console.log(res2);
  let res3 = await request("static/c.json");
  console.log(res3);
}
getData();

注意

await 只能在 async 标记的函数内部使用,单独使用会触发语法错误

推荐阅读

• async/await