Axios的二次封装

前端对Asiox进行封装

项目中，前端需要对api进行统一管理,这样不管接口有多少,所有的接口都可以非常清晰,容易维护。
通常我们的项目会越做越大,页面也会越来越多,如果页面非常的少,直接用axios也没有什么大的影响,那页面组件多了起来,上百个接口呢,这个时候后端改了接口,多加了一个参数什么的呢?那就只有找到那个页面,进去修改.整个过程很繁琐不易于项目的维护和迭代。
这个时候如果我们统一的区管理接口,需要修改某一个接口的时候直接在api里修改对应的请求是不是很方便呢?因为我们用的最多的还是get post请求.我们就可以针对封装。

// 要将axios进行二次封装
import axios from "axios";
import * as postMessage from "@/utils/postmessage.js";
// import qs from "qs";
let hostURL = window.location.host;
let url = "";
let uploadUrl = "";
if (hostURL == "jdw-scp-test.jd.com") {
  url = "gtw-test.jd.com";
  uploadUrl = "upload-sc-test.jd.com";
} else if (hostURL == "jdw-scp-pre.jd.com") {
  url = "gtw-pre.jd.com";
  // url = "gtw.jd.com";
  uploadUrl = "upload-sc-pre-internal.jd.com";
  // uploadUrl = "upload-sc-internal.jd.com";
} else {
  url = "gtw.jd.com";
  uploadUrl = "upload-sc-internal.jd.com";
}
let baseURL = `${window.location.protocol}//${url}`;
let baseUploadUrl = `${window.location.protocol}//${uploadUrl}`;

class HttpRequest {
  constructor() {
    // 可以增加实例属性
    // 后台接口的路径 开发模式和生产模式不一样
    this.baseURL = baseURL;
    this.timeout = 60000; // 10s后请求超时
  }
  setInterceptors(instance) {
    // 设置拦截器
    instance.interceptors.request.use((config) => {
      // 一般增加一些token属性等
      return config;
    });
    instance.interceptors.response.use(
      (res) => {
        if (res.status == 200 && res.data.success) {
          // 服务器返回的结果都会放到data中
          return Promise.resolve(res.data.data || []);
        } else {
          // Vue.prototype.$message.error(res.data.message);
          this.$message.error(res.data.message)
          return Promise.reject(res);
        }
      },
      (err) => {
        //登录校验不通过
        if (
          err.response?.status === 401 ||
          +err.response?.data?.code === 1001
        ) {
          postMessage.postToGuide({
            login: true,
            url: window.location.href,
          });
          let url = encodeURIComponent(window.location.href);
          console.log(url, "跳转url");
          window.location.href = `http://ssa.jd.com/sso/login?ReturnUrl=${url}`;
        } else {
          return Promise.reject(err);
        }
      }
    );
  }
  mergeOptions(options) {
    return {
      baseURL: options.batchFlag ? baseUploadUrl : baseURL,
      timeout: this.timeout,
      ...options,
    };
  }
  request(options) {
    const instance = axios.create(); // 创建axios实例
    // 每个实例的拦截器和其他人无关，如果使用全局的实例 我想给每次请求单独配置拦截器就做不到了
    this.setInterceptors(instance);
    const opts = this.mergeOptions(options);
    return instance(opts);
  }
  get(url, data, options) {
    return this.request({
      withCredentials: true,
      method: "get",
      url,
      params: data,
      ...options,
    });
  }
  post(url, data, batchFlag, headers) {
    return this.request({
      withCredentials: true,
      method: "post",
      url,
      headers: batchFlag
        ? Object.assign({}, headers, { source: "OPER" })
        : {
            "Content-Type": "application/json",
          },
      data: data,
      batchFlag,
    });
  }
}
export default new HttpRequest();

使用：

// 接口抽离的文件
export default {
  getProductLineList: "/productOper/brandAudit/list",
};

import axios from "@/utils/request";
import config from "./config/attribute";

export const getProductLineList = (params) =>
  axios.post(config.getProductLineList, { ...params });