深入淺出探究JavaScript中的async與await
目錄
- 1、前言
- 2、詳解
- 2.1、async
- 2.1.1、函式返回非Promise物件
- 2.1.2、函式返回Promise物件
- 2.2、await
- 2.3、async、await結合使用
- 2.4、async、await異常處理
- 3、總結
1、前言
async函式，也就是我們常說的async/await，是在ES2017(ES8)引入的新特性，主要目的是為了簡化使用基於Promise的API時所需的語法。async和await關鍵字讓我們可以用一種更簡潔的方式寫出基於Promise的非同步行為，而無需刻意地鏈式呼叫Promise。
2、詳解
async表示函式裡有非同步操作，await表示緊跟在後面的表示式需要等待結果。需要注意的是await
2.1、async
async函式返回一個 Promise物件，可以使用then方法添加回調函式。只要使用async，不管函式內部返回的是不是Promise物件，都會被包裝成Promise物件。
話不多說，上程式碼看效果：
2.1.1、函式返回非Promise物件
async function testAsync() {
return "hello async";
}
const result = testAsync();
console.log(result);
可以看出函式直接返回字串時，返回的是Promise物件，相當於直接通過Prom
2.1.2、函式返回Promise物件
async function testAsync() {
return new Promise(function(resolve,reject) {
if (true) {
resolve('resolve return')
} else {
reject('reject return')
}
})
}
console.log(testAsync());
可以看出返回的也是Promise物件。
2.2、await
await關鍵字可以跟在任意變數或者表示式之前，但通常await後面會跟一個非同步過程。await使用時，會阻塞後續程式碼執行。我們先拋開async，單獨談await。
由於await只能在async標識的函式內使用，以下例子請在瀏覽器控制檯執行看效果。
function testAsync() {
return new Promise(function(resolve,reject) {
setTimeout(function() {
if (true) {
console.log('請求中...')
resolve('resolve return')
} elwww.cppcns.comse {
reject('reject return')
}
},2000)
})
}
var result = await testAsync();
var result1 = await "testAsync後執行";
console.log(result);
console.log(result1);
可以看出，使用了await後，必須得等testAsync方法執行完後，才會執行後續程式碼。您也可以嘗試一下把testAsync前的async去掉，看看跟加上await時有啥區別。
2.3、async、await結合使用
上面我們知道了await會阻塞後續程式碼執行，那怎麼解決這個問題呢？就需要用到async，使用async後，函式執行時，一旦遇到await就會先返回一個Promise物件，等到await後的操作完成後，再接著執行async函式體內的語句。
先上語法：
async function 函式名() {
await XXX;
}
上示例程式碼：
function testAsync() {
return new Promise(function(resolve,reject) {
setTimeout(function() {
if (true) {
console.log('請求中...')
resolve('resolve return')
} else {
reject('reject return')
}
},2000)
})
}
function testAsync2() {
return new Promise(function(resolve,reject) {
setTimeout(function() {
if (true) {
console.log('請XckEQ求中2...')
resolve('resolve return2')
} else {
reject('reject return2')
}
},2000)
})
}
async function test() {
console.log('test開始.www.cppcns.com..');
var value1 = await testAsync();
console.log(value1);
var value2 = await testAsync2();
console.log(value2);
var value3 = await 'test結束...';
console.log(value3);
}
console.log(test());
上圖可以看出遇到第一個await後，立即返回了Promise物件，然後再按順序去執行testAsync函式，等待testAsync函式執行後再去執行testAsync2函式。還可以看出async函式可以簡化Promise的語法，以往我們需要使用.then去處理回撥，現在我們可以使用await像寫同步程式碼一樣去寫非同步程式碼。
我們再升級一下，在上面的基礎上再加入兩個普通函式：
function fun1() {
return '函式1'
}
function fun2() {
return '函式2'
}
function fun3() {
console.log(fun1());
console.log(test()); // async/await函式
console.log(fun2());
}
console.log(fun3());
我們先梳理一下函式的執行過程，
1、先執行函式1
2、進入test函式並輸出開始
3、在test函式中遇到await，立即返回Promise物件
4、執行函式2
5、執行test函式中的testAsync方法
6、等到test函式中的testAsync方法執行完後，繼續執行testAsync2方法
7、test函式結束
可以看出，async函式在遇到await後會立即返回Promise物件，繼續執行async函式外部後續邏輯，async函式內部會被await阻塞並按順序執行程式碼邏輯。
2.4、async、await異常處理
await後面的函式是有可能出現異常的，所以最好把await命令放在try...catch程式碼塊中。如果await後是Promise物件，也可以使用.catch進行捕獲。
// 第一種寫法
async function myFunction() {
try {
await something();
} catch (err) {
console.log(err);
}
}
// 第二種寫法
async function myFunction() {
await somethingPromise()
.catch(function (err) {
console.log(err);
});
}
3、總結
async函式在遇到await後會立即返回Promise物件，繼續執行async函式外部邏輯，async函式內部會被await阻塞並按順序執行程式碼邏輯。
可以使用try...catch或.catch對async函式進行異常處理。
到此這篇關於深入淺出探究中的async與await的文章就介紹到這了,更多相關Script async await內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！