vue之 axios 配置

在 utils 创建 request 文件建 index.js文件

import jxConfig from ‘@/config’;
import axios from ‘axios’;
import Vue from ‘vue’;
import mzApp from “@/utils/app/mzApp”;
import { MessageBox, Toast } from “mint-ui”;
import VConsole from ‘vconsole’
import router from ‘@/router’;
// import store from ‘@/store/appStore’;
import config from ‘@/config’;
import {interceptionPrompt} from ‘./interceptionPrompt’; // 需要绕过网关接口配置
import {paramsToUrl} from ‘…/common’
if (jxConfig.debug) {
let vConsole = new VConsole();
}
let pending = [];
const cancelToken = axios.CancelToken;
let removePending = (config) => {
for(let p in pending){
if(pending[p].u === config.url + JSON.stringify(config.data) +’&’ + config.method) { //当当前请求在数组中存在时执行函数体
// pending[p].f(); //执行取消操作
pending[p].canelFunc(pending[p].u);
pending.splice(p, 1);
}
}
}
// 基础url
export var serviceUrl;
// 公共模块绕开网关地址
export var uploadUrl;
let responseUrl = ‘’; // 需要染过网关配置判断
switch (process.env.NODE_ENV) {
case ‘development’: {
// 此处记录后端的本地ip
}
const service = axios.create({
// baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
baseURL: serviceUrl,
timeout: 100000 // request timeout
})
//请求拦截器
service.interceptors.request.use(config => {
removePending(config); //在一个axios发送前执行一下取消操作
config.cancelToken = new cancelToken(©=>{
// 这里的axios标识我是用请求地址&请求方式拼接的字符串
// JSON.stringify(config, [‘url’, ‘method’])
pending.push({ u: config.url + JSON.stringify(config.data) +’&’ + config.method, canelFunc: c });//config.data为请求参数
});
if (config.headers[‘Content-Type’] === ‘application/x-www-form-urlencoded;charset=utf-8’) {
let params = paramsToUrl(config.data);

    if (config.method === 'get' && config.url.indexOf('?') === -1) {
        config.url += '?' + params;
    } else {
        config.data = params;
    }
}

let token = localStorage.getItem(“TOKEN_APP”);
if (token === ‘undefined’) { // 处理token存储异常 后台报错，而不是返回token错误
token = ‘’;
}
config.headers[‘token’] = token;
config.headers.Authorization = ‘Basic YWRtaW46YWRtaW4=’;
if (config.url.indexOf(’?’) > 0) {
responseUrl = config.url.substr(0,config.url.indexOf(’?’)); // 获取接口
} else {
responseUrl = config.url; // 获取接口
}
if (interceptionPrompt.includes(responseUrl)) { // 绕开网关
config.baseURL = uploadUrl;
}
return config
}, error => {
return Promise.reject(error)
})
const responseStatus = {
// _400: ‘账号已在另一设备登录’,
_401: ‘登录过期,请重新登录’,
402: ‘token不存在,请重新登录’,
}
service.interceptors.response.use(response => {
removePending(response.config);
// console.log(‘2222’)
if (response.data.code !== 0 && response.config.url.indexOf(’/commonFile/getImg’) === -1 && response.data.msg && response.data.code != 500) {
Vue.prototype.KaTeX parse error: Expected 'EOF', got '}' at position 68: …sage, "提示"); }̲ if (response…{err.response.status}]) { err.message = responseStatus[KaTeX parse error: Expected 'EOF', got '}' at position 33: …tus}`] }̲ else { …{err.response.status}`
}
if (err.response.status === 401 || err.response.status === 402) { // 重新登录
setTimeout(function () {
if (mzApp.IS_ANDROID) { // 安卓下token 过期跳转安卓登录页面
mzApp.onNativeCall(‘appLogout’);
} else {
router.push("/");
}
return false;
}, 1500)
}
}
Toast({
message: err.message,
duration: 1500,
position: ‘bottom’
});
} else if (err) {
// 重复请求取消
} else {
err.message = “连接到服务器失败”
Toast({
message: err.message,
duration: 1500,
position: ‘bottom’
});
}
return Promise.resolve(err.response)
})

axios.defaults.baseURL = jxConfig.serviceUrl;
export default service