JavaScript 66 JavaScript Async 66.4 JavaScript Async

JavaScript

66 JavaScript Async

66.4 JavaScript Async

“async and await make promises easier to write”

async 使函数返回 Promise

await 使函数等待 Promise

66.4.1 Async 语法

函数前的关键字 async 使函数返回 promise：

【举个栗子】

async function myFunction() {
  return "Hello";
}
1
2
3

等同于：

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

使用 Promise 的方法：

myFunction().then(
  function(value) { /* 成功时的代码 */ },
  function(error) { /* 出错时的代码 */ }
);
1
2
3
4

【实例】

async function myFunction() {
  return "Hello";
}
myFunction().then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);
1
2
3
4
5
6
7

或者更简单，因为咱们都期望正常值（正常响应，而不是错误）：

async function myFunction() {
  return "Hello";
}
myFunction().then(
  function(value) {myDisplayer(value);}
);
1
2
3
4
5
6

66.4.2 Await 语法

函数前的关键字 await 使函数等待 promise：

let value = await promise;
1

await 关键字只能在 async 函数中使用。

【基础语法】

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

myDisplay();
1
2
3
4
5
6
7
8

【等待超时】

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

myDisplay();
1
2
3
4
5
6
7
8

【等待文件】

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();
1
2
3
4
5
6
7
8
9
10
11
12
13
14

66.4.3 浏览器支持

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

首个完全支持两者的浏览器版本：