• 場景
• 1 定義全部異常處理類
• 2 替換request引用
• 3 代碼優化
• 總結

場景

本文前端用的是阿裡的Ant-Design框架，其他框架也有全局攔截器，思路是相同，具體實現自行百度下吧

因為每次都需要調介面，都需要單獨處理異常情況（code !=0），因此前端需要對後端返回的通用響應進行統一處理，比如

• 業務異常提示

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

• 直接返回業務內容

​ 從 response取出data，進行返回，而不是每次返回全部json內容

1 定義全部異常處理類

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

該類處理兩個情況

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

  在請求後端API前，統一做處理，比如 改變url參數，附帶統一參數等

• 所有響應攔截器（request.interceptors.response）

  接收來自後端返回結果後，統一處理地方，比如異常處理提示

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

/**
 * request 網路請求工具
 * 更詳細的 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請求時的預設參數
 */
const request = extend({
    credentials: 'include', // 預設請求是否帶上cookie
    // requestType: 'form',
});

/**
 * 所有請求攔截器
 *  1. 在請求後端API前，統一做處理，比如 改變url參數，附帶統一參數等
 */
request.interceptors.request.use((url, options) => {
    // 列印每次請求的API
    console.log(`do request url = ${url}`);

    return {
        url,
        options: {
            ...options,
            // headers: {},
        },
    };
});

/**
 * 所有響應攔截器
 *  1. 接收來自後端返回結果後，統一處理地方，比如異常處理提示
 */
request.interceptors.response.use(async response => {
        const res = await response.clone().json();
        if (res.code === 0) {
            // 成功，則取出 data內容 直接返回
            return res.data;
        }
        if (res.code === 40100) {       // 未登錄錯誤碼
            message.error('請先登錄');
            // 跳轉登錄地址
            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 代碼優化

優點：

• 省去每個業務異常處理
• 直接返回 data 內容

總結

加了全局異常處理類後，實際上是通過request和response攔截器實現的，少處理很多冗餘代碼，代碼更加簡潔和優雅了！！！

本文由博客一文多發平臺 OpenWrite 發佈！