資訊專欄INFORMATION COLUMN
摘要：所有函數(shù)都會隱式返回一個，而的完成值將是函數(shù)的返回值本例中是。意味著調(diào)用會一直等待，直到完成并打印出它的值。調(diào)試最后但是同樣重要的是，在使用時，一個殺手級優(yōu)勢是調(diào)試更容易。引用資料的完勝的六個理由函數(shù)的含義和用法
async和await
async/await是一種編寫異步代碼的新方法，之前編寫異步代碼的方案是回調(diào)和promise
async/await實際上是建立在promise的基礎(chǔ)上，它不能與普通回調(diào)或者node回調(diào)一起用
async/await像promise一樣，也是非阻塞的
async/await讓異步代碼看起來、表現(xiàn)起來更像同步代碼，這正是其威力所在
語法(對比promise)假設(shè)函數(shù)getJSON返回一個promise，而該promise的完成值是一個JSON對象，我們只想調(diào)用它，并輸出該JSON，然后返回“done”
promise的實現(xiàn)
const makeRequest = ()=>{
getJSON().then(
data => {
console.log(data)
return "done"
}
)
}
makeRequest()
async、await的實現(xiàn)
const makeRequest = async ()=>{
console.log(await get.JSON())
return "down"
}
makeRequest()
async、await與Promise的區(qū)別
函數(shù)前面有一個關(guān)鍵字 async。await 關(guān)鍵字只用在用 async 定義的函數(shù)內(nèi)。所有 async 函數(shù)都會隱式返回一個 promise，而 promise 的完成值將是函數(shù)的返回值（本例中是 "done"）。
上面一點暗示我們不能在代碼的頂層用 await，因為這樣就不是在 async 函數(shù)內(nèi)。
await getJSON() 意味著 console.log 調(diào)用會一直等待，直到 getJSON() promise 完成并打印出它的值。
async/await的優(yōu)勢 簡潔干凈我們不必寫 .then，創(chuàng)建一個匿名函數(shù)來處理響應(yīng)，或者給不需要用的變量一個名稱 data。我們還避免了代碼嵌套。這些小小的優(yōu)勢會快速累積起來，在后面的代碼中會變得更明顯。
錯誤處理async/await 會最終讓我們用同樣的結(jié)構(gòu)（ try/catch）處理同步和異步代碼變成可能。在下面使用 promise 的示例中，如果 JSON.parse 失敗的話，try/catch 就不會處理，因為它是發(fā)生在一個 prmoise 中。我們需要在 promise 上調(diào)用 .catch，并且重復(fù)錯誤處理代碼。這種錯誤處理代碼會比可用于生產(chǎn)的代碼中的 console.log 更復(fù)雜。
const makeRequest = () => {
try {
getJSON().then(
result => {
// 這里發(fā)生錯誤
const data = JSON.parse(result)
console.log(data)
}).catch((error)=>{
console.log(error)
})
} catch (err) { // 這里不會捕捉到err
console.log(err)
}
}
現(xiàn)在看看用 async/await 實現(xiàn)的代碼?，F(xiàn)在 catch 塊會處理解析錯誤。
const makeRequest = async () => {
try { // 這個解析會失敗
const data = JSON.parse(await getJSON())
console.log(data)
}
catch (err) {
console.log(err)
}
}
條件語句
假設(shè)想做像下面的代碼一樣的事情，獲取一些數(shù)據(jù)，并決定是否應(yīng)該返回該數(shù)據(jù)，或者根據(jù)數(shù)據(jù)中的某些值獲取更多的細(xì)節(jié)。
const makeRequest = () => {
return getJSON()
.then(data => {
if (data.needsAnotherRequest) {
return makeAnotherRequest(data)
.then(moreData => {
console.log(moreData)
return moreData
})
} else {
console.log(data)
return data
}
})
}
這些代碼看著就讓人頭疼。它只需將最終結(jié)果傳播到主 promise，卻很容易讓我們迷失在嵌套（ 6 層）、大括號和返回語句中。
把這個示例用async / await 重寫，就變得更易于閱讀。
const makeRequest = async () => {
const data = await getJSON()
if (data.needsAnotherRequest) {
const moreData = await makeAnotherRequest(data);
console.log(moreData)
return moreData
} else {
console.log(data)
return data
}
}
中間值
你可能發(fā)現(xiàn)自己處于一種狀態(tài)，即調(diào)用你 promise1，然后用它的返回值來調(diào)用promise2，然后使用這兩個 promise 的結(jié)果來調(diào)用 promise3。你的代碼很可能看起來像這樣：
const makeRequest = () => {
return promise1()
.then(value1 => {
// do something
return promise2(value1)
.then(value2 => {
// do something
return promise3(value1, value2)
})
})
}
不過用 async/await 的話，同樣的邏輯就變得超級簡單直觀了。
const makeRequest = async () => {
const value1 = await promise1()
const value2 = await promise2(value1)
return promise3(value1, value2)
}
調(diào)試
最后但是同樣重要的是，在使用 async/await 時，一個殺手級優(yōu)勢是調(diào)試更容易。調(diào)試 promise 一直是如此痛苦，有兩個原因：
沒法在返回表達(dá)式（無函數(shù)體）的箭頭函數(shù)中設(shè)置斷點。
const makeRequest = () =>{
return callAllPromise()
.then(()=> callAllPromise())
.then(()=> callAllPromise())
.then(()=> callAllPromise())
.then(()=> callAllPromise())
}
如果在.then塊中設(shè)置斷點，并使用像單步調(diào)試這類調(diào)試快捷方式，調(diào)試器不會移動到后面的 .then ，因為它只單步調(diào)試同步代碼。
有了 async/await，我們就不再需要那么多箭頭函數(shù)，您可以像正常的同步調(diào)用一樣單步調(diào)試 await 調(diào)用。
const makeRequest = async ()=>{
await callAllPromise()
await callAllPromise()
await callAllPromise()
await callAllPromise()
}
引用資料
JavaScript 的 Async/Await 完勝 Promise 的六個理由
async 函數(shù)的含義和用法
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/87017.html
摘要：是一種與協(xié)作的特殊的語法。換句話說，僅可以運行在中。所以將會進(jìn)行等待，而之后拋出一個錯誤。同時這也將更為便利。允許在函數(shù)內(nèi)部使用。關(guān)鍵詞確保運行時將會等待處理完畢，并且如果觸發(fā)了一個運行錯誤，運行中斷，并在改處類似觸發(fā)。 async/await是一種與promise協(xié)作的特殊的語法。它使得異步工作更加容易理解和使用。 Async函數(shù) 我們從async關(guān)鍵詞開始，它可以被放置在任何函數(shù)的...
摘要：一方面，這里替代的是異步代碼的編寫方式，并非完全拋棄大家心愛的，地球人都知道是基于的，不用太傷心另一方面，是基于回調(diào)函數(shù)實現(xiàn)的，那也沒有替代回調(diào)函數(shù)咯重構(gòu)代碼之后，我仍然用到了庫。 摘要： 夸張點說，技術(shù)的發(fā)展與歷史一樣，順之者昌，逆之者亡。JS開發(fā)者們，趕緊擁抱Async/Await吧！ GitHub倉庫: Fundebug/promise-asyncawait 早在半年多之前，...
摘要：前言異步編程模式在前端開發(fā)過程中，顯得越來越重要。隨著新標(biāo)準(zhǔn)的到來，處理異步數(shù)據(jù)流又有了新的方案。接下來我們介紹這兩種處理異步編程的方案。仍在繼續(xù)執(zhí)行，但執(zhí)行結(jié)果將被丟棄。使得異步代碼看起來像同步代碼，再也沒有回調(diào)函數(shù)。 前言 異步編程模式在前端開發(fā)過程中，顯得越來越重要。從最開始的XHR到封裝后的Ajax都在試圖解決異步編程過程中的問題。隨著ES6新標(biāo)準(zhǔn)的到來，處理異步數(shù)據(jù)流又有了新...
摘要：前言異步編程模式在前端開發(fā)過程中，顯得越來越重要。隨著新標(biāo)準(zhǔn)的到來，處理異步數(shù)據(jù)流又有了新的方案。接下來我們介紹這兩種處理異步編程的方案。仍在繼續(xù)執(zhí)行，但執(zhí)行結(jié)果將被丟棄。使得異步代碼看起來像同步代碼，再也沒有回調(diào)函數(shù)。 前言 異步編程模式在前端開發(fā)過程中，顯得越來越重要。從最開始的XHR到封裝后的Ajax都在試圖解決異步編程過程中的問題。隨著ES6新標(biāo)準(zhǔn)的到來，處理異步數(shù)據(jù)流又有了新...
摘要：前言異步編程模式在前端開發(fā)過程中，顯得越來越重要。隨著新標(biāo)準(zhǔn)的到來，處理異步數(shù)據(jù)流又有了新的方案。接下來我們介紹這兩種處理異步編程的方案。仍在繼續(xù)執(zhí)行，但執(zhí)行結(jié)果將被丟棄。使得異步代碼看起來像同步代碼，再也沒有回調(diào)函數(shù)。 前言 異步編程模式在前端開發(fā)過程中，顯得越來越重要。從最開始的XHR到封裝后的Ajax都在試圖解決異步編程過程中的問題。隨著ES6新標(biāo)準(zhǔn)的到來，處理異步數(shù)據(jù)流又有了新...
閱讀 2550·2023-04-25 19:47
閱讀 3391·2019-08-29 17:18
閱讀 859·2019-08-29 15:26
閱讀 3365·2019-08-29 14:17
閱讀 1136·2019-08-26 13:49
閱讀 3346·2019-08-26 13:22
閱讀 3030·2019-08-26 10:44
閱讀 2700·2019-08-23 16:51
