vue项目 请求封装

vue项目，为了统一代码，提高可维护性，通常会涉及请求封装。

在里面，我们可以统一处理请求头：

  axios.defaults.baseURL = "/api";
  axios.defaults.timeout = 8000;

比如我们需要在所有请求头中加入统一的token；比如请求时没有token的情况，我们需要让他回到登陆页面（利用请求拦截）：

 axios.interceptors.request.use(
    (config) => {
      let path = router.history.current.path;
      config.headers.token = sessionStorage.getItem("token");
      if (path !== "/login" && path !== "/") {
        if (
          sessionStorage.getItem("token") === undefined ||
          sessionStorage.getItem("token") === null ||
          sessionStorage.getItem("token") === ""
        ) {
          // 判断token,并拦截
          router.replace("/login");
        }
      }
      return config;
    },
    (error) => {
      return Promise.error(error);
    }
  );

或者token在一定时间过后过期，也需要在他发出请求，后端返回数据的时候让他回到登陆页面：

axios.interceptors.response.use(
    (response) => {
      let res = response.data;
      if (res.status == 0) {
        return res.data;
      } else if (res.status == 10) {
        window.location.href = "/#/login";
        return Promise.reject(res);
      } else {
        message.warning(res.msg);
        return Promise.reject(res);
      }
    },
    (error) => {
      let res = error.response;
      message.error(res.data.message);
      return Promise.reject(error);
    }
  );

另外，get方法与post方法的传参方式也可以统一：

 let format = method.toLocaleLowerCase() === "get" ? "params" : "data";
  axios({
    url: url,
    method: method,
    [format]: data,
    header: {
      "content-type": "application/json",
    },
  })
    .then((res) => {
      if (res.code == 0) {
        return Promise.resolve(res);
      } else if (res.code == -1) {
        return Promise.resolve(res);
      }
    })
    .catch(() => {
      console.log("发生错误，请检查！");
      return Promise.reject();
    });

整体代码：

import axios from "axios";

function HttpRequest({ url, data = {}, method = "GET" }) {
  // 设置请求头
  axios.defaults.baseURL = "/api";
  axios.defaults.timeout = 8000;

  // 请求拦截（如没有token）
  axios.interceptors.request.use(
    (config) => {
      let path = router.history.current.path;
      config.headers.token = sessionStorage.getItem("token");
      if (path !== "/login" && path !== "/") {
        if (
          sessionStorage.getItem("token") === undefined ||
          sessionStorage.getItem("token") === null ||
          sessionStorage.getItem("token") === ""
        ) {
          // 判断token,并拦截
          router.replace("/login");
        }
      }
      return config;
    },
    (error) => {
      return Promise.error(error);
    }
  );

  // 响应拦截（比如后端返回10——token失效）
  axios.interceptors.response.use(
    (response) => {
      let res = response.data;
      if (res.status == 0) {
        return res.data;
      } else if (res.status == 10) {
        window.location.href = "/#/login";
        return Promise.reject(res);
      } else {
        message.warning(res.msg);
        return Promise.reject(res);
      }
    },
    (error) => {
      let res = error.response;
      message.error(res.data.message);
      return Promise.reject(error);
    }
  );

  // 处理post与get方法传参差异
  let format = method.toLocaleLowerCase() === "get" ? "params" : "data";
  axios({
    url: url,
    method: method,
    [format]: data,
    header: {
      "content-type": "application/json",
    },
  })
    .then((res) => {
      if (res.code == 0) {
        return Promise.resolve(res);
      } else if (res.code == -1) {
        return Promise.resolve(res);
      }
    })
    .catch(() => {
      console.log("发生错误，请检查！");
      return Promise.reject();
    });
}

export { HttpRequest };