How to declare 2 axios instance for different bearer token?

Question

I want to declare 2 axios instance,so 1 is for API call using access_token,another 1 is using refresh_token.

So I have a code like this:

config.js

import axios from 'axios';

const axiosAccessClient =function () {
    const defaultOptions = {
        baseURL: 'my_url',
        headers: {
            'Content-Type': 'application/json',
        }
    };

    let instance = axios.create(defaultOptions);

    instance.interceptors.request.use(function (config) {
        const token = localStorage.getItem('access_token');

        config.headers.Authorization =  token ? `Bearer ${token}` : '';
        return config;
    });

    return instance;
};

const axiosRefreshClient =function () {
    const defaultOptions = {
        baseURL: 'my_url',
        headers: {
            'Content-Type': 'application/json',
        }
    };

    let instance = axios.create(defaultOptions);

    instance.interceptors.request.use(function (config) {
        const token = localStorage.getItem('refresh_token');

        config.headers.Authorization =  token ? `Bearer ${token}` : '';
        return config;
    });

    return instance;
};

export {
    axiosAccessClient,
    axiosRefreshClient
}

So in my Request.js I do something like this:

import {axiosAccessClient,axiosRefreshClient} from "./config";

static async access(url,body) {

        return await axiosAccessClient.post(url, body)
            .then(function (response) {
                return response;
        }).catch(function (error) {
            throw error;
        })
    }

static async refresh(url,body){
        return await axiosRefreshClient.post(url, body)
            .then(function (response) {
                return response;
            }).catch(function (error) {
                throw error;
            })
    }

but when I run the app,it crash at the point of access() in Request.js show this error:

_AxiosConfig__WEBPACK_IMPORTED_MODULE_2__.axiosAccessClient.post is not a function

But if I do the following:

export default axiosAccessClient() in config.js,

import axiosAccessClient from "./config" in Request.js

then the code work(which is weird),but by this I cant access axiosRefreshClient from refresh() in Request.js

Question:

Can somebody tell me why is this happen? I read all this example,but still cant figure it out:

this question

this question and so on

How can solve this?? Export multiple function from a single file

`await axiosAccessClient.post(url, body)` fails because `axiosAccessClient` is a function. You need `await axiosAccessClient().post(url, body)` — , Dec 25 '19 at 13:01

score 1 · Accepted Answer · 2019-12-25T13:17:40.190

1

Your config.js exports functions; you need to rewrite it so it exports the result of the function calls instead, i.e. the instances.

// change name of functions
function generateAccessClient() {
  ..
}

// create instances
const axiosAccessClient = generateAccessClient();
const axiosRefreshClient = generateRefreshClient();

// export them
export {
    axiosAccessClient,
    axiosRefreshClient
}

This way you can import both. Having a default export is unrelated to your problem, you just accidentally solved it by adding the () at the end.

Another way is to do this:

const axiosAccessClient = (function () {
    ...
})();

Same for axiosRefreshClient.

Now your original code will work.

edited Dec 25 '19 at 13:17

answered Dec 25 '19 at 13:04

Yeah, sorry, this is embarrassing. I fixed it and it should work now. – Dec 25 '19 at 13:18
Really thank you your help!! and the answer is easy to understand – ken Dec 25 '19 at 13:22

score 0 · Answer 2 · answered Dec 25 '19 at 13:04

Your two functions (axiosAccessClient and the other) return an axios instance, but the function itself is not an axios instance (that's why you can't call .post() on it). You should create the two clients in the same module and save them as const variables, and then export the instances (instead of functions that create instances). It makes no sense to re-create the same instance every time you wish to make a request. The parameters of the instance do not change, so saving the instance is better.

How to declare 2 axios instance for different bearer token?

2 Answers2