擺脫 try-catch！前端項(xiàng)目中優(yōu)雅處理 async/await 異常
? ? ? ?在我們的項(xiàng)目中，經(jīng)常會(huì)遇到使用 try-catch 來(lái)處理 async/await 異常的情況。但是，這種寫法讓代碼顯得有些混亂，邏輯斷層，不易理解。而且，大量的重復(fù)代碼也會(huì)導(dǎo)致代碼冗余，讓代碼變得臃腫。
? ? ? ?在本文中，我們將探討 async/await 異常的處理時(shí)機(jī)和原因，并介紹一種優(yōu)雅的處理方法，讓我們擺脫冗余的 try-catch 代碼。
? ? ? 什么時(shí)候會(huì)發(fā)生異步請(qǐng)求異常？在了解如何處理異常之前，我們先來(lái)了解一下異步請(qǐng)求異常發(fā)生的時(shí)機(jī)。異步請(qǐng)求可能會(huì)因以下原因?qū)е庐惓＃?/p>
網(wǎng)絡(luò)問(wèn)題：網(wǎng)絡(luò)斷開連接或請(qǐng)求超時(shí)。
其他異常情況。
? ? ? 何時(shí)需要處理請(qǐng)求異常？一旦出現(xiàn)上述情況，異步請(qǐng)求就會(huì)產(chǎn)生異常。由于 JavaScript 是單線程語(yǔ)言，一旦代碼報(bào)錯(cuò)，后續(xù)的代碼就無(wú)法繼續(xù)執(zhí)行。因此，在這種情況下，我們需要添加 try-catch 來(lái)捕獲異步請(qǐng)求的異常，以確保代碼能夠繼續(xù)執(zhí)行。
? ? ? 但是，是否需要為所有的異步請(qǐng)求都添加 try-catch 呢？經(jīng)過(guò)研究發(fā)現(xiàn)，在我們的項(xiàng)目中，只有以下幾種情況需要添加 try-catch 處理：
多個(gè)異步請(qǐng)求串行執(zhí)行，后一個(gè)請(qǐng)求需要前一個(gè)請(qǐng)求的結(jié)果作為參數(shù)。
需要處理異步請(qǐng)求的 loading 狀態(tài)，確保請(qǐng)求完成后及時(shí)更新狀態(tài)。
? ? ? 那么，如何優(yōu)雅地處理異步請(qǐng)求中的 try-catch 呢？解決方案 使用 Promise 進(jìn)行處理 首先，需要明確一點(diǎn)：await 后面通常是一個(gè) Promise 對(duì)象。因此，我們可以在 Promise 對(duì)象上使用 .catch 方法來(lái)捕獲異常。對(duì)于僅需處理 loading 狀態(tài)的情況，可以直接在 .catch 中進(jìn)行處理，并使用 if 條件判斷提前退出，無(wú)需寫冗余的 try-catch 代碼。
例如，處理 loading 狀態(tài)的異步請(qǐng)求可以改為：
使用 await-to-js 庫(kù)進(jìn)行處理 對(duì)于復(fù)雜的多個(gè)異步操作，我們可以借助 await-to-js 庫(kù)來(lái)優(yōu)雅地處理異常。這個(gè)庫(kù)的主要特點(diǎn)是：無(wú)需使用 try-catch 即可輕松處理錯(cuò)誤。讓我們一起來(lái)看看它的用法。
首先，安裝 await-to-js 庫(kù)：
然后，引入 await-to-js 庫(kù)，并使用 to 函數(shù)來(lái)改造異步請(qǐng)求的異常處理：
通過(guò) to 函數(shù)的改造，如果返回的第一個(gè)參數(shù)不為空，則說(shuō)明該請(qǐng)求出錯(cuò)，我們可以提前返回，否則表示異步請(qǐng)求成功。
總結(jié)：
本文通過(guò)研究 async/await 異常處理，發(fā)現(xiàn)了兩種常見的異常捕獲情況，并提出了兩種簡(jiǎn)潔的解決方案。通過(guò)這些方法，我們可以擺脫冗余的 try-catch 代碼，讓代碼更加清晰易讀。
雖然在項(xiàng)目團(tuán)隊(duì)中可能會(huì)遇到有人不采用這種解決方案的情況，但你不必太過(guò)在意。通過(guò)自己的研究和學(xué)習(xí)，掌握新的知識(shí)已經(jīng)足夠了，無(wú)需過(guò)多關(guān)注他人的選擇。
希望本文對(duì)你有所幫助！如果你發(fā)現(xiàn)任何錯(cuò)誤或有更好的解決方案和建議，請(qǐng)隨時(shí)聯(lián)系我。感謝閱讀本文，如果對(duì)你有幫助，請(qǐng)點(diǎn)贊和收藏??。讓我們一起在優(yōu)雅處理 async/await 異常的道路上不斷前行，共同成長(zhǎng)！
轉(zhuǎn)載?/?合作?請(qǐng)聯(lián)系
Leo_class
