vue2-axios拦截器的编写

vue-axios拦截器的编写

vue-axios拦截器的编写

引入模块

引入axios，vue来创建拦截器，router和store进行登录失败的跳转和清理缓存

import axios from 'axios';
import router from '../router';
import Vue from 'vue';
import store from '@/store';

建立axios拦截器

创建一个拦截器，在其中添加请求参数。

const _http = axios.create({
  baseURL: process.env.BASE_URL, // 在.env文件和vue.config.js配置请求url
  timeout: 60000, // 相应超时时长
  responseType: 'json', // 相应数据格式
  withCredentials: true, // 是否允许带cookie这些
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  // 如若是处理数据可以在调用时传参：例如数据数据的传参
});

跳转登录页

未登录处理

let timer = null;
const login = (msg) => {
  if (!timer) {
    Vue.prototype.$Message.error(msg);
    timer = setTimeout(async () => {
      // clearStorage(); //清理缓存
      await router.push({ name: 'passport_login' });
      clearTimeout(timer);
      timer = null;
    }, 200);
  }
};

请求拦截

创建请求拦截器，判断请求时登录状态；对请求url参数做处理。

//添加请求拦截器
_http.interceptors.request.use(
  (config) => {
    let loginId = store.getters.getLoginId;
    // 通过store判断登录状态,非登录时触发
    if (!loginId && loginId != 0) {
      login('请先登录！');
      return {};
    }
    // 对拦截的url操作，转换不同url地址，用于请求不同地址库
    if (/\/\{old\}/.test(config.url)) {
      config.url = config.url.replace(/\/\{old\}/g, `/${oldAdrr}`);
      return config;
    }
    if (/\/\{new\}/.test(config.url)) {
      config.url = config.url.replace(/\/\{new\}/g, `/${newAdrr}`);
      return config;
    }
    config.baseURL = `${config.baseURL}/${loginId}`;
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

响应拦截

创建响应拦截器，对返回状态判断并处理状态信息；对返回数据做处理。

（此处凡是非200状态：全局提示返回信息）

//添加响应拦截器
_http.interceptors.response.use(
  (res) => {
  	//判断相应状态进行数据处理
    //status 401
    if (res.data.status == '401') {
      login(res.data.error);
      throw Error(res.data.message);
    }
	//status 403 非登录或登录失效
    if (res) {
      if (res.status == '403') {
        router.push({ name: 'login_page' });
        Vue.prototype.$Message.error(res.data.message);
      } else {
        if (res.status != 200) {
          Vue.prototype.$Message.warning(res.message);
          throw Error(res.message);
        } else {
          if (res.data.status != 200) {
            Vue.prototype.$Message.warning(res.data.error);
            throw Error(res.data.error);
          }
          return res.data.message;
        }
      }
    } else {
      Vue.prototype.$Message.error('请求服务器出错！');
      throw Error('请求服务器出错！');
    }
  },
  (error) => { 
  	// 服务器返回不是 2 开头的情况，会进入这个回调
    // const responseCode = error.response.status; // 根据后端返回的状态码进行不同的操作
    // 断网 或者 请求超时 状态
    if (!error.response) {
      // 请求超时状态
      if (error.message.includes('timeout')) {
        Vue.prototype.$Message.error('请求超时，请检查网络是否连接正常');
      } else {
        Vue.prototype.$Message.error('请求失败，请检查网络是否已连接');
      }
      return;
    }
    return Promise.reject(error);
  }
);

暴露当前拦截器

export default _http;