JavaScript 异步
"async 和 await 使 promise 更易编写"
async 使函数返回一个 Promise
await 使函数等待 Promise 完成
异步语法
在函数前使用 async 关键字使函数返回一个 promise
示例
async function myFunction() {
return "Hello";
}
等同于
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 关键字只能在 async 函数内使用。
await 关键字使函数暂停执行，并在 Promise 完成之前等待。
let value = await promise;
示例
让我们一步步学习如何使用它。
基本语法
async function myDisplay() {
let myPromise = new Promise(function(resolve, reject) {
resolve("我爱你！！");
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
两个参数（resolve 和 reject）由 JavaScript 预定义。
我们不会创建它们，而是在执行函数准备就绪时调用其中一个。
通常我们不需要 reject 函数。
没有 reject 函数的示例
async function myDisplay() {
let myPromise = new Promise(function(resolve) {
resolve("我爱你！！");
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
等待超时
async function myDisplay() {
let myPromise = new Promise(function(resolve) {
setTimeout(function() {resolve("我爱你！！");}, 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("文件未找到");
}
};
req.send();
});
document.getElementById("demo").innerHTML = await myPromise;
}
getFile();
浏览器支持
ECMAScript 2017 引入了 JavaScript 关键字 async 和 await。
下表定义了第一个完全支持这两个关键字的浏览器版本：
| Chrome 55 | Edge 15 | Firefox 52 | Safari 11 | Opera 42 |
| 2016 年 12 月 | 2017 年 4 月 | 2017 年 3 月 | 2017 年 9 月 | 2016 年 12 月 |
