vue3 axios多个baseurl

原创

mob649e81693c66 2025-01-23 05:49:12 ©著作权

©著作权归作者所有：来自51CTO博客作者mob649e81693c66的原创作品，请联系作者获取转载授权，否则将追究法律责任

使用 Vue 3 和 Axios 实现多个 Base URL

在现代前端开发中，很多项目都会需要与多个后端接口进行交互。为了简化请求代码，我们可以使用 Axios 来设置多个 base URL。本文将带领你了解如何实现这一功能，通过具体的步骤和代码示例，帮助你快速上手。

整体流程

在实现多个 Base URL 时，我们可以遵循以下步骤进行：

步骤	描述
1	安装 Axios
2	创建 Axios 实例
3	配置多个 Base URL
4	使用默认和自定义的 Axios 实例进行请求
5	编写请求示例代码

代码实现步骤

以下是实现多个 Base URL 的具体步骤和示例代码。

1. 安装 Axios

首先，在你的 Vue 3 项目中安装 Axios。如果你使用 npm，可以运行以下命令：

npm install axios

此命令会将 Axios 库添加到你的项目依赖中。

2. 创建 Axios 实例

接下来，我们可以创建一个 Axios 实例。这样可以为其设置默认的配置，并根据需求创建多个实例。

// src/utils/axiosInstance.js
import axios from 'axios';

// 创建 Axios 实例
const instance1 = axios.create({
  baseURL: ' // 第一个 base URL
  timeout: 1000, // 请求超时时间
});

const instance2 = axios.create({
  baseURL: ' // 第二个 base URL
  timeout: 1000,
});

export { instance1, instance2 };

代码解读:

axios.create 创建一个新的 Axios 实例并可以为其设置不同配置，如 baseURL 和 timeout。

3. 配置多个 Base URL

如上所示，我们已创建了两个 Axios 实例 instance1 和 instance2，它们分别指向两个不同的 base URL。

4. 使用 Axios 实例进行请求

我们可以使用这些实例进行 API 请求。我们推荐每个页面或模块都使用对应的 Axios 实例。

// src/api/userApi.js
import { instance1, instance2 } from '../utils/axiosInstance';

// 获取用户数据的 API
export const fetchUserData = async () => {
  try {
    const response = await instance1.get('/user');
    return response.data;
  } catch (error) {
    console.error('Error fetching user data:', error);
    throw error;
  }
};

// 获取产品数据的 API
export const fetchProductData = async () => {
  try {
    const response = await instance2.get('/products');
    return response.data;
  } catch (error) {
    console.error('Error fetching product data:', error);
    throw error;
  }
};

代码解读:

fetchUserData 使用 instance1 进行请求用户数据。
fetchProductData 使用 instance2 进行请求产品数据。

5. 编写请求示例代码

现在，你可以在 Vue 组件中调用利于请求数据的函数。这是一个简单的示例，显示如何在组件中使用这两个 API：

<template>
  <div>
    User Data
    <pre>{{ userData }}</pre>
    Product Data
    <pre>{{ productData }}</pre>
  </div>
</template>

<script>
import { fetchUserData, fetchProductData } from './api/userApi';

export default {
  data() {
    return {
      userData: null,
      productData: null,
    };
  },
  async mounted() {
    this.userData = await fetchUserData();
    this.productData = await fetchProductData();
  },
};
</script>

代码解读:

在组件的 mounted 钩子里，我们调用刚才定义的 fetch 函数来获取用户数据和产品数据。

类图

以下是我们的类图，展示了 Axios 实例和 API 函数之间的关系。

classDiagram
    class AxiosInstance {
        +baseURL: String
        +timeout: Number
        +get(url: String)
        +post(url: String, data: Object)
    }

    class UserApi {
        +fetchUserData()
    }

    class ProductApi {
        +fetchProductData()
    }

    AxiosInstance <|-- UserApi : uses
    AxiosInstance <|-- ProductApi : uses