vue3.2+ts封装axios

1.创建utils文件夹/server下面创建index.ts，代码如下：

import axios, { AxiosRequestConfig } from "axios";

import { BASE_URL, TIMEOUT } from "@/config/axios";
/**
 * @说明 接口请求返回信息 (按照自己的实际情况分配基础请求格式)
 */
// export interface requestReturnType<T = any> {
//   /**
//    * @说明 返回code状态码
//    */
//   code: number;
//   /**
//    * @说明 返回错误code状态码
//    */
//   errcode?: number;
//   /**
//    * @说明 返回信息说明
//    */
//   msg: string;
//   /**
//    * @说明 返回总体数据
//    */
//   data: T;
//   /**
//    * @说明 返回请求成功是否
//    */
//   success: boolean | null;
// }

export interface requestReturnType<T = any> {
  /**
   * @说明 返回code状态码
   */
  code: number;
  /** 数据内容 */
  content: T;
}

/** 创建axios实例 */
const instance = axios.create({
  timeout: TIMEOUT, // 超时时间
  //   baseURL: BASE_URL,
  headers: {
    "Content-Type": "application/json",
  },
});

/** 添加请求拦截 */
instance.interceptors.request.use(
  (config) => {
    console.log("config", config);
    // if (config.showLoading) {
    //   showFullScreenLoading()
    // }
    // let token = localStorage.getItem("x-auth-token");
    // if (token) {
    //添加请求头
    //config.headers["Authorization"]="Bearer "+ token
    // }
    /** 请求拦截-可做网络加载开始动作 */
    // ...
    return config;
  },
  (err) => {
    return Promise.reject(err);
  }
);

/**  响应拦截 */
instance.interceptors.response.use(
  (response) => {
    // if (response.config.showLoading) {
    //   tryHideFullScreenLoading()
    // }
    /** 响应拦截-可做网络加载完成动作 */
    // ...
    return response;
  },
  (error) => {
    // tryHideFullScreenLoading()
    console.log(`error:`, error);
    if (error && error.response) {
      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 {
      error.message = "连接到服务器失败";
    }
    /** 错误逻辑处理，此处可在页面弹框处理 */
    // ...
    return Promise.reject(error.message);
  }
);
/** 代理请求 */
// 注意此处的泛型T，默认值时any；兼容未提供指定类型的方式
async function httpProxy<T = any>(
  config: AxiosRequestConfig
): Promise<requestReturnType<T>> {
  let resData = await instance(config);
  return resData.data;
}

export default httpProxy;

2.创建api文件夹（里面存放所有接口）ceshi.ts

import httpProxy from "@/utils/server"; // 拿到我们刚封装的axios
import { URL } from "@/config/axios"; // 根据环境变量拿到的域名服务地址
/** 导入接口返回类型 */
import { qinghuaType, testType } from "./types/ceshi";

/** 请求接口：情话 
 ** 接口地址：https://api.uomg.com/api/rand.qinghua
 ** 返回格式：json/html
 ** 请求方式：get/post
 ** 请求示例：https://api.uomg.com/api/rand.qinghua?format=json
 ** 请求参数说明：

 ** 名称	必填	类型	说明
 **  format	否	string	选择输出格式[json|text|js]
 ** 返回参数说明：
 **
 ** 名称	类型	说明
  **  code	string	返回的状态码
  **  content	string	返回文本信息
  **  msg	string	返回错误提示信息！
 * 
*/

// 参数泛型 <T extends Record<string, any>>  表示，给我的参数类型，必须约束于对象形式 即{key：value,...}模式，key类型string，value类型为any   &&&&&  可根据实际情况变更此params类型
export async function getQingHua<T extends Record<string, any>>(
  params: T | undefined
) {
  /** @qinghuaType 返回台参数类型 */
  return await httpProxy({
    url: URL + "/users",
    method: "GET",
    params,
  });
}

export async function ceshi<T extends Record<string, any>>(
  data: T | undefined,
  data1: T
) {
  /** @testType 返回参数类型 */
  return await httpProxy({
    url: URL + "/rand.qinghua",
    method: "POST",
    data: {
      data,
      data1,
    },
  });
}

3.页面使用

import { getQingHua, ceshi } from "@/api/ceshi/ceshi";



const add = async () => {
  const a = await getQingHua({ format: "json" });
  console.log(a);
};