封装axios

为了方便调用, 因此对axios作了封装
代码:

import axios from "axios";
import { AxiosRequestConfig } from "axios";
 
 
 
export async function request<T, D>(config: AxiosRequestConfig<D>) {
  // 加载中
 
  // 请求数据
  return axios
    .request<T>(config)
    .then((res) => {
      // 请求成功返回
      // 取消 加载中
      if (!res.data) {
        throw new Error("请求错误");
      }
      // 提示msg的信息
      // res.data 是 axios 包装的 AxiosResponse<T> ，再 .data
      // 才是你自己定义的 ResponseData<T>；另外尽可能用 Promise.resolve 包裹起来，
      // 以防 polyfill 时出现兼容问题。
      return Promise.resolve(res.data);
    })
    .catch((e) => {
      console.error(e);
      // 请求错误
      // 取消 加载中
      // 异常捕捉后被你吞了，相当于返回了 Promise<void>；所以需要继续向上抛出。
      return Promise.reject(e);
    });
}
 

使用时:

import { request } from "@/utils/request";
 
// 注意使用这种方法声明, 不能直接为字符串
const method: Method = "GET";
const getData = () => {
  const config = {
	url: "http://localhost:8080/data/review/cards.json",
	method,
	params,
  };
  // IResponse 是返回类型的接口, 内部使用泛型指定ICard[]
  // any对应的是data, 由于为get请求, 所以为any
  request<IResponse<ICard[]>, any>(config).then((response) => {
	if (response.data) {
	  data.value = response.data;
	}
  });
 
};