JS Async

JavaScript Async

"async and await make promises easier to write"

async 使函数返回 Promise

await 使函数等待 Promise

Async 语法

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

实例

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

等同于:

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

以下是使用 Promise 的方法:

myFunction().then(  function(value) { /* 成功时的代码 */ },  function(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 语法

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

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();

亲自试一试

等待超时

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 引入了 JavaScript 关键字 asyncawait

下表注明了首个完全支持两者的浏览器版本:

ChromeIEFirefoxSafariOpera
Chrome 55Edge 15Firefox 52Safari 11Opera 42
2016 年 12 月2017 年 4 月2017 年 3 月2017 年 9 月2016 年 12 月