AntDesign封裝全局異常處理全局攔截器
場景
本文前端用的是阿里的Ant-Design框架,其他框架也有全局攔截器,思路是相同,具體實現(xiàn)自行百度下吧
因為每次都需要調(diào)接口,都需要單獨處理異常情況(code !=0),因此前端需要對后端返回的通用響應進行統(tǒng)一處理,比如
業(yè)務(wù)異常提示
從 response取出code,根據(jù)code中集中處理錯誤,比如提示用戶未登錄、參數(shù)為空等
- 直接返回業(yè)務(wù)內(nèi)容
? 從 response取出data,進行返回,而不是每次返回全部json內(nèi)容
1 定義全部異常處理類
新建新的ts類,比如globalRequest.ts
該類處理兩個情況
所有請求攔截器(
request.interceptors.request)在請求后端API前,統(tǒng)一做處理,比如 改變url參數(shù),附帶統(tǒng)一參數(shù)等
所有響應攔截器(
request.interceptors.response)接收來自后端返回結(jié)果后,統(tǒng)一處理地方,比如異常處理提示
更詳細的 api 文檔: https://github.com/umijs/umi-request
/**
* request 網(wǎng)絡(luò)請求工具
* 更詳細的 api 文檔: https://github.com/umijs/umi-request
*/
import {extend} from 'umi-request'; // 需集成類
import {message} from "antd"; // 提示框
import {history} from "@@/core/history";
import {stringify} from "querystring";
/**
* 配置request請求時的默認參數(shù)
*/
const request = extend({
credentials: 'include', // 默認請求是否帶上cookie
// requestType: 'form',
});
/**
* 所有請求攔截器
* 1. 在請求后端API前,統(tǒng)一做處理,比如 改變url參數(shù),附帶統(tǒng)一參數(shù)等
*/
request.interceptors.request.use((url, options) => {
// 打印每次請求的API
console.log(`do request url = ${url}`);
return {
url,
options: {
...options,
// headers: {},
},
};
});
/**
* 所有響應攔截器
* 1. 接收來自后端返回結(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) { // 未登錄錯誤碼
message.error('請先登錄');
// 跳轉(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引用
將原來的request引用,替換成自己的request,在api.ts類中修改
原來
import {request} from 'umi';替換成
import request from '@/plugins/globalRequest';

3 代碼優(yōu)化
優(yōu)點:
- 省去每個業(yè)務(wù)異常處理
- 直接返回 data 內(nèi)容

總結(jié)
加了全局異常處理類后,實際上是通過request和response攔截器實現(xiàn)的,少處理很多冗余代碼,代碼更加簡潔和優(yōu)雅了?。?!
以上就是AntDesign封裝全局異常處理全局攔截器的詳細內(nèi)容,更多關(guān)于AntDesign全局攔截器的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Mybatis調(diào)用SQL?Server存儲過程的實現(xiàn)示例
在軟件開發(fā)過程中,經(jīng)常會使用到存儲過程,本文就來介紹一下Mybatis調(diào)用SQL?Server存儲過程的實現(xiàn)示例,具有一定的參考價值,感興趣的可以了解一下2024-01-01
SpringMVC之DispatcherServlet配置文件應該放在哪里呢
這篇文章主要介紹了SpringMVC之DispatcherServlet配置文件應該放在哪里的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
webuploader+springmvc實現(xiàn)圖片上傳功能
這篇文章主要為大家詳細介紹了webuploader+springmvc實現(xiàn)圖片上傳功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-09-09
springboot動態(tài)注入配置與docker設(shè)置環(huán)境變量的方法
這篇文章主要介紹了springboot動態(tài)注入配置與docker設(shè)置環(huán)境變量的方法,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-04-04
java數(shù)據(jù)結(jié)構(gòu)與算法之插入排序詳解
這篇文章主要介紹了java數(shù)據(jù)結(jié)構(gòu)與算法之插入排序,結(jié)合實例形式分析了java插入排序的概念、分類、原理、實現(xiàn)方法與相關(guān)注意事項,需要的朋友可以參考下2017-05-05
SpringBoot 如何使用RestTemplate來調(diào)用接口
這篇文章主要介紹了SpringBoot 如何使用RestTemplate來調(diào)用接口方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2021-10-10
Java如何使用Optional與Stream取代if判空邏輯(JDK8以上)
這篇文章主要給大家介紹了關(guān)于Java如何使用Optional與Stream取代if判空邏輯(JDK8以上)的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家學習或者使用Java具有一定的參考學習價值,需要的朋友們下面來一起學習學習吧2019-09-09

