JavaScript Async
"async 和 await 让 Promise 的编写更轻松"
async 使一个函数返回一个 Promise
await 使一个函数等待一个 Promise
Async 语法
函数前的 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("I love You !!");
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
resolve 和 reject 这两个参数是由 JavaScript 预定义的。
我们将不创建它们，而是在 executor 函数准备好时调用其中一个。
很多时候我们不需要 reject 函数。
不带 reject 的示例
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 关键字 async 和 await。
下表定义了第一个完全支持两者的浏览器版本
| Chrome 55 | Edge 15 | Firefox 52 | Safari 11 | Opera 42 |
| 2016 年 12 月 | 2017 年 4 月 | 2017 年 3 月 | 2017 年 9 月 | 2016 年 12 月 |
