vue中 axios封装拦截
程序员文章站
2022-03-23 09:45:00
创建文件夹util.js 里面写import axios from 'axios';let util = {};util.title = function (title) { window.document.title = title;};//const setApi = window.configjs.apiUrlAggregate.baseURL //环境变量头部const setApi = process.env.VUE_APP_BASEURL//某个端口uti...
创建文件夹
util.js 里面写
import axios from 'axios';
let util = {};
util.title = function (title) {
window.document.title = title;
};
//const setApi = window.configjs.apiUrlAggregate.baseURL
//环境变量头部
const setApi = process.env.VUE_APP_BASEURL
//某个端口
util.controllerCenter = setApi + "rhmp-controller"
util.ajax = axios.create({
timeout: 30000
});
http里面写:主要是拦截
import Util from './libs/util';
import iView from 'view-design';
// axios 配置
Util.ajax.defaults.timeout = 20000;
let pending = 0
// http request 拦截器
Util.ajax.interceptors.request.use(config => {
config.headers.languageType = Util.getLocalItem('languageType');//本地语言
if (sessionStorage.getItem('token')) {//本地Token
config.headers.Authorization = config.headers.Authorization || sessionStorage.getItem('token');
}
return config;
},err => {
return Promise.reject(err);
});
// http response 拦截器
Util.ajax.interceptors.response.use(
response => {
if (response.data.code == 401||response.data.code>502) {
pending++
if (pending>1) return false
iView.Notice.warning({
title: '温馨提示:',
desc: '无token信息,即将退出,请重新登陆!'
});
setTimeout(() => {
window.location.href = util.getwayUrl
}, 1500);
}else{
return response;
}
});
export default Util.ajax;
otherApi ,里防止的是项目模块的APi
示例一个模块写法
import util from '../../libs/util';
import qs from 'qs'; //拼接包
//不良事件相关接口
const _state = {
api1 : util.nurseDataUrl + '/api/....', //util里面的端口号加地址
api2 : util.nurseDataUrl + '/api/....',
api3 : util.nurseDataUrl + '/api/....',
api4 : util.nurseDataUrl + '/api/....',
api5 : util.nurseDataUrl + '/api/....',
}
const mutations = {}
//body形式传参
const actions = {
api1 ({ dispatch, commit, state }, params) {
return util.ajax({
method: 'post',
url: state.api1 ,
data: params
})
},
api2 ({ dispatch, commit, state }, params) {
return util.ajax({
method: 'post',
url: state.api2 ,
data: params
})
},
}
//非body形式传参
for (let i in _state) {
if (actions[i]) continue; //除去body传参
actions[i] = function ({ dispatch, commit, state }, params) {
return util.ajax({
method: 'post', //方式
url: state[i] + '?' + qs.stringify(params) //拼接
})
}
}
export default { state: _state, mutations, actions }
store 里面的index.js
import Vue from 'vue';
import Vuex from 'vuex';
import someApi'./otherApi/someApi.js' //otherApi里面的js
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
someApi
},
});
export default store;
main.js里面添加
import axios from './http'
new Vue({
el: '#app',
router,
store,
axios, //加这个
});
文件中使用
funApi() {
let nowData = {
//里面放参数
}
this.$store.dispatch('api1', nowData).then(res => {
if (res.data.code !== 200) {
//错误的时候调用
} else {
this.rightContent.mrTypeList = res.data.data.records
this.$refs.mrTypeRef.callbackData(res.data.data.records) //回显高亮处理
}
}).catch(() => {
//错误的时候调用
})
},
本文地址:https://blog.csdn.net/weixin_43486426/article/details/109603306