import axios from 'axios'
import store from './store/index'
axios.interceptors.request.use(
function(request){
request.cancelToken = new axios.CancelToken(function(cancel){
store.commit('pushToken',{cancelToken:cancel})
})
/*
请求设置参数。。。
*/
return request
},
error=>{
return Promise.reject(error.response);
}
)
axios.interceptors.response.use(
function(response){
if(response.status == 200){
return response.data;
}else{
alert('服务器错误')
}
},
error=>{
return Promise.reject(error.response)
}
)
// post 请求
const post =(url,data,config={})=>{
return axios({
methods:'post',
url:url,
data:data,
...config
})
}
// 并发请求 promiseArray 请求队列
const allAxios = (promiseArray)=>{
// 包裹一层promise 原因
// 如果直接调用axios.all 请求成功失败处理是使用者
console.log(promiseArray,'promiseArray')
return new Promise((resolve,reject)=>{
axios.all(promiseArray)
.then(allResponse=>{
resolve(allResponse)
})
.catch((error)=>{
reject(error)
})
})
}
export default{
post ,
allAxios
}
import Vuex from 'vuex'
export default new Vuex.Store(
{
state:{
cancelTokenArr:[],//请求队列
},
mutations:{
// 请求队列
pushToken(state,payload){
state.cancelTokenArr.push(payload.cancelToken)
},
// 清除请求队列数组
clearToken({cancelTokenArr}){
cancelToken.forEach(element => {
// 提前返回错误信息
item({
code:666,
msg:'请求取消'
})
cancelTokenArr = []
});
}
}
}
)
// 请求组件.vue
uploadFun (){
this.$http.post(url,form ,{
onUploadProfress : ProgressEvent=>{
// 上传进度
let progress = ProgressEvent.loaded / ProgressEvent.total * 100
},
onDownloadProgress :ProgressEvent =>{
}
})
}
// 取消请求
cancelRequest(){
this.$store.commit('clearToken')
}