Vue3 + TypeScript 配置全局 Axios

一、概述

在 Vue3 中使用 TypeScript 配置全局 Axios 是一个常见的需求。Axios 是一个基于 Promise 的 HTTP 客户端，用于发送 HTTP 请求和处理响应。通过全局配置，我们可以在整个应用程序中方便地使用 Axios。

本文将详细介绍如何在 Vue3 中配置全局 Axios，并通过 TypeScript 确保类型安全。

二、配置步骤

下面是配置全局 Axios 的步骤概述：

步骤 描述
1. 安装 Axios 使用 npm 或 yarn 安装 Axios
2. 创建 Axios 实例 创建一个 Axios 实例，并配置基本的请求信息
3. 封装全局 Axios 对象 在 Vue3 中封装全局 Axios 对象，并注入到应用程序
4. 使用全局 Axios 在组件中使用全局 Axios 对象发送请求

接下来，我们将逐步完成这些步骤。

1. 安装 Axios

首先，我们需要安装 Axios。在终端中执行以下命令：

npm install axios

或

yarn add axios

2. 创建 Axios 实例

在项目的 src 目录下创建一个新的 api 目录，并在其中创建一个 axios.ts 文件。在该文件中，我们将创建一个 Axios 实例，并进行一些基本的配置。

// src/api/axios.ts

import axios, { AxiosInstance } from 'axios';

const instance: AxiosInstance = axios.create({
  baseURL: ' // 设置基础 URL
  timeout: 5000, // 设置请求超时时间
  headers: {
    'Content-Type': 'application/json', // 设置请求头
  },
});

export default instance;

在这个示例中，我们使用 axios.create 方法创建了一个 Axios 实例，并传入了一些基本的配置，例如 baseURL、timeout 和 headers。你可以根据实际需求进行配置。

3. 封装全局 Axios 对象

接下来，我们需要在 Vue3 中封装全局 Axios 对象，并注入到应用程序中。在 src/main.ts 文件中进行以下操作：

// src/main.ts

import { createApp } from 'vue';
import App from './App.vue';
import axios from './api/axios';

const app = createApp(App);

app.config.globalProperties.$http = axios;

app.mount('#app');

在这个示例中，我们在创建 Vue 应用程序之前，通过 app.config.globalProperties 将 Axios 实例注册为全局属性 $http。这样，在整个应用程序中，我们就可以通过 this.$http 来访问 Axios 实例。

4. 使用全局 Axios

现在，我们可以在组件中使用全局 Axios 对象来发送请求了。下面是一个示例组件：

<template>
  <div>
    <button @click="fetchData">发送请求</button>
  </div>
</template>

<script>
export default {
  methods: {
    fetchData() {
      this.$http.get('/users')
        .then(response => {
          console.log(response.data); // 在控制台中打印响应数据
        })
        .catch(error => {
          console.error(error); // 在控制台中打印错误信息
        });
    },
  },
};
</script>

在这个示例中，我们在组件的 fetchData 方法中使用了全局 Axios 对象发送了一个 GET 请求，并处理了响应和错误。你可以根据实际需求使用其他的 HTTP 方法，例如 post、put 和 delete。

三、类图

下面是全局 Axios 对象的类图：

classDiagram
    class AxiosInstance {
        <<interface>>
        +get(url: string): Promise<any>
        +post(url: string, data: any): Promise<any>
        +put(url: string, data: any): Promise<any>
        +delete(url: string): Promise<any>
    }

    class VueComponent {
        <<interface>>
        +$http: AxiosInstance
    }

    class App {
        <<component>>
        methods()
    }

    VueComponent --|> AxiosInstance
    App --|> VueComponent

在类图中，我们定义了一个 AxiosInstance 接口，该接口包含了发送请求的各种方法。另外，我们还定义了一个 VueComponent