axios
axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
在前端框架中的应用也是特别广泛，不管是vue还是react，都有很多项目用axios作为网络请求库。
我在最近的几个项目中都有使用axios，并基于axios根据常见的业务场景封装了一个通用的request服务。
npm:
bower:
Using cdn:
业务场景：
默认配置
定义全局的默认配置
自定义配置（非常见业务场景，仅作介绍）
优先级：自定义配置 > 默认配置
请求及响应拦截器
请求拦截器
1.请求拦截器中将所有请求的url添加进请求列表变量，为取消请求及loading状态管理做准备 2.请求一旦开始，就可以开启动画加载效果。 3.用户登录后可以在请求头中携带token做权限校验使用。
响应拦截器
1.响应返回后将相应的请求从请求列表中删除 2.当请求列表为空时，即所有请求结束，加载动画结束 3.权限认证报错统一拦截处理 4.取消请求的处理需要结合其他代码说明 5.由于项目后端并没有采用RESTful风格的接口请求，200以外都归为网络请求失败
promise封装及取消请求
const post = (url,config = {}) => {
return request(url,'post')
}
const get = (url,'get')
}
//3.导出cancel token列表供全局路由守卫使用
export {sources,get}
1.axios cancel token API 2.存入需要取消的请求列表导出给导航守卫使用 3.router.js
request.js完整代码：
import store from '../store'
import router from '../router'
// axios.defaults.timeout = 10000
const requestList = []
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'
axios.defaults.baseURL = process.env.BASE_URL
// 自定义拦截器
axios.interceptors.request.use((config) => {
requestList.push(config.url)
store.dispatch('changeGlobalState',{loading: true})
const token = store.getters.userInfo.token
if (token) {
config.headers.token = token
}
return config
},function (error) {
return Promise.reject(error)
})
axios.interceptors.response.use(function (response) {
requestList.splice(requestList.findIndex(item => item === response.config.url),1)
if (requestList.length === 0) {
store.dispatch('changeGlobalState',{loading: false})
}
if (response.data.code === 900401) {
window.$toast.error('认证失效，请重新登录！',function (error) {
requestList.length = 0
store.dispatch('changeGlobalState',{loading: false})
if (axios.isCancel(error)) {
throw new axios.Cancel('cancel request')
} else {
window.$toast.error('网络请求失败！',1000)
}
return Promise.reject(error)
})
const CancelToken = axios.CancelToken
let sources = []
const request = function (url,Object.assign(config,{
cancelToken: new CancelToken(function executor (c) {
sources.push(c)
})
})).then(response => {
resolve(response.data)
},err => {
reject(err)
}).catch(err => {
reject(err)
})
})
}
const post = (url,'get')
}
export {sources,get}
