Vue 3 中使用组合式 API 和 Axios 进行 HTTP 请求的完整指南

2024-03-12 05:29:19

使用组合式 API 和 Axios 在 Vue 3 中轻松进行 HTTP 请求

引言

在当今快速发展的网络世界中，对 HTTP 客户端库的需求不断增长，因为它们简化了网络请求并提高了 Web 应用程序的效率。Axios 是一个流行的 HTTP 客户端库，它提供了一个简单的接口，用于执行 GET、POST 和其他类型的 HTTP 请求。本文将指导您如何在 Vue 3 中使用组合式 API 和 Axios 集成，以便轻松地向您的应用程序添加网络请求功能。

配置 Axios

在 Vue 3 中配置 Axios 的第一步是创建一个专门的插件来存储 Axios 配置信息。通过这种方式，您可以轻松地在您的应用程序中管理和访问 Axios 实例。

// plugins/axios.ts

import axios, { AxiosInstance } from 'axios';

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $axios: AxiosInstance;
  }
}

const api = axios.create({
  baseURL: 'https://localhost:7281',
  headers: { 'Content-type': 'application/json' },
});

export default api;

在代码片段中，我们创建了一个 Axios 实例 api，并配置了 baseURL 和 headers。我们还声明了 $axios 属性，以便在 Vue 组件中轻松访问它。

注册插件

要使用该插件，您需要在 Vue 应用程序的入口文件中注册它：

// main.ts

import { registerPlugins } from './plugins';

const app = createApp(App);
registerPlugins(app);
app.mount('#app');

这将确保 Axios 插件在应用程序启动时被初始化并可以被应用程序中的组件使用。

使用 Axios

一旦 Axios 插件被注册，您就可以在 Vue 组件中使用它来进行 HTTP 请求：

<script setup lang="ts">
import { ref } from 'vue';
import axios from 'axios';

const data = ref(null);

axios.get('/data').then(response => {
  data.value = response.data;
});
</script>

在代码片段中，我们使用 Axios 从 /data 端点获取数据，然后将其存储在响应式 data 变量中。

问题和解决方案

有时，您可能会遇到 Axios 请求使用本地主机（localhost:3000）而不是配置的 baseURL 的问题。这是因为在您的 Axios 配置中，您使用 api.get('/Account')，其中路径不包含 baseURL。

要解决这个问题，您可以使用 Axios 的 defaults.baseURL 属性，它允许您设置所有请求的默认 baseURL：

// plugins/axios.ts

const api = axios.create({
  defaults: {
    baseURL: 'https://localhost:7281',
  },
  headers: { 'Content-type': 'application/json' },
});

通过将 baseURL 设置为默认值，所有请求都将自动使用它，除非另有指定。

因此，您可以在 Vue 组件中使用以下代码：

<script setup lang="ts">
import { ref } from 'vue';
import axios from 'axios';

const data = ref(null);

axios.get('/Account').then(response => {
  data.value = response.data;
});
</script>