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)文章
詳解SpringBoot?統(tǒng)一后端返回格式的方法
今天我們來(lái)聊一聊在基于SpringBoot前后端分離開(kāi)發(fā)模式下,如何友好的返回統(tǒng)一的標(biāo)準(zhǔn)格式以及如何優(yōu)雅的處理全局異常,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2022-05-05
Java字符串格式化Formatter和printf()的使用詳解
這篇文章主要介紹了Java字符串格式化Formatter和printf()的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-05-05
通過(guò)圖例了解IDEA引入JQuery實(shí)現(xiàn)步驟
這篇文章主要介紹了IDEA引入JQuery實(shí)現(xiàn)步驟圖解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
Java實(shí)現(xiàn)為PDF批量添加圖片水印實(shí)用指南
在數(shù)字化辦公日益普及的今天,PDF文檔作為信息傳輸和共享的重要載體,其安全性和版權(quán)保護(hù)變得尤為關(guān)鍵,本文將介紹如何使用Spire.PDF?for?Java輕松地在Java應(yīng)用程序中為PDF文檔添加圖片水印,有需要的可以參考下2025-11-11
Java實(shí)現(xiàn)輸出回環(huán)數(shù)(螺旋矩陣)的方法示例
這篇文章主要介紹了Java實(shí)現(xiàn)輸出回環(huán)數(shù)(螺旋矩陣)的方法,涉及java針對(duì)數(shù)組的遍歷、判斷、輸出等相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
Hazelcast是一款優(yōu)秀的開(kāi)源內(nèi)存數(shù)據(jù)網(wǎng)格平臺(tái),它能夠提供分布式數(shù)據(jù)存儲(chǔ)和緩存解決方案,通過(guò)與SpringBoot3的整合,開(kāi)發(fā)者可以輕松實(shí)現(xiàn)分布式緩存、數(shù)據(jù)共享和會(huì)話(huà)管理等功能,Hazelcast的內(nèi)存數(shù)據(jù)網(wǎng)格特性支持高性能的緩存系統(tǒng),能夠減少數(shù)據(jù)庫(kù)訪(fǎng)問(wèn)次數(shù),提升應(yīng)用性能2024-10-10

