Axios統(tǒng)一錯(cuò)誤處理與后置

ormsf 發(fā)布于2019-08-23 12:08 / 2514人閱讀

摘要：本著懶的原則，需要對(duì)接口錯(cuò)誤進(jìn)行統(tǒng)一處理。方案業(yè)務(wù)代碼直接使用，頂?shù)艚y(tǒng)一的錯(cuò)誤信息。稍作抽象與封裝就可以形成一個(gè)業(yè)務(wù)無(wú)關(guān)框架無(wú)關(guān)的統(tǒng)一錯(cuò)誤處理方案。

問(wèn)題

在進(jìn)行業(yè)務(wù)開(kāi)發(fā)的時(shí)候，前后端會(huì)對(duì)接口的數(shù)據(jù)結(jié)構(gòu)進(jìn)行約定，若接口有異常，需要將異常信息展示給用戶知曉。這個(gè)流程里，數(shù)據(jù)結(jié)構(gòu)是確定的（事先約定），數(shù)據(jù)的處理邏輯是相同的（展示給用戶），如果在業(yè)務(wù)代碼代碼中重復(fù)的catch(e) { 展示給用戶 }，就非常的不優(yōu)雅。本著Don"t repeat myself（懶）的原則，需要對(duì)接口錯(cuò)誤進(jìn)行統(tǒng)一處理。

接下來(lái)，我會(huì)結(jié)合具體的業(yè)務(wù)場(chǎng)景，講一講我的解決方案。

業(yè)務(wù)場(chǎng)景

后端通過(guò)http狀態(tài)標(biāo)識(shí)接口狀態(tài)，錯(cuò)誤信息在response的data里

前端的處理邏輯是使用element-ui的Message展示錯(cuò)誤信息

使用axios

axios可以通過(guò)攔截器，在業(yè)務(wù)代碼處理響應(yīng)之前對(duì)響應(yīng)進(jìn)行處理,類似于下面的流程

someAPI()
    .then(interceptorsFn)
    .then(業(yè)務(wù)邏輯)

所以，我們可以在interceptors對(duì)響應(yīng)進(jìn)行統(tǒng)一處理:

request.interceptors.response.use(
    (response) => response.data,
    (error) => {
        // 針對(duì)特定的http狀態(tài)碼進(jìn)行處理
        if (error.response && error.response.status === 401) {
            router.push({ name: "ssoLogin" })
            return new Promise(() => {}) // pending的promise，中止promise鏈
        }

        .....

        const msg = error.response.data
        Message.error(msg)

        return Promise.reject(error.response)
    }
)

如何進(jìn)行特定的錯(cuò)誤處理

不難看出，上面的方案有一個(gè)問(wèn)題，如果有某個(gè)接口需要有業(yè)務(wù)代碼來(lái)展示定制的錯(cuò)誤信息（這個(gè)情況十分常見(jiàn)），如何處理？

naive方案1：業(yè)務(wù)代碼使用其它的方式展示信息：例如Notify。

這個(gè)方案被我司產(chǎn)品痛罵，因?yàn)槠茐牧私y(tǒng)一的錯(cuò)誤信息展示，并且此時(shí)統(tǒng)一的錯(cuò)誤信息是一個(gè)垃圾信息，沒(méi)必要展示。

naive方案2：業(yè)務(wù)代碼直接使用Message，頂?shù)艚y(tǒng)一的錯(cuò)誤信息。

這個(gè)方案還是被產(chǎn)品大哥（dog）懟了，因?yàn)槊黠@的用戶體驗(yàn)不好，錯(cuò)誤信息出現(xiàn)了閃爍。

帥氣的解決方案3：業(yè)務(wù)代碼決定是否隱藏統(tǒng)一錯(cuò)誤提示

那么問(wèn)題來(lái)了，由于是先走攔截器，再走業(yè)務(wù)代碼，如何由業(yè)務(wù)代碼決定是否隱藏統(tǒng)一錯(cuò)誤提示呢？

我的辦法是，將統(tǒng)一的錯(cuò)誤提示使用setTimeout放到下一個(gè)loop執(zhí)行，并通過(guò)一個(gè)變量標(biāo)識(shí)是否要執(zhí)行統(tǒng)一錯(cuò)誤提示。

request.interceptors.response.use(
    (response) => response.data,
    (error) => {
        ...
        setTimeout(() => {
            if (tag) {
                Message.error(msg)
            }
        })
    }
)

接下來(lái)，需要考慮的是，如何在業(yè)務(wù)代碼里改變標(biāo)識(shí)變量

naive方案1：一個(gè)全局的變量或者方法

這個(gè)方案非常的不靠譜，若在其它代碼里改變了這個(gè)全局變量，就嗝屁，并且N個(gè)接口公用一個(gè)標(biāo)識(shí)變量，只能是同一個(gè)狀態(tài)。

帥氣方案2：

request.interceptors.response.use(
    (response) => response.data,
    (error) => {
        ...
        let isShowNormalError = true
        const hideNormalError = () => isShowNormalError = false

        setTimeout(() => {
            if (isShowNormalError) {
                Message.error(msg)
            }
        })

        return Promise.reject({ ...error.response, hideNormalMessage }) // 在error.response上添加方法
    }
)

業(yè)務(wù)代碼:

someAPIFN()
    .then()
    .catch({ data, hideNormalMessage }) {
        // 業(yè)務(wù)代碼
        hideNormalMessage()
    }

兼容舊代碼

目前的方案需要對(duì)現(xiàn)存代碼做修改，對(duì)進(jìn)行特殊處理的接口添加hideNormalMessage()。如果不想全局搜索添加代碼（懶），可以根據(jù)業(yè)務(wù)來(lái)進(jìn)行兼容。下面講一下我結(jié)合業(yè)務(wù)代碼進(jìn)行的兼容處理（非常不推薦）。

request.interceptors.response.use(
    (response) => response.data,
    (error) => {
        // warning，和業(yè)務(wù)代碼深度耦合，不推薦
        const hasMessageBeforeCatch = !!document.querySelector(".el-message")
        
        ...

        let isShowNormalError = true
        const hideNormalError = () => isShowNormalError = false

        setTimeout(() => {
            const hasMessageAfterCatch = document.querySelector(".el-message")

            // 調(diào)用catch前沒(méi)有message，調(diào)用catch后有message，表示message是在catch過(guò)程中產(chǎn)生
            const madeMessageWhenCatch = !hasMessageBeforeCatch && hasMessageAfterCatch

            if (isShowNormalError && !madeMessageWhenCatch) {
                Message.error(msg)
            }
        })

        return Promise.reject({ ...error.response, hideNormalMessage }) // 在error.response上添加方法
    }
)

邏輯：如果在catch中使用了Message，就不展示統(tǒng)一錯(cuò)誤處理

總結(jié)

這個(gè)解決方案的關(guān)鍵在于使用setTimeout使得統(tǒng)一錯(cuò)誤處理“落后”于業(yè)務(wù)代碼，并在Promise.reject的參數(shù)中添加控制函數(shù)使得業(yè)務(wù)代碼可以決定是否展示統(tǒng)一錯(cuò)誤處理。稍作抽象與封裝就可以形成一個(gè)業(yè)務(wù)無(wú)關(guān)、框架無(wú)關(guān)的統(tǒng)一錯(cuò)誤處理方案。

云服務(wù)器 GPU云服務(wù)器 php錯(cuò)誤處理 ASP錯(cuò)誤處理 asp 錯(cuò)誤處理 PHP全局錯(cuò)誤處理

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/97977.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

ormsf

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

阿里云服務(wù)器中Docker安裝與鏡像使用【MySQL、redis快速訪問(wèn)】

閱讀 1291·2021-11-25 09:43
akkocloud：美西圣何塞CN2 GIA VPS，299元/年，1核/512M內(nèi)存/10gSSD

閱讀 1654·2021-10-25 09:47
javascript新手實(shí)例2-CSS操作

閱讀 2525·2019-08-30 13:46
簡(jiǎn)單說(shuō) CSS中的 object-fit 與 object-position

閱讀 811·2019-08-29 13:45
angular4中引入echarts

閱讀 1337·2019-08-26 13:29
Flex 布局教程

閱讀 3059·2019-08-23 15:30
微信小程序

閱讀 1169·2019-08-23 14:17
柯里化

閱讀 1373·2019-08-23 13:43

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

Axios統(tǒng)一錯(cuò)誤處理與后置

相關(guān)文章

Spring Boot + Vue 前后端分離開(kāi)發(fā)，前端網(wǎng)絡(luò)請(qǐng)求封裝與配置

axios 的二次封裝（攔截重復(fù)請(qǐng)求、異常統(tǒng)一處理）

axios請(qǐng)求、和返回?cái)?shù)據(jù)攔截，統(tǒng)一請(qǐng)求報(bào)錯(cuò)提示_012

axios入門實(shí)踐

19/3/29學(xué)習(xí)筆記

發(fā)表評(píng)論

0條評(píng)論

ormsf

男|高級(jí)講師

TA的文章

阿里云服務(wù)器中Docker安裝與鏡像使用【MySQL、redis快速訪問(wèn)】

akkocloud：美西圣何塞CN2 GIA VPS，299元/年，1核/512M內(nèi)存/10gSSD

javascript新手實(shí)例2-CSS操作

簡(jiǎn)單說(shuō) CSS中的 object-fit 與 object-position

angular4中引入echarts

Flex 布局教程

微信小程序

柯里化

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

Axios統(tǒng)一錯(cuò)誤處理與后置

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！