react umi-request 一套统一的网络请求和错误处理方案

参考文档：umi-request错误处理

import request, { extend } from 'umi-request';

import { message } from 'antd';

import {history} from 'umi';

 

const errorHandler = (error: any) => {

    // 请求已发送但服务端返回状态码非 2xx 的响应

    if (error.response) {

        if (error.data.status === 500) {

            // 跳转至至指定500页面

            // history.push('/500');

        }else if (error.data.status === 404) {

            // 跳转至至指定404页面

            // history.push('/404');

        }else {

            // 若不是500或404，则展示异常message

            message.error(error.data.message ? error.data.message : error.data);

        }

    } else {

        // 请求初始化时出错或者没有响应返回的异常

        message.error('服务器异常');

    }

}

 

// 响应拦截器

// 克隆响应对象做解析处理

request.interceptors.response.use(async response => {

    const data = await response.clone().json();

    // 详情返回的response处理

    if(data.code === '500') {

        switch (data.message) {

            case 'systemError':

                message.error('网络繁忙，请稍后再试');

                break;

 

            case 'loginTimeout':

                message.error('登录超时，请重新登录');

                // 跳转到login页面

                // history.push('/login');

                break;

        

            default :

                break;

        }

    }

    return response;

});

 

// 请求拦截器, 改变url 或 options.

request.interceptors.request.use((url, options) => {

    return {

        url,

        options,

    };

});

 

// 作为统一错误处理

const http = extend({

    errorHandler,

})

 

export default http;

 

使用方法：service中将request引用改为自定义的http