AntDesign封裝全局異常處理全局?jǐn)r截器
場(chǎng)景
本文前端用的是阿里的Ant-Design框架,其他框架也有全局?jǐn)r截器,思路是相同,具體實(shí)現(xiàn)自行百度下吧
因?yàn)槊看味夹枰{(diào)接口,都需要單獨(dú)處理異常情況(code !=0),因此前端需要對(duì)后端返回的通用響應(yīng)進(jìn)行統(tǒng)一處理,比如
業(yè)務(wù)異常提示
從 response取出code,根據(jù)code中集中處理錯(cuò)誤,比如提示用戶(hù)未登錄、參數(shù)為空等
- 直接返回業(yè)務(wù)內(nèi)容
? 從 response取出data,進(jìn)行返回,而不是每次返回全部json內(nèi)容
1 定義全部異常處理類(lèi)
新建新的ts類(lèi),比如globalRequest.ts
該類(lèi)處理兩個(gè)情況
所有請(qǐng)求攔截器(
request.interceptors.request
)在請(qǐng)求后端API前,統(tǒng)一做處理,比如 改變url參數(shù),附帶統(tǒng)一參數(shù)等
所有響應(yīng)攔截器(
request.interceptors.response
)接收來(lái)自后端返回結(jié)果后,統(tǒng)一處理地方,比如異常處理提示
更詳細(xì)的 api 文檔: https://github.com/umijs/umi-request
/** * request 網(wǎng)絡(luò)請(qǐng)求工具 * 更詳細(xì)的 api 文檔: https://github.com/umijs/umi-request */ import {extend} from 'umi-request'; // 需集成類(lèi) import {message} from "antd"; // 提示框 import {history} from "@@/core/history"; import {stringify} from "querystring"; /** * 配置request請(qǐng)求時(shí)的默認(rèn)參數(shù) */ const request = extend({ credentials: 'include', // 默認(rèn)請(qǐng)求是否帶上cookie // requestType: 'form', }); /** * 所有請(qǐng)求攔截器 * 1. 在請(qǐng)求后端API前,統(tǒng)一做處理,比如 改變url參數(shù),附帶統(tǒng)一參數(shù)等 */ request.interceptors.request.use((url, options) => { // 打印每次請(qǐng)求的API console.log(`do request url = ${url}`); return { url, options: { ...options, // headers: {}, }, }; }); /** * 所有響應(yīng)攔截器 * 1. 接收來(lái)自后端返回結(jié)果后,統(tǒng)一處理地方,比如異常處理提示 */ request.interceptors.response.use(async response => { const res = await response.clone().json(); if (res.code === 0) { // 成功,則取出 data內(nèi)容 直接返回 return res.data; } if (res.code === 40100) { // 未登錄錯(cuò)誤碼 message.error('請(qǐng)先登錄'); // 跳轉(zhuǎn)登錄地址 history.replace({ pathname: '/user/login', search: stringify({ redirect: location.pathname, }), }); } else { message.error(res.description) } return res.data; } ); export default request;
2 替換request引用
將原來(lái)的request
引用,替換成自己的request
,在api.ts
類(lèi)中修改
原來(lái)
import {request} from 'umi';
替換成
import request from '@/plugins/globalRequest';
3 代碼優(yōu)化
優(yōu)點(diǎn):
- 省去每個(gè)業(yè)務(wù)異常處理
- 直接返回 data 內(nèi)容
總結(jié)
加了全局異常處理類(lèi)后,實(shí)際上是通過(guò)request
和response
攔截器實(shí)現(xiàn)的,少處理很多冗余代碼,代碼更加簡(jiǎn)潔和優(yōu)雅了!?。?/p>
以上就是AntDesign封裝全局異常處理全局?jǐn)r截器的詳細(xì)內(nèi)容,更多關(guān)于A(yíng)ntDesign全局?jǐn)r截器的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Mybatis調(diào)用SQL?Server存儲(chǔ)過(guò)程的實(shí)現(xiàn)示例
在軟件開(kāi)發(fā)過(guò)程中,經(jīng)常會(huì)使用到存儲(chǔ)過(guò)程,本文就來(lái)介紹一下Mybatis調(diào)用SQL?Server存儲(chǔ)過(guò)程的實(shí)現(xiàn)示例,具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01SpringMVC之DispatcherServlet配置文件應(yīng)該放在哪里呢
這篇文章主要介紹了SpringMVC之DispatcherServlet配置文件應(yīng)該放在哪里的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11webuploader+springmvc實(shí)現(xiàn)圖片上傳功能
這篇文章主要為大家詳細(xì)介紹了webuploader+springmvc實(shí)現(xiàn)圖片上傳功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-09-09springboot動(dòng)態(tài)注入配置與docker設(shè)置環(huán)境變量的方法
這篇文章主要介紹了springboot動(dòng)態(tài)注入配置與docker設(shè)置環(huán)境變量的方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04java數(shù)據(jù)結(jié)構(gòu)與算法之插入排序詳解
這篇文章主要介紹了java數(shù)據(jù)結(jié)構(gòu)與算法之插入排序,結(jié)合實(shí)例形式分析了java插入排序的概念、分類(lèi)、原理、實(shí)現(xiàn)方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-05-05SpringBoot 如何使用RestTemplate來(lái)調(diào)用接口
這篇文章主要介紹了SpringBoot 如何使用RestTemplate來(lái)調(diào)用接口方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2021-10-10Java如何使用Optional與Stream取代if判空邏輯(JDK8以上)
這篇文章主要給大家介紹了關(guān)于Java如何使用Optional與Stream取代if判空邏輯(JDK8以上)的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Java具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09