Vue3+TypeScript封装axios并进行请求调用的实现

我将按照以下结构为您详细讲解“Vue3+TypeScript封装axios并进行请求调用的实现”的完整攻略：

1. 简介
2. 安装axios和TypeScript依赖
3. 创建一个axios实例
4. 封装axios请求方法
5. 在Vue3组件中使用封装的axios

1. 简介

Vue3是Vue.js框架的最新版本，它带来了很多新的特性和性能提升。与此同时，由于TypeScript的类型检测机制可以让我们在编写代码时及时发现问题，避免出现很多常见的错误。本攻略将结合Vue3和TypeScript使用axios进行封装的方法，实现一套优雅而健壮的API层，方便我们的开发。

2. 安装axios和TypeScript依赖

在开始之前，首先需要在您的Vue3项目中安装axios和TypeScript的依赖。您可以通过以下命令进行安装：

npm install axios
npm install typescript -D

其中，-D表示这是一个开发环境的依赖。

3. 创建一个axios实例

我们可以通过axios.create方法创建一个axios实例，进行实例的一些默认配置，比如请求的根路径、请求的超时时间等：

import axios, { AxiosInstance } from "axios";

const instance: AxiosInstance = axios.create({
  baseURL: "https://some-domain.com/api/",
  timeout: 5000,
});

这里创建了一个名为instance的axios实例，它的请求根路径为https://some-domain.com/api/，超时时间为5秒。

4. 封装axios请求方法

为了让开发更具有可维护性和可读性，我们可以将常用的axios请求方法进行封装，以便于实现我们的业务逻辑。下面给出一个封装get请求的示例：

import { AxiosInstance, AxiosResponse } from "axios";

interface ResponseData {
  code: number;
  message: string;
  data: any;
}

export const get = async function (
  axiosInstance: AxiosInstance,
  url: string,
  params?: any
): Promise<any> {
  const { data } = await axiosInstance.get<ResponseData>(url, {
    params,
  });
  if (data.code === 0) {
    return data.data;
  } else {
    throw new Error(data.message);
  }
};

这里封装了一个get请求的方法，接受 axiosInstance、url 和 params 三个参数。其中，axiosInstance 是我们在上一步中创建的axios实例，url 是请求的URL，params 是请求需要的参数。这个方法返回一个Promise，它可以异步获取到请求结果，并返回数据部分。如果请求成功，则返回的是数据部分。否则，就会抛出一个错误。

需要注意的是，我们添加了类型参数ResponseData，以便于在请求成功后获取响应的数据类型和字段。这里的 ResponseData 类型也需要我们自己定义，它由三个字段组成，分别是 code、message 和 data。其中，code 表示接口返回的状态码，message 表示接口返回的信息，data 表示接口返回的数据。

除了 get 方法之外，我们还可以根据具体的业务需求封装 post、put、delete 等请求方法。

5. 在Vue3组件中使用封装的axios

在Vue3组件中使用封装的axios非常简单。我们只需要引入之前封装好的请求方法，并在组件的方法中调用即可。下面给出一个使用封装的 axios 请求数据的示例：

<template>
  <div>{{ data }}</div>
</template>

<script lang="ts">
  import { defineComponent, onMounted, ref } from "vue";
  import { instance } from "@/utils/request";
  import { get } from "@/utils/http";

  export default defineComponent({
    setup() {
      const data = ref([]);

      onMounted(async () => {
        try {
          data.value = await get(instance, "/test/api/getData");
        } catch (error) {
          console.log(error);
        }
      });

      return { data };
    },
  });
</script>

在这个例子中，我们使用了Vue3的defineComponent API先定义了组件，并定义了一个响应式数据data。在onMounted钩子函数中，我们使用之前封装好的get方法进行异步获取数据，并将其赋值给data数据。

这样，我们就成功地使用封装好的axios进行了网络请求。在我们的 Vue3 项目中，这样的代码可以让我们更加地具有可读性和可维护性，同时避免了许多常见的错误。