vue axios 配置多个baseURL

原创

mob64ca12e4972a 2024-07-21 09:36:10 ©著作权

文章标签 ios Vue javascript 文章分类 iOS 移动开发

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

vue axios 配置多个baseURL

在开发Vue应用时，我们经常需要与后端进行数据交互。axios 是一个非常流行的HTTP客户端，它允许我们发送异步请求。然而，在一个项目中，我们可能会遇到需要配置多个 baseURL 的情况。本文将介绍如何在 Vue 中使用 axios 配置多个 baseURL。

流程图

首先，我们通过流程图来了解整个配置过程：

flowchart TD
    A[开始] --> B[安装axios]
    B --> C[创建axios实例]
    C --> D[配置baseURL]
    D --> E[使用axios实例]
    E --> F[结束]

安装axios

在开始之前，我们需要确保已经安装了axios。可以通过以下命令安装：

npm install axios

创建axios实例

在Vue项目中，我们通常会将axios的配置放在一个单独的文件中，以便于管理和复用。首先，创建一个名为 http.js 的文件，并在其中创建axios实例：

import axios from 'axios';

const http = axios.create({
  baseURL: '
  timeout: 5000
});

export default http;

配置多个baseURL

为了配置多个 baseURL，我们可以在 http.js 文件中定义一个对象，将不同的 baseURL 映射到不同的 axios 实例：

import axios from 'axios';

const instances = {
  main: axios.create({
    baseURL: '
    timeout: 5000
  }),
  secondary: axios.create({
    baseURL: '
    timeout: 5000
  })
};

export default instances;

使用axios实例

在组件中，我们可以根据需要选择使用不同的 axios 实例：

import instances from '@/utils/http';

export default {
  methods: {
    fetchData() {
      instances.main.get('/data')
        .then(response => {
          console.log(response.data);
        })
        .catch(error => {
          console.error(error);
        });
    },
    fetchSecondaryData() {
      instances.secondary.get('/data')
        .then(response => {
          console.log(response.data);
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};

甘特图

为了更好地理解整个过程，我们可以使用甘特图来表示：

gantt
    title Vue Axios 配置多个 baseURL
    dateFormat  YYYY-MM-DD
    section 安装axios
    安装axios :done, des1, 2022-01-01,2022-01-02
    
    section 创建axios实例
    创建axios实例 :active, des2, 2022-01-03, 3d
    
    section 配置多个baseURL
    配置多个baseURL : 2022-01-06, 2022-01-07
    
    section 使用axios实例
    使用axios实例 : 2022-01-08, 2022-01-09