二次封装axios,以及各个环境基础路径的使用
【代码】二次封装axios。
·
import axios from 'axios'
import qs from 'qs'
import { VALID_LOGIN,FIND_TREE_BY_PIDl } from './urls' //引入判断权限、获取信息的接口
import {MessageBox} from 'element-ui'
axios.defaults.crossDomain = true;
axios.defaults.withCredentials = true; //设置cross跨域 并设置访问权限 允许跨域携带cookie信息
axios.defaults.baseURL = process.env.VUE_APP_API_BASE_URL; // 配置axios请求的地址
axios.defaults.timeout = 600000;
// axios interceptor
// 发请求之前先执行
axios.interceptors.request.use(
config => {
config.headers["userName"]='xxxxxxx' //若所有的接口中都需要某个字段,可放在请求头中
return config
},
error => {
console.log(error)
return Promise.reject(error)
}
)
// response interceptor
// 请求成功之后先执行(页面还没拿到数据)
axios.interceptors.response.use(
response => {
return response
},
error => {
let status = error.response.status
if(status==401 || status == 403 ){
selectPlate();
}
return Promise.reject(error)
}
)
//若没有关闭体统,登录用户发生改变,改变地址栏的地址
function updatedHref(){
post(FIND_TREE_BY_PIDl, { type: 1 }).then(res => {
if (res.status == 1) {
let staffName = res.data.msg.staffName;
let str = location.href;
const regex = /\?(.*)#/;
let newStr = str.replace(regex, `?userName=${staffName}#`);
history.replaceState(null, null, newStr);
}
});
}
//判断是否登录或者访问权限
function selectPlate(){
post(VALID_LOGIN).then((res)=>{
if(res.data.status==1){
MessageBox.confirm('您没有当前菜单的访问权限,请联系管理员!','提示',{
confirmButtonText: '确定',
}).then(()=>{
window.close();
})
}else if(res.data.status== -1){
MessageBox.confirm('您已掉线,请先登录!','提示',{
confirmButtonText: '确定',
}).then(()=>{
localStorage.clear();
window.close();
})
}
})
}
var test2 = setInterval(function () {
testSelectPlate();
updatedHref();
}, 5000);
//登录失效
function testSelectPlate(){
post(VALID_LOGIN).then((res)=>{
if(res.data!=null && res.data.status!=1){
clearInterval(test2)
MessageBox.confirm('登录已失效,关闭窗口重新登录','提示',{
confirmButtonText: '确定',
cancelButtonText: '取消',
}).then(()=>{
localStorage.clear();
window.close();
}).catch(()=>{
window.location.reload()
test2 = setInterval(function () {
testSelectPlate();
updatedHref();
}, 5000);
})
}
})
}
/**
* 封装get请求
* @param url
* @param data
* @returns {Promise}
*/
export function fetch(url, params = {}) {
return new Promise((resolve, reject) => {
axios.get(url, {
params: params
})
.then(response => {
resolve(response.data);
})
.catch(err => {
reject(err)
})
})
}
/**
* 封装post请求
* @param url
* @param data
* @returns {Promise}
*/
export function post(url, data = {}) {
return new Promise((resolve, reject) => {
axios.post(url,
qs.stringify(data, { arrayFormat: 'repeat' }), {
headers: {
"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
}
}
)
.then(response => {
resolve(response.data);
}, err => {
reject(err)
})
})
}
/**
* 封装post请求
* @param url
* @param data
* @returns {Promise}
*/
export function postjson(url, data = {}) {
return new Promise((resolve, reject) => {
axios.post(url, JSON.stringify(data), {
headers: {
"Content-Type": "application/json;charset=utf-8"
}
})
.then(response => {
resolve(response.data);
}, err => {
reject(err)
})
})
}
/**
* 封装patch请求
* @param url
* @param data
* @returns {Promise}
*/
export function patch(url, data = {}) {
return new Promise((resolve, reject) => {
axios.patch(url, data)
.then(response => {
resolve(response.data);
}, err => {
reject(err)
})
})
}
/**
* 封装put请求
* @param url
* @param data
* @returns {Promise}
*/
export function put(url, data = {}) {
return new Promise((resolve, reject) => {
axios.put(url, data)
.then(response => {
resolve(response.data);
}, err => {
reject(err)
})
})
}
在env.dev env.pro env.test 文件中写入地址
下面以dev环境为例
NODE_ENV=dev
VUE_APP_API_BASE_URL=https://xxxx/xxx
url.js文件
export const VALID_LOGIN = '/appmanage/public/common/validLogin';
export const FIND_TREE_BY_PIDl='/appmanage/public/common/findTreeByPid';
更多推荐
已为社区贡献2条内容
所有评论(0)