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 关键字 async 和 await。
下表注明了首个完全支持两者的浏览器版本：
| Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome 55 | Edge 15 | Firefox 52 | Safari 11 | Opera 42 |
| 2016 年 12 月 | 2017 年 4 月 | 2017 年 3 月 | 2017 年 9 月 | 2016 年 12 月 |