Discussion on: React and components, axios

[tq-bit]

Then try the following, given you have axios installed

• Add a folder called 'mixins' to your project
• Create a new file called myAxios.js inside of it
• Add the following code to it:

import axios from 'axios';

// Replace the baseUrl with your backend root path
const myAxios = axios.create({
 baseUrl: 'http://localhost:3000/api',
 timeout: 1000,
 headers: {},
});

export default myAxios;

Then, in the component in which you'd like to use the instance:

• Import the 'myAxios' instance
• Use the normal http methods to target your api's endpoints
• If you need customized options, you can add them here as well, they'll be merged with the ones of the instance

// On top of your component
import appInstance from '@/mixins/myAxios.js';

// Inside your component's methods. Replace /endpoint with your path:
appInstance.get('/endpoint').then(response => console.log(response.data))

I've only tried this in Vue and Vanilla, in React it cannot be too different though :)