1. 異步函數被調用后會先后返回兩個值,第一個返回值是一個promise對象(在異步函數被調用后立即返回),第二個返回值是異步函數return語句的返回值。第二個返回值將成為第一個返回值promise對象的value屬性值。
MDN Web Docs是這樣描述異步函數的返回值:
instead of immediately returning the final value, the asynchronous method returns a promise to supply the value at some point in the future.
示例代碼如下所示:
function sleep (time) {
return new Promise((resolve) => setTimeout(resolve, time));
}
async function test_async() {
console.log('start time: ' + new Date());
await sleep(20000);
console.log('finish time: ' + new Date());
return 'hello world';
}
var o = test_async();
console.log(o);
示例代碼的運行結果如下所示:
2. await后面通常緊跟一個promise對象或一個異步函數的調用。因為一個異步函數調用的返回值是一個promise對象,所以,await后面緊跟一個異步函數調用,本質就是await后面緊跟一個promise對象,即:await 異步函數名() = await 一個promise對象 。
3. "await 一個promise對象" 將獲得這個promise對象狀態為fulfilled或rejected時value屬性值。"await 異步函數名()" 將獲得這個異步函數第二次返回的返回值(即return語句的返回值)。
示例代碼如下所示:
async function hello() { return "Hello" };
async function handleHello() {
// hello()的值是hello()第一次的返回值(即是一個promise對象)
// 而await hello()的值是hello()第二次的返回值(即return語句的返回值)
let result = await hello();
console.log(result); // output: Hello
}
handleHello();
4. await是阻塞等待的,等待一個promise對象的狀態由pending變為fulfilled或rejected,或者說,等待一個promise對象被resolve或reject。
5. Promise.prototype.then()是阻塞等待的,等待一個promise對象的狀態由pending變為fulfilled或rejected,或者說,等待一個promise對象被resolve或reject。
6. 使用async關鍵字聲明一個函數為異步函數,在異步函數內和模塊頂層才能使用await關鍵字,否則就會報錯。
MDN Web Docs是這樣描述的:
await is only valid in async functions and the top level bodies of modules.
7. 創建promise對象時回調函數里的參數resolve和reject是由JavaScript engine預定義的函數。
const testPromise = new Promise((resolve, reject) => {
// 這里的resolve和reject是由JavaScript engine預定義的函數
setTimeout(() => {
resolve('testPromise');
}, 5000);
});
8. Promise.prototype.then(callback1, callback2)的返回值是一個promise對象,這個promise對象是resolve到then(callback1, callback2)中callback1或callback2的返回值,就看是callback1被調用了還是callback2被調用了。
示例代碼如下所示:
Promise.resolve('success').then(() => 1, () => 2)
Promise.reject('fail').then(() => 1, () => 2)
參考文檔:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await