axios 获取数据方案

目录

---

在 Vue 前端项目中，经常要获取好多数据，比如获取用户信息，获取文章列表，获取评论列表等等。

每个数据都要先用 ref 定义一个变量，然后再用 axios 获取数据，再把数据赋值给变量。很麻烦，并且这些过程非常类似，所以可以把这些过程封装起来，简化代码。

// 通过api获取数据
import axios, { AxiosResponse } from "axios";
import { ref, Ref } from "vue";

/**
 * 通过api获取数据
 * @param req  axios请求或者url
 * @returns  返回数据
 */
export const getDataApi = async (
  req: Promise<AxiosResponse<any, any>> | string
): Promise<any> => {
  if (typeof req === "string") {
    req = axios.get(req);
  }
  const res = await req;
  if (res.status !== 200) {
    throw new Error(res.statusText);
  } else if (res.data.code !== 0) {
    throw new Error(res.data.message);
  } else {
    return res.data.data;
  }
};

/**
 * 通过api获取数据 ref格式
 * @param req axios请求或者url
 * @param defaultData 默认数据
 * @returns 返回数据
 */
export const getRefDataApi = async (
  req: Promise<AxiosResponse<any, any>> | string,
  defaultData: Ref<any> = ref(null)
): Promise<Ref<any>> => {
  try {
    if (typeof req === "string") {
      req = axios.get(req);
    }
    const res = await req;
    if (res.status !== 200) {
      throw new Error(res.statusText);
    } else if (res.data.code !== 0) {
      throw new Error(res.data.message);
    } else {
      return ref(res.data.data);
    }
  } catch (e) {
    console.error(e);
    return defaultData;
  }
};