“async 和 wait 使 Promise 更容易编写”
async 使函数返回 Promise
await 让函数等待 Promise
函数之前的关键字 async
使函数返回一个 Promise:
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);}
);
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript async / await</h2>
<p id="demo"></p>
<script>
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
async function myFunction() {return "Hello";}
myFunction().then(
function(value) {myDisplayer(value);},
function(error) {myDisplayer(error);}
);</script>
</body>
</html>
或者更简单,因为您期望一个正常值(正常响应,而不是错误):
async function myFunction() {
return "Hello";
}
myFunction().then(
function(value) {myDisplayer(value);}
);
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript async / await</h2>
<p id="demo"></p>
<script>
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
async function myFunction() {return "Hello";}
myFunction().then(
function(value) {myDisplayer(value);}
);
</script>
</body>
</html>
await
关键字只能在 异步
函数。
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();
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript async / await</h2>
<h1 id="demo"></h1>
<script>
async function myDisplay() {
let myPromise = new Promise(function(resolve, reject) {
resolve("I love You !!");
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
</script>
</body>
</html>
这两个参数(resolve 和reject)是由JavaScript 预先定义的。
我们不会创建它们,而是在执行器函数准备好时调用其中之一。
很多时候我们不需要拒绝函数。
async function myDisplay() {
let myPromise = new Promise(function(resolve) {
resolve("I love You !!");
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript async / await</h2>
<h1 id="demo"></h1>
<script>
async function myDisplay() {
let myPromise = new Promise(function(resolve) {
resolve("I love You !!");
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
</script>
</body>
</html>
async function myDisplay() {
let myPromise = new Promise(function(resolve) {
setTimeout(function() {resolve("I love You !!");}, 3000);
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript async / await</h2>
<p>Wait 3 seconds (3000 milliseconds) for this page to change.</p>
<h1 id="demo"></h1>
<script>
async function myDisplay() {
let myPromise = new Promise(function(resolve) {
setTimeout(function() {resolve("I love You !!");}, 3000);
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
</script>
</body>
</html>
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();
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript async / await</h2>
<p id="demo"></p>
<script>
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();
</script>
</body>
</html>
ECMAScript 2017 引入了 JavaScript 关键字 异步
和等待
。
下表定义了完全支持两者的第一个浏览器版本:
Chrome 55 | Edge 15 | Firefox 52 | Safari 11 | Opera 42 |
Dec, 2016 | Apr, 2017 | Mar, 2017 | Sep, 2017 | Dec, 2016 |