文件index.js
import axios from 'axios'
import { Modal } from 'antd'
import { HashRouter } from 'react-router-dom'
// Loading组件
import Loading from '../utils/loading'
// http request 请求拦截器
axios.defaults.timeout = 1000 * 60 * 60
axios.defaults.baseURL = '/'
//路由跳转
const { history } = new HashRouter()
// 取消重复的ajax请求
let pending = [] //声明一个数组用于存储每个ajax请求的取消函数和ajax标识
let cancelToken = axios.CancelToken
let removePending = ever => {
for (let p in pending) {
if (pending[p].key === ever.url + '_' + ever.method) {
//当当前请求在数组中存在时执行函数体
pending[p].cancel() //执行取消操作
pending.splice(p, 1) //把这条记录从数组中移除
}
}
}
// http request 拦截器
axios.interceptors.request.use(
config => {
Loading.init()
const { url, headers, method } = config
config.headers['X-Requested-With'] = 'XMLHttpRequest'
let mth = method.toLocaleString()
// 兼容IE method方法 后端接收'_method'参数
if (['put', 'delete'].indexOf(mth) > -1) {
config.params
? (config.params['_method'] = mth)
: (config.params = { _method: mth })
config.method = 'post'
}
// 过滤接口访问是否带token权限 --此处可忽略
let ignore = ['/login', '/forget']
if (ignore.indexOf(url) < 0) {
let token = userToken // TODO 接口访问token
if (token) {
headers['token'] = token
} else {
// 获取token失败 退出登录
Modal.warning({
title: '提示',
content: '账号异常,请重新登录!',
okText: '确定',
onOk: () => {
history.replace({ pathname: '/login' })
}
})
return false
}
}
removePending(config) //在一个ajax发送前执行一下取消操作
config.cancelToken = new cancelToken(cancel => {
// 这里的ajax标识key是用【请求地址_请求方式】拼接的字符串,当然你可以选择其他的一些方式
pending.push({ key: config.url + '_' + config.method, cancel })
})
// 兼容IE 防止请求缓存,增加时间戳
config.url +=
(config.url.indexOf('?') > -1 ? '&' : '?') + '_t=' + new Date().getTime()
return config
},
err => {
Loading.close()
return Promise.reject(err)
}
)
// http response 拦截器
axios.interceptors.response.use(
response =>
new Promise(resolve => {
// 在一个ajax响应后再执行一下取消操作,把已经完成的请求从pending中移除
removePending(response.config)
// 根据接口定义结构判断是否请求成功
if (!response.data.success) {
Modal.warning({
title: '提示',
content: response.data.describe,
centered: true,
okText: '确定',
onOk: () => {
history.replace({ pathname: '/' })
}
})
}
Loading.close()
resolve(response)
}),
error => {
Loading.close()
// TODO 此处可增加异常码拦截跳转
if (error.response) {
switch (error.response.status) {
case 404:
// TODO
break
case 500:
// TODO
break
// ......
default:
}
} else if (error.message === 'Network Error') {
Modal.error({
title: '提示',
content: error.message + ' 请确认网络连接是否正常!',
okText: '再试一次',
onOk: () => {
window.location.reload()
}
})
}
return Promise.reject(error)
}
)
export default axios