在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