- 此处使用了vux框架,可根据需要修改
- 自行填写域名地址
- token添加的方式及位置,根据需求添加。(此处token保存在localStorage中)
- token过期的条件限制及 token过期后的操作,根据需要修改。
- 最后为的get和post请求例子
import axios from 'axios';
import Vue from 'vue';
import store from '../store/'
import router from "../router"
import {
ToastPlugin,
LoadingPlugin
} from 'vux'
Vue.use(ToastPlugin)
Vue.use(LoadingPlugin)
var qs = require('qs');
// 限制快速点击
var requesting = [];
var limitTime = 1000;
var requestingId = "";
if(process.env.NODE_ENV === 'development') {
axios.defaults.baseURL = '地址'; //请求域名地址
}
Vue.prototype.$axios = axios.defaults.baseURL;
// 添加请求拦截器
axios.interceptors.request.use(function(config) {
// 添加token(根据所需位置自行修改)
let token = localStorage.getItem("Token");
if(token) {
config.headers.common['Authorization'] = 'Bearer ' + token
}
// 显示loading
Vue.$vux.loading.show({
text: '加载中...'
});
// 限制快速点击
var requestingId = JSON.stringify(config.data);
if(config.method === "post") {
let nowTime = new Date().getTime();
requesting = requesting.filter(item => {
return item.startTime + limitTime > nowTime;
});
let sessionUrl = requesting.filter(item => {
return item.requestingId === requestingId;
});
if(sessionUrl.length > 0) {//请求重复 中断请求
return config;
}
let item = {
requestingId: requestingId,
startTime: nowTime
};
requesting.push(item);
}
return config;
}, function(error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function(response) {
// 对响应数据做点什么
Vue.$vux.loading.hide();
if(response.data.code == '-100') { //token过期或为空
router.push("/login");
}
return response;
}, function(error) {
// 对响应错误做点什么
return Promise.reject(error);
});
//---------------get请求---------------------
export const getinfo= () => {
return axios.get('/api/getinfo');
}
//---------------post请求---------------------
export const geturl= (pms) => {
const params = qs.stringify(pms);
return axios.post('/api/geturl', params);
}
网友评论