Vue axios 的请求封装和拦截过滤

在写一个项目的时侯我们一般要对请求做一些基本配置和统一处理，例如 request 里面我们需要添加 token，response 里面我们需要对反馈回来的信息进行处理，一般都是处理错误信息，配合路由进行跳转之类的，下面是我的一些基本配置和错误信息处理具体按照自己的实际情况来。

• 首先我们需要对 axios 做一个统一的 config 配置，一般都是一些请求超时时间，请求头之类的,写一个 http.js 的 js 文件 引入 axios（npm i axios）引入 router 引入 store，因为需要 router 进行跳转，store 里面的 token 进行判断 做一些相应的操作

/**
 * http请求过滤
 */
import router from "../router";
import $axios from "axios";
import store from "../store/index";

const axios = $axios.create({
  // 请求超时时间
  timeout: 10000,
  // 跨域是否携带 cookies 信息
  widthCredentials: true,
  // 请求头 一般是 json 格式 如果某些单独的接口需要别的格式的话 例如 formData 格式的 单独处理
  headers: { "Content-Type": "application/json;charset=utf-8" }
});
import { baseUrl } from "../util/config";
// axios 配置 配置默认请求头 一般是俩 一个开发环境 一个测试环境
axios.defaults.baseURL = baseUrl;

我的是这个样子的

// token 登录
// export const baseUrl = "http://xxx.xxx.xxx.xxx:xxxx"; // 测试环境
export const baseUrl = "http://xxx.xxx.xxx.xx:xxxx"; //  开发环境

直接切换很方便，到这里 一些 config 的配置就完成了，主要就是超时时间 请求头的设置还有 baseUrl，接下来就是对 axios 的全局拦截 interceptors 进行处理了，首先是 request 请求拦截，我们需要给所有的请求 加上 token

// http request 拦截器
axios.interceptors.request.use(
  config => {
    // alert(store.state.token)
    let token = store.state.token && store.state.token != "";
    if (token) {
      config.headers.common["Authorization"] = store.state.token;
    } 
    return config;
  },
  err => {
    return Promise.reject(err);
  }
);

接下来是 response 响应拦截 我们需要对反馈回来的信息进行处理，主要是错误信息和要进行的处理操作

// http response 拦截器
axios.interceptors.response.use(
  res => {
    // console.log('---------------suc---',JSON.stringify(res))
    /**
     * 处理逻辑：
     * '鉴权'：鉴权失败逻辑接口归类到200，根据mes判断处理；
     * */
    if (
      res.status &&
      res.status == 200 &&
      res.data &&
      res.data.code &&
      res.data.code != 200
    ) {
      return Promise.reject(res.data.msg || "网络请求超时，请检查网络重新请求");
    } else {
      return Promise.resolve(res);
    }
  },
  error => {
    console.log("-------1--------fail---", JSON.stringify(error.response));
    console.log("--------2-------fail---", JSON.stringify(error.response.data));
    /**
     * 异常处理：
     * 401\403--token失效或无权限处理，统一跳转首页；
     * 其余错误统一返回报错信息；
     * */
    if (
      error.response &&
      error.response.data &&
      error.response.data.code &&
      (error.response.data.code == "401" || error.response.data.code == "403")
    ) {
      store.commit("DEL_USER_INFO");
      store.commit("DEL_TOKEN");
      store.commit("DEL_ROUTER");
      store.commit("INIT_MENU");
      router.push("/home");
      return Promise.reject("网络请求超时，请重新登录");
    }
    if (
      error.response &&
      error.response.status &&
      error.response.status != 200 &&
      error.response.data
    ) {
      return Promise.reject(
        error.response.data.message ||
          error.response.data.msg ||
          JSON.stringify(error.response.data)
      );
    } else {
      return Promise.reject(
        JSON.stringify(error.response) || "网络请求超时，请检查网络重新请求"
      );
    }
  }
);

这个时候需要联系后端进行错误信息的统一处理，有没有错误信息的返回，返回结构都得根据实际情况来，如果后端没有对错误信息进行统一处理，我们就需要自己进行判断，给出响应的错误提示，大概是这个样子的

/**
     * 异常处理：
     * 后台接口暂未对各status归类处理，故统一报错，仅对超时进行退出处理；
     * 4/5开头状态，统一报错信息处理 ---；
     * */
    if (
      error.response &&
      error.response.status &&
      error.response.status == 403
    ) {
      sessionStorage.clear(); //清空数据
      localStorage.clear(); //清空数据
      router.push('/home');
      return Promise.reject(error.response.data||"网络请求超时，请检查网络重新请求");
    }else{
      return Promise.reject(error.response.data||"网络请求超时，请检查网络重新请求");
    }
    if (
      error.response &&
      error.response.status &&
      error.response.status.toString().charAt(0) == 4
    ) {
      return Promise.reject("客户端请求异常，请检查网络重新请求");
    } else if (
      error.response &&
      error.response.status &&
      error.response.status.toString().charAt(0) == 5
    ) {
      return Promise.reject("服务端异常，请检查网络重新连接");
    } else {
      return Promise.reject(
        error.response.data.message ||
          error.response.data ||
          JSON.stringify(error.response) ||
          "网络异常，请检查网络再重新连接"
      );
    }

到这里我们就封装完了，我们将这个 js 文件导出，在 main.js 里面引入就好啦

//main.js
import http from "./util/http";
Vue.prototype.$http = http;

在使用的时候我们直接用 this.$http.post(“xxxxxxxx”,data)就可以了

 dele_role_ensure() {
      let data = {
        roleId: this.sin_del.roleId,
      }
      this.$http.post('/sys/role/delete', data).then((res) => {
          if (res.data.code == 200) {
            this.$message.success('删除成功')
            this.pageMes.currentPage = (this.pageMes.total - 1) % this.pageMes.pageSize > 0 ? this.pageMes.currentPage: this.pageMes.currentPage - 1
            this.getAll(this.pageMes.currentPage, this.pageMes.pageSize)
            this.dialogVisible2 = false
          }
        })
        .catch((err) => {
          this.dialogVisible2 = false
          this.$message.error('删除失败,该角色下拥有用户')
        })
    },

如果某些请求需要单独的请求头 我们就在请求后面跟着写就行，举个例子

this.$http.post('/security/oauth/token', data, {
        headers: {
          Authorization: 'Basic d2ViYXBwOndlYmFwcA==',
          'Content-type': 'application/x-www-form-urlencoded',
        },
      })

到这里所有操作就完成了