"async and await make promises easier to write"
异步使函数返回 Promise
等待让函数等待 Promise
关键字async
在函数使函数返回承诺之前:
async function myFunction() {
return "Hello";
}
是相同的:
function myFunction() {
return Promise.resolve("Hello");
}
以下是如何使用 Promise:
myFunction().then(
function(value) { /* code if successful */ },
function(error) { /* code if some 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
关键字只能在内部使用async
功能。
这个await
关键字使函数暂停执行并在继续之前等待已解决的承诺:
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 预先定义的。
我们不会创建它们,而是在执行器函数准备好时调用其中之一。
很多时候我们不需要拒绝函数。
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 |
Dec, 2016 | Apr, 2017 | Mar, 2017 | Sep, 2017 | Dec, 2016 |
截取页面反馈部分,让我们更快修复内容!也可以直接跳过填写反馈内容!