【速记】aios封装

封装

import axios from "axios";

const errorCode:Record<string,string> = {
  '401': '认证失败，无法访问系统资源',
  '403': '当前操作没有权限',
  '404': '访问资源不存在',
  'default': '系统未知错误'
}

const instance = axios.create({
  baseURL: import.meta.env.VITE_BASE_API,
  timeout: 10000,
});

const goMain = new BroadcastChannel("goMain");

// 请求拦截器
instance.interceptors.request.use(
  function (config: any) {
    //添加userType标识
    config.headers["userType"] = "user";
    //是否携带token
    const isToken: boolean = (config.headers || {}).isToken != false;
    const token = localStorage.getItem("token");
    if (token && isToken) {
      //写入token ---存在且携带
      config.headers["Authorization"] = "Bearer " + token; 
    }

    // get请求映射params参数
    if (config.method === "get" && config.params) {
      let url = config.url + "?" + tansParams(config.params);
      url = url.slice(0, -1);
      config.params = {};
      config.url = url;
    }
    return config;
  },
  function (error: any) {
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  (res: any) => {
    const code: number = res.data.code || 200;
    let msg: string = errorCode[code] || res.data.msg || errorCode["default"];

    // 二进制数据则直接返回
    if (
      res.request.responseType === "blob" ||
      res.request.responseType === "arraybuffer"
    ) {
      return res.data;
    }

    if (code === 401) {
      //登录超时
      let msgData = {
        type: "FedLogOut",
      };
      goMain.postMessage(JSON.stringify(msgData));
      return Promise.reject(new Error("登录超时"));
    } else if (code === 500) {
      //服务端异常
      if (msg.length > 100) {
        msg = "服务端异常";
      }
      console.log('err',msg)
      return Promise.reject(new Error(`服务端异常:${code}==>${msg}`));
    } else if (code !== 200) {
      //其他异常
      return Promise.reject(new Error(`${code}==>${msg}`));
    } else {
      return res.data;
    }
  },
  (error: any) => {
    let { message } = error;
    if (message == "Network Error") {
      message = "后端接口连接异常";
    } else if (message.includes("timeout")) {
      message = "系统接口请求超时";
    } else if (message.includes("Request failed with status code")) {
      message = "系统接口" + message.substr(message.length - 3) + "异常";
    }
    return Promise.reject(error);
  }
);

export default instance;

/**
* 参数处理 ---get--params参数处理
* @param {*} params  参数
*
*encodeURIComponent方法: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent
*/
function tansParams(params: any) {
  let result = ''
  for (const propName of Object.keys(params)) {
      const value = params[propName];
      var part = encodeURIComponent(propName) + "=";
      if (value !== null && value !== "" && typeof (value) !== "undefined") {
          if (typeof value === 'object') {
              for (const key of Object.keys(value)) {
                  if (value[key] !== null && value !== "" && typeof (value[key]) !== 'undefined') {
                      let params = propName + '[' + key + ']';
                      var subPart = encodeURIComponent(params) + "=";
                      result += subPart + encodeURIComponent(value[key]) + "&";
                  }
              }
          } else {
              result += part + encodeURIComponent(value) + "&";
          }
      }
  }
  return result
}

使用

import request from '@/api/_axios_'

//axios_请求示例

//get
export function GetQuery(params: object) {
    return request({
        url: '',
        method: 'get',
        params: params
    })
}

//get
export function GetId(id: string | number) {
    return request({
        url: `/${id}`,
        method: 'get',
    })
}

// post
export function Post(data: object) {
    return request({
        url: '',
        method: 'post',
        data: data
    })
}

// put
export function Update(data: object) {
    return request({
        url: '',
        method: 'put',
        data: data
    })
}

// delete
export function Delete(id: string | number) {
    return request({
        url: `/${id}`,
        method: 'delete'
    })
}


//get --不携带token示例
export function GetNT() {
    return request({
        url: '',
        method: 'get',
        headers: {
            isToken: false
        },
    })
}