在 Vite + Vue 3.0 + TS 中封装 Axios：终极指南

2023-09-16 22:06:10

在当今快节奏的网络开发环境中，高效的网络请求处理至关重要。Axios 库因其易用性、可扩展性和与流行框架（如 Vue.js）的无缝集成而深受开发者的喜爱。在这篇文章中，我们将踏上一个全面之旅，探索如何在 Vite + Vue 3.0 + TypeScript（TS）堆栈中巧妙地封装 Axios，为你的项目赋能。

了解 Axios

Axios 是一个基于 Promise 的 HTTP 客户端，以其简洁、一致的语法而著称。它提供了对各种 HTTP 请求的无缝支持，包括 GET、POST、PUT、PATCH 和 DELETE。此外，它还提供了一个优雅的拦截器机制，允许你轻松定制 HTTP 请求和响应。

在 Vite + Vue 3.0 + TS 中安装 Axios

要开始使用 Axios，首先在你的项目中安装它：

npm install axios

或者，如果你使用的是 yarn：

yarn add axios

创建 Axios 实例

一旦你安装了 Axios，就可以创建一个实例：

import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: 'http://localhost:3000',
  timeout: 1000,
});

在这里，我们指定了基准 URL 和超时持续时间，但你可以根据需要定制这些选项。

封装 Axios

为了在 Vue 3.0 组件中轻松使用 Axios，我们将其封装在一个 TypeScript 模块中：

import axios from 'axios';

export const axiosInstance = axios.create({
  baseURL: 'http://localhost:3000',
  timeout: 1000,
});

然后，在 Vue 组件中导入并使用这个模块：

<script>
import { axiosInstance } from '@/axios';

export default {
  setup() {
    // 使用 axiosInstance 发送请求
    axiosInstance.get('/api/users').then((response) => {
      console.log(response.data);
    });
  },
};
</script>

添加类型支持

为了获得最佳的开发体验，我们还可以为 Axios 实例添加 TypeScript 类型：

import axios, { AxiosInstance } from 'axios';

export const axiosInstance: AxiosInstance = axios.create({
  baseURL: 'http://localhost:3000',
  timeout: 1000,
});