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 月 |
