JavaScript Async
JavaScript基础 2022-04-25 01:50:53小码哥的IT人生shichen
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);}
);
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript async / await</h1>
<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>
运行结果：
Javascript async / await Hello
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.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>
运行结果：
Javascript async / await Hello
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
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();
完整实例：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript async / await</h2>
<h1 id="demo"></h1>
<script>
async function myDisplay() {
let myPromise = new Promise(function(myResolve, myReject) {
myResolve("I love You !!");
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
</script>
</body>
</html>
运行结果：
Javascript async / await I love You !!
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
等待超时
async function myDisplay() {
let myPromise = new Promise(function(myResolve, myReject) {
setTimeout(function() { myResolve("I love You !!"); }, 3000);
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript async / await</h1>
<p>请等待 3 秒（3000 毫秒）让此页面发生变化。</p>
<h1 id="demo"></h1>
<script>
async function myDisplay() {
let myPromise = new Promise(function(myResolve, myReject) {
setTimeout(function() { myResolve("I love You !!"); }, 3000);
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
</script>
</body>
</html>
运行结果：
Javascript async / await 请等待 3 秒（3000 毫秒）让此页面发生变化。
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
等待文件
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();
完整实例：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript async / await</h2>
<p id="demo"></p>
<script>
async function getFile() {
let myPromise = new Promise(function(myResolve, myReject) {
let req = new XMLHttpRequest();
req.open('GET', "/demo/js/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();
</script>
</body>
</html>
运行结果：
Javascript async / await汽车，现指自动车（英式英语：car；美式英语：automobile；美国口语：auto），即本身具有动力得以驱动前进，不须依轨道或电缆，得以动力行驶之车辆。广义来说，具有两轮或以上以原动机驱动之车辆，便可称其为汽车；狭义来说，仅指三或四轮以上，以热机驱动之车辆为汽车（亦是生活中所说之汽车）。第一辆全尺寸汽车由尼古拉·约瑟夫·居纽制造出来。而德国工程师卡尔·本茨则被为现代化汽车之父。本茨制造了三轮汽车以后，戈特利布·戴姆勒首先制造四轮汽车，美国人亨利·福特首先大量生产平价汽车，是使汽车得以普及化的人。
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
浏览器支持
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 月 |
