目录

JavaScript Async/Await

"async and await make promises easier to write"

异步使函数返回 Promise

等待让函数等待 Promise

异步语法

关键字async在函数使函数返回承诺之前:

示例

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

是相同的:

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

以下是如何使用 Promise:

myFunction().then(
  function(value) { /* code if successful */ },
  function(error) { /* code if some error */ }
);

示例

async function myFunction() {
  return "Hello";
}
myFunction().then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);

亲自试一试 »

或者更简单,因为您期望一个正常值(正常响应,而不是错误):

示例

async function myFunction() {
  return "Hello";
}
myFunction().then(
  function(value) {myDisplayer(value);}
);

亲自试一试 »


等待语法

这个await关键字只能在内部使用async功能。

这个await关键字使函数暂停执行并在继续之前等待已解决的承诺:

let value = await promise;


示例

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

基本语法

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

myDisplay();

亲自试一试 »

这两个参数(resolve 和reject)是由JavaScript 预先定义的。

我们不会创建它们,而是在执行器函数准备好时调用其中之一。

很多时候我们不需要拒绝函数。

没有拒绝的示例

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

myDisplay();

亲自试一试 »

等待超时

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

myDisplay();

亲自试一试 »

等待文件

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

getFile();

亲自试一试 »


浏览器支持

ECMAScript 2017 引入了 JavaScript 关键字asyncawait

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

Chrome 55 Edge 15 Firefox 52 Safari 11 Opera 42
Dec, 2016 Apr, 2017 Mar, 2017 Sep, 2017 Dec, 2016