場景

本文前端用的是阿里的Ant-Design框架，其他框架也有全局?jǐn)r截器，思路是相同，具體實(shí)現(xiàn)自行百度下吧

因?yàn)槊看味夹枰{(diào)接口，都需要單獨(dú)處理異常情況（code !=0），因此前端需要對后端返回的通用響應(yīng)進(jìn)行統(tǒng)一處理，比如

• 業(yè)務(wù)異常提示

  從 response取出code,根據(jù)code中集中處理錯(cuò)誤，比如提示用戶未登錄、參數(shù)為空等

• 直接返回業(yè)務(wù)內(nèi)容

? 從 response取出data，進(jìn)行返回，而不是每次返回全部json內(nèi)容

1 定義全部異常處理類

新建新的ts類，比如globalRequest.ts

該類處理兩個(gè)情況

• 所有請求攔截器（request.interceptors.request）

  在請求后端API前，統(tǒng)一做處理，比如 改變url參數(shù)，附帶統(tǒng)一參數(shù)等

• 所有響應(yīng)攔截器（request.interceptors.response）

  接收來自后端返回結(jié)果后，統(tǒng)一處理地方，比如異常處理提示

更詳細(xì)的 api 文檔: https://github.com/umijs/umi-request

/**
 * request 網(wǎng)絡(luò)請求工具
 * 更詳細(xì)的 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í)的默認(rèn)參數(shù)
 */
const request = extend({
    credentials: 'include', // 默認(rèn)請求是否帶上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: {},
        },
    };
});

/**
 * 所有響應(yīng)攔截器
 *  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) {       // 未登錄錯(cuò)誤碼
            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)點(diǎn)：

• 省去每個(gè)業(yè)務(wù)異常處理
• 直接返回 data 內(nèi)容

總結(jié)

加了全局異常處理類后，實(shí)際上是通過request和response攔截器實(shí)現(xiàn)的，少處理很多冗余代碼，代碼更加簡潔和優(yōu)雅了！??！

本文由博客一文多發(fā)平臺 OpenWrite 發(fā)布！文章來源地址http://www.zghlxwxcb.cn/news/detail-711993.html

到了這里，關(guān)于【AntDesign】封裝全局異常處理-全局?jǐn)r截器的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！