How to use 2 instances of Axios with different baseURL in the same app ( vue.js )

In a Vue.js application, if you need to communicate with two backend services that have different baseURLs, you can achieve this by creating two distinct Axios instances. Each instance can be configured with specific baseURLs, timeout settings, request headers, and more, allowing you to use different instances for various API requirements. Below, I will provide a detailed explanation of how to create and utilize these two Axios instances.

Step 1: Installing Axios

First, ensure that Axios is already installed in your project. If not, you can install it using npm or yarn:

bash
npm install axios

or

bash
yarn add axios

Step 2: Creating Axios Instances

You can create a dedicated file for configuring Axios in your Vue.js project, such as axios-config.js. In this file, you can define two distinct Axios instances:

javascript
import axios from 'axios';

// Create the first Axios instance
const axiosInstance1 = axios.create({
  baseURL: 'https://api.example.com', // Replace with the baseURL for the first API
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

// Create the second Axios instance
const axiosInstance2 = axios.create({
  baseURL: 'https://api.anotherexample.com', // Replace with the baseURL for the second API
  timeout: 2000,
  headers: {'X-Custom-Header': 'baz'}
});

export { axiosInstance1, axiosInstance2 };

Step 3: Using Axios Instances in Components

In your Vue component, you can import these two Axios instances and use them as needed. For example:

javascript
<template>
  <div>
    <h1>User Data</h1>
    <p>{{ userInfo }}</p>
    <h1>Product Data</h1>
    <p>{{ productInfo }}</p>
  </div>
</template>

<script>
import { axiosInstance1, axiosInstance2 } from './axios-config';

export default {
  data() {
    return {
      userInfo: null,
      productInfo: null
    };
  },
  mounted() {
    this.fetchUserInfo();
    this.fetchProductInfo();
  },
  methods: {
    fetchUserInfo() {
      axiosInstance1.get('/users/1')
        .then(response => {
          this.userInfo = response.data;
        })
        .catch(error => {
          console.error('Error fetching user data:', error);
        });
    },
    fetchProductInfo() {
      axiosInstance2.get('/products/1')
        .then(response => {
          this.productInfo = response.data;
        })
        .catch(error => {
          console.error('Error fetching product data:', error);
        });
    }
  }
};
</script>

In the above example, axiosInstance1 is used to fetch user information from the first API, while axiosInstance2 is used to fetch product information from the second API. This approach allows you to clearly manage API calls from multiple sources, maintaining code cleanliness and maintainability.

Summary

Using distinct Axios instances helps manage different API sources within the same Vue.js application, making the code more modular and easier to maintain. Each instance can have its own configuration, such as baseURL, timeout settings, and request headers, providing great flexibility to accommodate various backend service requirements.