‘Axios’ doesn’t request again after token refresh – react native

I’m using axios with React Native

Now I’m sending request with accessToken to create profile and fix it.

So I made axiosInstace and baseURL.

And in axiosInstance header, I put ‘Authorization’ (accessToken).

The problem is, axios request works when it is before accessToken is expired.
So I can fix the profile several times before expired.

And if the accessToken is expired, the error comes with status code 401.
And my code reissue an accessToken.
Still, reissuing accessToken works!!

However, after reissuing accessToken, sending a new request doesn’t work.

I’m not sure why it doesn’t work.

Can you please help me?

import axios from 'axios';
import EncryptedStorage from 'react-native-encrypted-storage';

const baseURL = '-';
const axiosInstance = axios.create({ baseURL });

let _refreshingPromise = null;

const reissueToken = async () => {
    try {
        const refreshToken = await EncryptedStorage.getItem('refreshToken');

        if (!refreshToken) {
            throw new Error('refreshToken doesnt exist');
        }

        const response = await axios.post(`${baseURL}/auth/renew`, { refreshToken });

        const newAccessToken = response.data.accessToken;
        await EncryptedStorage.setItem('accessToken', newAccessToken);

        return newAccessToken;
    } catch (error) {
        console.error('reissue failed,', error);
        throw error;
    }
};

axiosInstance.interceptors.request.use(
    async (config) => {
        try {
            const accessToken = await EncryptedStorage.getItem('accessToken');
            config.headers['Content-Type'] = 'application/json';
            config.headers['Authorization'] = accessToken;

            console.log('original request's config:', config);
            return config;
        } catch (error) {
            console.error('request interceptor failed:', error);
            return Promise.reject(error);
        }
    },
    (error) => {
        console.error('request interceptor error :', error);
        return Promise.reject(error);
    }
);


axiosInstance.interceptors.response.use(
    (response) => {
        console.log('request succeed!');
        return response;
    },
    async (error) => {
        const { config,response } = error;
        const status = response? response.status : null;

    
        console.log("response status code : ", status);
        if(status === 502) {
            console.log("502 error");
            
        }
        if (status === 401) {
            console.log("start!");
            if (!_refreshingPromise) {
                console.log(_refreshingPromise);
                _refreshingPromise = new Promise((resolve, reject) => {
                    reissueToken()
                        .then((newAccessToken) => {
                            console.log("newToken : ", newAccessToken);
                            config.headers['Authorization'] = newAccessToken;
                            console.log(config.headers.Authorization);

                            axios(config)
                            .then((response) => {
                                
                                console.log('response after request:', response.data);
                                resolve(response); // 요청 성공 시 Promise를 성공 처리
                            })
                            .catch((error) => {
                                console.log("request failed!");
                                reject(error); // 요청 실패 시 Promise를 실패 처리
                            })
                            .finally(() => {
                                _refreshingPromise = null;
                            });
                        })
                        .catch((reissueError) => {
                            reject(new Error('error', reissueError));
                        })
                        .finally(() => {
                            _refreshingPromise = null;
                        });
                });
            }

            return _refreshingPromise;
        }

        return Promise.reject(error);
    }
);

export default axiosInstance;

1. I tried change axios version. – now it is v1.6.8

2. made new Promise to have only 1 request.