首先是对于请求的拦截和处理,我一般是在utils里建立js进行封装
Servise.js
import axios from 'axios'
import router from '../router'
import { Message, Loading } from 'element-ui'
import { Base64 } from 'js-base64';
import AES from '../static/AES.js'
import md5 from 'js-md5';
// export const ConfigBaseURL = 'http://请求头' //默认路径,这里也可以使用env来判断环境
let loadingInstance = null //这里是loading
//使用create方法创建axios实例
export const Service = axios.create({
timeout: 30000, // 请求超时时间
method: 'post',
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
})
// request拦截器
Service.interceptors.request.use(
config => {
loadingInstance = Loading.service({
lock: true,
text: 'loading...',
background:'transparent'
})
if (sessionStorage.getItem('token')) {
config.headers['X-Access-Token'] = sessionStorage.getItem('token') // 让每个请求携带自定义token 请根据实际情况自行修改
}
if(config.data){
config.headers['M-RAND'] = new Date().toLocaleString();
config.headers['M-SIGN'] = md5(config.headers['M-RAND']+"简单字符串"+Base64.encode(JSON.stringify(config.data))).toUpperCase();
}
return config;
},
error => {
// 请求错误处理
return Promise.reject(error);
}
)
var lateFlag = 0;
// 添加响应拦截器
Service.interceptors.response.use(response => {
loadingInstance.close()
response.data = Base64.decode(response.data);
response.data = response.data.split('').reverse().join('');
if (response.data.length > 24) {
let rand = response.data.substring(8, 24);
response.data = response.data.substring(0, 8) + response.data.substring(24);
return JSON.parse(AES.myDecrypt(response.data, rand));
} else {
let rand = response.data.substring(response.data.length - 16);
response.data = response.data.substring(0, response.data.length - 16);
return JSON.parse(AES.myDecrypt(response.data, rand));
}
// return response.data
}, error => {
console.log('error',error);
if (error.response.status == 504 || error.response.status == 404) {
Message.error({message: '数据获取异常'});
} else if (error.response.status == 403) {
Message.error({message: '权限不足,请联系管理员!'});
} else if (error.response.status == 401) {
lateFlag++;
if(lateFlag==1){
// this.$confirm('Token失效,请重新登录','',{
// confirmButtonText:'确定',
// cancelButtonText:'取消',
// }).then(res=>{
// console.log('点击了确定');
// }).catch(res=>{
// console.log('点击了取消');
// })
Message.error({message: 'Token失效,请重新登录'});
}
router.replace('/');
} else {
if (error.message) {
Message.error({message: error.message});
} else {
Message.error({message: '未知错误!'});
}
}
loadingInstance.close()
return Promise.reject(error)
})
然后就可以封装一些简单的请求
request.js
import {Service} from './Service'
export function getAction(url,data) {
return Service({
url: url,
method: 'get',
params:data
})
}
export function postAction(url,data) {
return Service({
url: url,
method:'post',
data: data
})
}
export function deleteAction(url,data) {
return Service({
url: url,
method:'delete',
params: data
})
}
在main.js绑定即可使用
import { Service } from './utils/Service.js'
import { Base64 } from 'js-base64';
Vue.prototype.$Base64 = Base64
import { getAction, postAction,deleteAction } from './utils/request.js'
Vue.prototype.$request = Service
Vue.prototype.$getAction = getAction
Vue.prototype.$postAction = postAction
Vue.prototype.$deleteAction = deleteAction
在页面使用时建议使用异步封装调用
//请求函数
getlist() {
return new Promise((resolve, reject) => {
this.$postAction("请求地址", {sex:0}).then((res) => {
if (res.success) {
resolve(res.result.data)
}
});
})
},
//使用调用函数
setdata() {
this.getAnalysis().then(res => {
console.log(res)
})