携带token+取消重复请求
import axios from 'axios'
import qs from 'qs'
import {Message, Loading} from 'element-ui'//element ui库
import store from "../store/index.js";//vuex
axios.defaults.timeout = window.g.AXIOS_TIMEOUT;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
axios.defaults.baseURL =window.g.baseURL;
//取消请求
let CancelToken = axios.CancelToken
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
// 携带token
const token = store.state.token
console.log(store.state)
if (token) {
config.headers.Authorization = token
}
// 得到请求的 url地址
let url=config.url
// 判断,如果这里拿到的 url在上一次请求中已经存在,就取消上一次的请求
if (url) {
if (axios[url] && axios[url].cancel) {
axios[url].cancel()
}
config.cancelToken = new CancelToken(c => {
axios[url] = {}
axios[url].cancel = c
})
}
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (err) {
// 对响应错误做点什么,这里其他情况和消息提示根据需要自己安排
switch (err.response.status) {
case 401: // 判断后台返回的token值是否失效
Message.closeAll();
Message({
message: "登录信息过期,即将跳转登录界面",
type: 'error',
showClose: true,
duration: 2 * 1000
})
// router.replace({ path: '/' });
setTimeout(() => {
window.location.href = '/login'
}, 1000);
break
case 404:
// err.request.responseURL + err.message
Message.closeAll();
Message({
message:"请求接口地址错误"+ err.response.request.responseURL,
type: 'error',
showClose: true,
duration: 2 * 1000
})
error.message = err.message;
error.details = err.response.data.error.details;
break
case 500:
Message.closeAll();
Message({
message: err.response.data.message,
type: 'error',
showClose: true,
duration: 2 * 1000
})
break
case 502:
Message.closeAll();
Message({
message: "接口异常",
type: 'error',
showClose: true,
duration: 2 * 1000
})
break
default:
}
return Promise.reject(err);
});
export default {
posts(url, params) {
return new Promise((resolve, reject) => {
axios.post(url, params)
.then(response => {
resolve(response.data);
}, err => {
reject(err);
})
.catch((error) => {
reject(error)
})
})
},
gets(url, params) {
return new Promise((resolve, reject) => {
axios.get(url, { 'params': params })
.then(response => {
resolve(response.data);
}, err => {
reject(err);
})
.catch((error) => {
reject(error)
})
})
},
deletes(url, params) {
return new Promise((resolve, reject) => {
axios.delete(url, { 'params': params })
.then(response => {
resolve(response.data);
}, err => {
reject(err);
})
.catch((error) => {
reject(error)
})
})
},
puts(url, params) {
return new Promise((resolve, reject) => {
axios.put(url, params)
.then(response => {
resolve(response.data);
}, err => {
reject(err);
})
.catch((error) => {
reject(error)
})
})
},
logins(url, params) {//登录
var instance = axios.create({
baseURL: window.g.baseURL
});
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
return new Promise((resolve, reject) => {
instance.post(url, params)
.then(response => {
resolve(response.data);
}, err => {
reject(err);
})
.catch((error) => {1
reject(error)
})
})
},
loadImg(url, params) { //上传图片
var dataParams = new FormData()
for (const i in params) {
dataParams.append(i,params[i])
}
var instance = axios.create({
baseURL: window.g.baseURL,
});
instance.defaults.headers.post['Content-Type'] = 'multipart/form-data';
// console.log(axios.defaults.headers)
return new Promise((resolve, reject) => {
instance.post(url, dataParams)
.then(response => {
resolve(response.data);
}, err => {
reject(err);
})
.catch((error) => {
reject(error)
})
})
},
}