vue中 axios封装拦截

创建文件夹

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