开箱即用：Vue3 + TypeScript 中的 Axios 封装指南

2024-02-11 21:17:01

前言

Axios 是一个流行的 JavaScript 库，用于处理 HTTP 请求。它以其简单易用、功能强大而著称，使其成为处理异步网络请求的理想选择。在本文中，我们将重点介绍如何在 Vue3 和 TypeScript 项目中封装 Axios，以简化 HTTP 请求并提高代码的可读性。

理解 Axios 封装

封装是指将复杂代码组织到模块或函数中，以提高其可读性和可维护性。通过封装 Axios，我们可以创建一个可重用的模块，其中包含发送 HTTP 请求所需的所有逻辑。这将简化我们的代码，使之更易于理解和调试。

封装 Axios 的步骤

1. 安装 Axios

首先，我们需要在项目中安装 Axios：

# 使用 npm
npm install axios

# 使用 yarn
yarn add axios

2. 创建 Axios 实例

在 Vue3 项目中，我们通常在 main.ts 文件中创建 Axios 实例：

// main.ts
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import axios from 'axios'

const app = createApp(App)

// 创建 Axios 实例
const axiosInstance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
  },
})

// 将 Axios 实例添加到 Vue 原型上
app.config.globalProperties.$axios = axiosInstance

// 创建 Pinia 存储
const pinia = createPinia()

app.use(pinia)

app.mount('#app')

通过将 Axios 实例添加到 Vue 原型上，我们可以在组件中直接访问它。

3. 在组件中使用 Axios

在组件中，我们可以使用 this.$axios 访问 Axios 实例：

<template>
  <div>
    <button @click="getData">Get Data</button>
  </div>
</template>

<script>
export default {
  methods: {
    getData() {
      // 使用 this.$axios 发送 GET 请求
      this.$axios.get('/api/data')
        .then((response) => {
          // 处理响应
        })
        .catch((error) => {
          // 处理错误
        })
    },
  },
}
</script>