封装axios，对于不同情况下的headers做定制化处理

封装axios

1.在项目中安装aixos

 npm install axios

2.创建request.js文件用于配置请求拦截和请求响应

// 导入axios
import axios from "axios";
// 使用element-ui Message做消息提醒
import { Message } from "element-ui";

//1. 创建新的axios实例，
const service = axios.create({
// 这里不做baseURL处理,一个项目可能有多个不同的后台请求头
  timeout: 3 * 1000,
});
// 2.请求拦截器
service.interceptors.request.use(
  (config) => {
    //发请求前做的一些处理，数据转化，配置请求头，设置token,设置loading等，根据需求去添加
    config.data = JSON.stringify(config.data); //数据转化,也可以使用qs转换
    //配置请求头 这里不做处理在http做具体处理
    // config.headers = {
    //   "Content-Type": "application/json",
    // };
    const token = window.localStorage.getItem("userInfo"); //这里取token之前，你肯定需要先拿到token,存一下
    if (token) {
      // config.params = {'token':token} //如果要求携带在参数中
      config.headers.token = token; //如果要求携带在请求头中
    }
    return config;
  },
  (error) => {
    Promise.reject(error);
  }
);

// 3.响应拦截器
service.interceptors.response.use(
  (response) => {
    //接收到响应数据并成功后的一些共有的处理，关闭loading等
    return response;
  },
  (error) => {
    /***** 接收到异常响应的处理开始 *****/
    if (error && error.response) {
      // 1.公共错误处理
      // 2.根据响应码具体处理
      switch (error.response.status) {
        case 400:
          error.message = "错误请求";
          break;
        case 401:
          error.message = "未授权，请重新登录";
          break;
        case 403:
          error.message = "拒绝访问";
          break;
        case 404:
          error.message = "请求错误,未找到该资源";
          break;
        case 405:
          error.message = "请求方法未允许";
          break;
        case 408:
          error.message = "请求超时";
          break;
        case 500:
          error.message = "服务器端出错";
          break;
        case 501:
          error.message = "网络未实现";
          break;
        case 502:
          error.message = "网络错误";
          break;
        case 503:
          error.message = "服务不可用";
          break;
        case 504:
          error.message = "网络超时";
          break;
        case 505:
          error.message = "http版本不支持该请求";
          break;
        default:
          error.message = `连接错误${error.response.status}`;
      }
    } else {
      // 超时处理
      if (JSON.stringify(error).includes("timeout")) {
        Message.error("服务器响应超时，请刷新当前页");
      }
      error.message = "连接服务器失败";
    }

    Message.error(error.message);
    /***** 处理结束 *****/
    //如果不需要错误处理，以上的处理过程都可省略
    return Promise.resolve(error.response);
  }
);
export default service;

2.创建http.js文件用于放送请求

import service from "./index.js";

/**
 * 通用请求方法
 * @param {methodType} 请求方式
 * @param {urlName} 接口名称
 * @param {dataParams} 正常传参
 * @param {url}  请求地址
 */
/* 通用请求方法 */
export const request = ({ methodType, url, dataParams }) => {
  methodType = methodType.toUpperCase();
  dataParams = dataParams || "";
  let requestConfig = {
    method: methodType,
    url,
  };
  switch (methodType) {
    case "POST":
    case "PUT":
    case "DELETE":
      requestConfig.headers = { "Content-Type": "application/json" };
      requestConfig.data = dataParams;
      break;
    case "GET":
      requestConfig.headers = {
        "Content-Type": "application/x-www-form-urlencoded",
      };
      requestConfig.params = dataParams;
      break;
    case "UPLOAD":
      requestConfig.headers = { "Content-Type": "application/form-data" };
      requestConfig.method = "POST";
      requestConfig.data = dataParams;
      break;
    // 下载excel zip
    case "DOWNLOAD":
      requestConfig.headers = {
        "Content-Type": "application/x-www-form-urlencoded",
      };
      requestConfig.method = "GET";
      requestConfig.params = dataParams;
      requestConfig.responseType = "blob";
      break;
    // 下载回显图片
    case "GETIMAGE":
      requestConfig.headers = { "Content-Type": "application/json" };
      requestConfig.method = "GET";
      requestConfig.params = dataParams;
      requestConfig.responseType = "blob";
      break;
    default:
      requestConfig.headers = { "Content-Type": "application/json" };
      requestConfig.method = "POST";
      requestConfig.data = dataParams;
      break;
  }
  return service(requestConfig);
};

3.使用http.js 发送请求（建议给每个模块单独创创建不同的api文件方便维护管理）

import { request } from "@/request/http.js";

/**
 * 获取资源列表树结构
 * @returns
 */
export function getResourceListTree() {
  return request({
    methodType: "get",
    url: `${这里使用你需要BASE_URL}/gxtResListEntity/getResourceListTree`,
    dataParams: "",
  });
}```