react中使用axios拦截并处理不同http状态码

在react和vue都一般都会使用一个全局的request方法进行http请求
在该方法中需要对200之外的状态码进行单独处理

参考ant pro项目中代码 改写的axios配置

状态码设置

// axiosSetting.js
import axios from 'axios'
import { message } from 'antd'
import { routerRedux} from 'dva/router'
import { getToken } from './auth'
import store from '../index'

axios.defaults.withCredentials = true
axios.defaults.timeout = 10000

const codeMessage = {
  200: '服务器成功返回请求的数据。',
  201: '新建或修改数据成功。',
  202: '一个请求已经进入后台排队（异步任务）。',
  204: '删除数据成功。',
  400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。',
  401: '用户没有权限（令牌、用户名、密码错误）。',
  403: '用户得到授权，但是访问是被禁止的。',
  404: '发出的请求针对的是不存在的记录，服务器没有进行操作。',
  406: '请求的格式不可得。',
  410: '请求的资源被永久删除，且不会再得到的。',
  422: '当创建一个对象时，发生一个验证错误。',
  500: '服务器发生错误，请检查服务器。',
  502: '网关错误。',
  503: '服务不可用，服务器暂时过载或维护。',
  504: '网关超时。',
}

axios拦截

// axiosSetting.js
// request拦截器
axios.interceptors.request.use(
    config => {
        // Do something before request is sent
        const token = getToken()
        // console.log(window.location.href.indexOf('/user/login') > -1)
        if(config.url.indexOf('/auth/oauth/token') > 0){
            config.headers.Authorization = 'Basic dnVlOnZ1ZQ==' // 增加客户端认证
        }else{
            config.headers.Authorization = token // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改
        }
        const {url} = config
        if(/^\/api\//.test(url) && !token && !window.location.href.indexOf('user') > -1){
            const { dispatch } = store
            dispatch(routerRedux.replace('/user/login')) // 跳转到登录页
        }
        return config
    },
    error => {
        // Do something with request error
        console.log(error) // for debug
        Promise.reject(error)
    }
)
// respone拦截器
axios.interceptors.response.use(
    response => {
        /**
         * 下面的注释为通过response自定义code来标示请求状态，当code返回如下情况为权限有问题，登出并返回到登录页
         * 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中
         */
        const res = response.data
        // if (response.status === 401 || res.status === 40101) {
        //   MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
        //     confirmButtonText: '重新登录',
        //     cancelButtonText: '取消',
        //     type: 'warning'
        //   }).then(() => {
        //     store.dispatch('LogOut').then(() => {
        //       location.reload() // 为了重新实例化vue-router对象 避免bug
        //     })
        //   })
        //   return Promise.reject('error')
        // }
        // if (res.status === 30101) {
        //   Message({
        //     message: res.message,
        //     type: 'error',
        //     duration: 5 * 1000
        //   })
        //   return Promise.reject('error')
        // }
        // if (res.status === 40301) {
        //   Message({
        //     message: '当前用户无相关操作权限！',
        //     type: 'error',
        //     duration: 5 * 1000
        //   })
        //   return Promise.reject('error')
        // }
        if (response.status !== 200 && res.status !== 200) {
            message.error(response.data.message)
            // notification.error({
            //     message: res.status,
            //     description: res.message,
            // })
        } else {
            return response.data
        }
    },
    error => {
        // console.log(JSON.stringify(error)) // for debug
        if (error === undefined || error.code === 'ECONNABORTED') {
            message.warning('服务请求超时')
            return Promise.reject(error)
        }
        const { response: { status, statusText, data: { msg = '服务器发生错误' } }} = error
        const { response } = error
        const { dispatch } = store
        const text = codeMessage[status] || statusText || msg

        if (status === 400) {
            // message.warning('账户或密码错误！')
            dispatch(routerRedux.push('/user/login'))
        }
        const info = response.data
        if (status === 401 || info.status === 40101) {
            dispatch({
                type: 'login/logout',
            })
            // MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
            //     confirmButtonText: '重新登录',
            //     cancelButtonText: '取消',
            //     type: 'warning',
            // }).then(() => {
            //     store.dispatch('LogOut').then(() => {
            //         location.reload() // 为了重新实例化vue-router对象 避免bug
            //     })
            // })
        }
        if (status === 403) {
            dispatch(routerRedux.push('/exception/403'))
            // Notification.warning({
            //     title: '禁止',
            //     message: info.message,
            //     type: 'error',
            //     duration: 2 * 1000,
            // })
        }
        if (info.status === 30101) {
            dispatch(routerRedux.push('/exception/500'))
            // Notification.warning({
            //     title: '失败',
            //     message: info.message,
            //     type: 'error',
            //     duration: 2 * 1000,
            // })
        }
        if (response.status === 504) {
            dispatch(routerRedux.push('/exception/500'))
            // Message({
            //     message: '后端服务异常，请联系管理员！',
            //     type: 'error',
            //     duration: 5 * 1000,
            // })
        }
        message.error(`${status}:${text}`)
        // throw error
        // return error
        return Promise.reject(error)
    }
)

调用并导出axios

// request.js
import axios from 'axios'
import { merge } from 'lodash'

import './axiosSetting'

const request = async (_options) => {
    // 默认GET方法
    const method = _options.method || 'GET'
    const options = merge(
        { ..._options },
        {
            method,
        }
    )
    return axios(options)
}

/**
 * 封装get请求
 * @param { String } url 请求路径
 * @param { Object } 请求参数
 *  params GET请求参数
 */
const get = (url, params, _options) => {
    return request({ ..._options, params, url })
}
/**
   * 封装post请求
   * @param { Object } 请求参数
   *  data POST请求请求参数，对象形式
   */
const post = (url, data, _options) => {
    return request({ ..._options, data, url }, 'POST')
}
  
export { get, post }
export default request