JavaScript async/await

async/await 其实是基于 promises 的语法糖，使异步代码更易于编写和阅读。使用 async 关键字声明一个异步函数。await 关键字则会等待一个异步函数执行完成。

async/await 其实是基于 promises 的语法糖，使异步代码更易于编写和阅读。

使用 async 关键字声明一个异步函数。 await 关键字则会等待一个异步函数执行完成。

async 语法

async 关键字使函数返回一个 Promise 对象。

async function myFunction() {
  return "Hello";
}

等同于下面的代码：

async function myFunction() {
  return Promise.resolve("Hello");
}

await 语法

await 关键字等待一个异步函数执行完成。

await 语法：

let value = await promise;

await 关键字只能用在 async 函数内部。

例子

让我们慢慢来，学习如何使用它。

基本语法

async function myDisplay() {
  let myPromise = new Promise(function (myResolve, myReject) {
    myResolve("I love You !!");
  });
  document.getElementById("demo").innerHTML = await myPromise;
}

myDisplay();

setTimeout()

async function myDisplay() {
  let myPromise = new Promise(function (myResolve, myReject) {
    setTimeout(function () {
      myResolve("I love You !!");
    }, 3000);
  });
  document.getElementById("demo").innerHTML = await myPromise;
}

myDisplay();

异步请求

async function getFile() {
  let myPromise = new Promise(function (myResolve, myReject) {
    let req = new XMLHttpRequest();
    req.open("GET", "mycar.html");
    req.onload = function () {
      if (req.status == 200) {
        myResolve(req.response);
      } else {
        myResolve("File not Found");
      }
    };
    req.send();
  });
  document.getElementById("demo").innerHTML = await myPromise;
}

getFile();

浏览器支持

ECMAScript 2017 引入了关键字 async 和 await。

下表定义了第一个完全支持两者的浏览器版本：

Chrome Edge Firefox Safari Opera
Chrome 55 Edge 15 Firefox 52 Safari 11 Opera 42
2016-12 2017-04 2017-03 2017-09 2016-12
JavaScript Promise JavaScript Ajax