编程知识 cdmana.com

axios拦截器的使用

简单封装axios,使用请求拦截器设置token;使用响应拦截器拦截后台返回的错误码,并且判断token是否过期;

main.js引入封装的axios,并加在原型上;

// 引入axios
import http from "@utils/http.js";
Vue.prototype.axios = http;

封装后的axios(比较简单,希望对你有帮助)

/**
 * 封装axios
 * 创建一个qs转义的axios,加在原型上,创建一个普通的axios,供其他请求使用
 * 请求拦截,设置头部token
 * 响应拦截,拦截后台返回的错误信息
 *  判断token是否过期,过期跳转到登录页面
 */

//  引入模块
import { Toast } from "vant";
import axios from "axios";
import router from "@/router.js";
import qs from "qs";

// 全局请求地址
const baseUrl = "http://192.168.3.6:8000";

// 创建qs转换参数格式,并加到http原型上(因后台特殊情况,此请求只有一次,即qsAxios可忽略)
let qsAxios = axios.create({
  baseURL: baseUrl,
  timeout: 3000,
  // 可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
  transformRequest: [
    function(data) {
      // `transformRequest` 允许在向服务器发送前,修改请求数据
      // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
      return qs.stringify(data);
    },
  ],
});

// 创建普通axios
let http = axios.create({
  baseURL: baseUrl,
  timeout: 3000,
});

http.qsAxios = qsAxios;

// axios请求拦截
http.interceptors.request.use(
  (response) => {
    var token = localStorage.getItem("token");
    // 判断是否存在token,如果存在的话,则每个http header都加上token
    if (token) {
      response.headers["token"] = token;
    }
    return response;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// axios响应拦截
http.interceptors.response.use(
  (response) => {
    console.log(response);
    return response;
  },
  (error) => {
    if (error.response) {
      //跟后台约定好,设置不同的状态码,如果出现error.response出现undefined,查看后端是否被中间件提前拦截
      switch (error.response.status) {
        case 400:
          Toast(error.response.data.msg);
          break;
        case 401:
          Toast("登录信息已过期,请重新登录!");
          router.replace({ path: "/login", name: "login" });
          break;
        case 404:
          Toast("请求错误,请刷新后重试!");
          break;
        case 422:
          Toast("参数错误,请稍后重试!");
          break;
        case 500:
          Toast("请求错误,请刷新后重试!");
          break;
      }
    }
    return Promise.reject(error);
  }
);

export default http;

使用

  1. 通过qs转义
this.axios.qsAxios.post("/test").then((res)=>{})
  1. 普通axios
this.axios.post("/test").then((res)=>{})

版权声明
本文为[简事]所创,转载请带上原文链接,感谢
https://my.oschina.net/clearcode/blog/4712386

Scroll to Top