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')
}