使用async?await處理錯(cuò)誤方法示例
Promise封裝請(qǐng)求
大家平時(shí)如果使用Promise
封裝請(qǐng)求,那么當(dāng)你使用這個(gè)請(qǐng)求函數(shù)的時(shí)候是這樣的:
// 封裝請(qǐng)求函數(shù) const request = (url, params) => { return new Promise((resolve, reject) => { // ...do something }) } // 使用時(shí) const handleLogin = () => { request( '/basic/login', { usename: 'sunshine', password: '123456' } ).then(res => { // success do something }).catch(err => { // fail do something }) }
可以看到,當(dāng)你的請(qǐng)求成功時(shí),會(huì)調(diào)用then
方法,當(dāng)你的請(qǐng)求失敗時(shí)會(huì)調(diào)用catch
方法。
async/await
Promise
的出現(xiàn)解決了很多問題,但是如果請(qǐng)求多了且有順序要求的話,難免又會(huì)出現(xiàn)嵌套的問題,可讀性較差,比如:
const handleLogin = () => { request( '/basic/login', { usename: 'sunshine', password: '123456' } ).then(res => { // 登錄成功后獲取用戶信息 request( '/basic/getuserinfo', res.id ).then(info => { this.userInfo = info }).catch() }).catch(err => { // fail do something })
所以這個(gè)時(shí)候async/await
出現(xiàn)了,他的作用是:用同步的方式執(zhí)行異步操作,上面的代碼使用async/await
的話可以改寫成:
const handleLogin = async () => { const res = await request('/basic/login', { usename: 'sunshine', password: '123456' }) const info = await request('/basic/getuserinfo', { id: res.id }) this.userInfo = info }
這樣的話代碼的可讀性比較高,而不會(huì)出現(xiàn)剛剛的嵌套問題,但是現(xiàn)在又有一個(gè)問題了,Promise有catch
這個(gè)錯(cuò)誤回調(diào)來保證請(qǐng)求錯(cuò)誤后該做什么操作,但是async/await
該如何捕獲錯(cuò)誤呢?
await-to-js
其實(shí)已經(jīng)有一個(gè)庫(kù)await-to-js
已經(jīng)幫我們做了這件事,我們可以看看它是怎么做的,它的源碼只有短短十幾行,我們應(yīng)該讀讀它的源碼,學(xué)學(xué)它的思想
源碼很簡(jiǎn)單
/** * @param { Promise } 傳進(jìn)去的請(qǐng)求函數(shù) * @param { Object= } errorExt - 拓展錯(cuò)誤對(duì)象 * @return { Promise } 返回一個(gè)Promise */ export function to( promise, errorExt ) { return promise .then(data => [null, data]) .catch(err => { if (errorExt) { const parsedError = Object.assign({}, err, errorExt) return [parsedError, undefined] } return [err, undefined] }) } export default to
源碼總結(jié):to
函數(shù)返回一個(gè)Promise且值是一個(gè)數(shù)組,數(shù)組之中有兩個(gè)元素,如果索引為0
的元素不為空值,說明該請(qǐng)求報(bào)錯(cuò),如果索引0
的元素為空值說明該請(qǐng)求沒有報(bào)錯(cuò),也就是成功。
使用很簡(jiǎn)單
我們?cè)撛趺慈ナ褂眠@個(gè)to
函數(shù)呢?其實(shí)很簡(jiǎn)單,還是剛剛的例子
const handleLogin = async () => { const [resErr, res] = await to(request('/basic/login', { usename: 'sunshine', password: '123456' })) if (resErr) { // fail do somthing return } const [userErr, info] = await to(request('/basic/getuserinfo', { id: res.id })) if (userErr) { // fail do somthing return } this.userInfo = info }
所以說,偶爾看看一些庫(kù)的源碼,還是能學(xué)到東西的?。?!
以上就是使用async await處理錯(cuò)誤方法示例的詳細(xì)內(nèi)容,更多關(guān)于async await處理錯(cuò)誤的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
微信小程序 動(dòng)態(tài)傳參實(shí)例詳解
這篇文章主要介紹了微信小程序 動(dòng)態(tài)傳參實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-04-04微信小程序 picker-view 組件詳解及簡(jiǎn)單實(shí)例
這篇文章主要介紹了微信小程序 picker-view 組件詳解及簡(jiǎn)單實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-01-01微信小程序 支付后臺(tái)java實(shí)現(xiàn)實(shí)例
這篇文章主要介紹了微信小程序 支付后臺(tái)java實(shí)現(xiàn)實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-05-05微信小程序 開發(fā)之快遞查詢功能的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序 開發(fā)之快遞查詢功能的實(shí)現(xiàn)的相關(guān)資料,這里實(shí)現(xiàn)微信小程序查詢快遞的功能,需要的朋友可以參考下2017-01-01微信小程序 頁(yè)面跳轉(zhuǎn)如何實(shí)現(xiàn)傳值
這篇文章主要介紹了微信小程序 頁(yè)面跳轉(zhuǎn)如何實(shí)現(xiàn)傳值的相關(guān)資料,需要的朋友可以參考下2017-04-04前端框架ECharts?dataset對(duì)數(shù)據(jù)可視化的高級(jí)管理
這篇文章主要為大家介紹了前端框架ECharts?dataset對(duì)數(shù)據(jù)可視化的高級(jí)管理,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12