axios封装，aip接口统一管理

首先创建request.ts，在里面创建axios实例，并做请求响应拦截器的处理

import axios from "axios";
import { ElMessage } from 'element-plus'


//1. 创建新的axios实例，
const service = axios.create({
    // 超时时间 单位是ms，这里设置了3s的超时时间
    timeout: 3 * 1000,
  });
  
  // 2.请求拦截器
   service.interceptors.request.use(
     (config) => {
      //  发请求前做的一些处理，数据转化，配置请求头，设置token,设置loading等，根据需求去添加
        config.headers = {
            "Content-Type": "application/x-www-form-urlencoded", //配置请求头
          'x-token': localStorage.getItem('token') ? localStorage.getItem('token') : '',
        };
      
       return config;
     },
     (error) => {
       Promise.reject(error);
     }
   );
  
  // 3.响应拦截器
  service.interceptors.response.use(
    (response) => {
      //接收到响应数据并成功后的一些共有的处理，关闭loading等
      return response;
    },
    (error) => {
      /***** 接收到异常响应的处理开始 *****/
      if (error && error.response) {
        // 1.公共错误处理
        // 2.根据响应码具体处理
        console.log(error.response.status,'error.response.status');
        
        switch (error.response.status) {
          case 400:
            error.message = error.response.data.msg;
            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")) {
          ElMessage.closeAll()
          ElMessage({
              message: '服务器响应超时，请刷新当前页',
              type: 'error',
          })
        }
        error.message = "连接服务器失败";
      }
      ElMessage.closeAll()
      ElMessage({
          message: error.message,
          type: 'error',
      })
      /***** 处理结束 *****/
      //如果不需要错误处理，以上的处理过程都可省略
      return Promise.resolve(error.response);
    }
  );
  //4.导入文件
  export default service;

接着创建http.ts,对常用四种请求方式进行统一封装

import request from "./request";

const http = {
    /**
     * methods: 请求
     * @param url 请求地址
     * @param params 请求参数
     */
    get(url: string, params?: object) {
        const config: any = {
            method: "get",
            url: url,
        };
        if (params) config.params = params;
        return request(config);
    },
    post(url: string, params?: object) {
        const config: any = {
            method: "post",
            url: url,
        };
        if (params) config.data = params;
        return request(config);
    },
    put(url: string, params?: object) {
        const config: any = {
            method: "put",
            url: url,
        };
        if (params) config.data = params;
        return request(config);
    },
    delete(url: string, params?: object) {
        const config: any = {
            method: "delete",
            url: url,
        };
        if (params) config.params = params;
        return request(config);
    },
};
//导出
export default http;

最后创建api.js 在次进行接口的封装

import http from "../utils/http";

const baseUrl = () => {
    return process.env.NODE_ENV === "development"
        ? (window as any).g.development.BASEURL + "/api"
        : (window as any).g.production.BASEURL;
};

/**
 * @description:  预案
 * */

// 预案列表
export const getPlanList = () => {
    return http.get(`${baseUrl()}/api/plan/list`);
};

// 新增预案
export const addPlan = (params: object) => {
    return http.post(`${baseUrl()}/api/plan`, params);
};

// 预案更新
export const updatePlan = (id: number, params: object) => {
    return http.put(`${baseUrl()}/api/plan/${id}`, params);
};

// 预案删除
export const deletePlan = (id: number) => {
    return http.delete(`${baseUrl()}/api/plan/${id}`);
};

就这样，一个简单的接口封装就完成了，可以大大提高我们工作中的开发效率