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

参考文档：https://github.com/umijs/umi-request/blob/master/README_zh-CN.md#%E9%94%99%E8%AF%AF%E5%A4%84%E7%90%86importrequest,{extend}from'umi-request';import{message}from'antd';import{history}from'umi';con

等不到的等

7605人浏览 · 2020-07-21 11:21:35

等不到的等 · 2020-07-21 11:21:35 发布

参考文档：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;