欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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...

创建文件夹
vue中 axios封装拦截

vue中 axios封装拦截
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

相关标签: Vue