Wait for Axios Request Interceptor to complete before sending another ajax call

Question

Wait for Axios Request Interceptor to complete before sending another ajax call

One feature I have added is a request interceptor for all axios calls. This interceptor checks the JWT token and automatically refreshes it if necessary.

axios.interceptors.request.use((config) =>{

    const currentState = store.getState(); // get updated state
    const currentTime = Math.floor( new Date().getTime() / 1000 );

    if( 
        !currentState.app.jwtRefreshOnRequest 
        && currentTime >= currentState.jwt.expires - 120
        && currentState.jwt.refresh_before > currentTime
    ){ // token expiring in 2 minutes, trigger refresh    

        //dispatch({type: 'JWT_REFRESH_REQUEST'});
        axios.get( API_BASE_URL + '/auth/refresh')
            .then(function(response){
                // dispatch({type: 'JWT_REFRESH_SUCCESS', payload: response.data});
                axios(config).then(resolve, reject);
            })
            .catch(function(err){               
                reject(err);
        });

    }       

    return config;
});

Although this code successfully triggers token refresh and saves the new one, there's an issue where the original call does not wait for the interceptor request to finish, resulting in the use of the expired token.

Therefore, it seems like I need to make synchronous calls from the interceptor.

javascript ajax axios

Answer 1

Answer №1

It's crucial to avoid synchronous calls when making HTTP requests in order to prevent your application from hanging.

The key here is to ensure that all of your calling code is asynchronous - whether you're using callbacks, promises, or anything async-related, everything should be handled asynchronously.

When working with axios.get, it's important to remember that it returns a Promise, which keeps track of the asynchronous HTTP request and resolves once it's complete. Instead of returning the config, you need to return this promise.

To achieve this, you can create a new Promise - if a new token HTTP request is necessary, it will wait for it; otherwise, it can resolve immediately.

axios.interceptors.request.use(config =>
    new Promise((resolve, reject) => {
        // ... your code ...

        axios.get( API_BASE_URL + '/auth/refresh')
            .then(response => {
                const newConfig = getConfigFromResponse(response);
                resolve(newConfig);
            }, reject);

        resolve(config);
    })
});

When you encounter the then method, you're dealing with a Promise, indicating that everything should return a Promise when working asynchronously.

Using async/await makes this process much simpler. These modern browser-supported keywords allow you to place the Promise call inline with the await keyword, streamlining the code significantly.

axios.interceptors.request.use(async config =>

    // ... your code ...

    if(/* We need to get the async token */) {
        const response = await axios.get( API_BASE_URL + '/auth/refresh');
        config = getConfigFromResponse(response);
    }

    return config;
});

Answer 2

It's crucial to avoid synchronous calls when making HTTP requests in order to prevent your application from hanging.

The key here is to ensure that all of your calling code is asynchronous - whether you're using callbacks, promises, or anything async-related, everything should be handled asynchronously.

When working with axios.get, it's important to remember that it returns a Promise, which keeps track of the asynchronous HTTP request and resolves once it's complete. Instead of returning the config, you need to return this promise.

To achieve this, you can create a new Promise - if a new token HTTP request is necessary, it will wait for it; otherwise, it can resolve immediately.

axios.interceptors.request.use(config =>
    new Promise((resolve, reject) => {
        // ... your code ...

        axios.get( API_BASE_URL + '/auth/refresh')
            .then(response => {
                const newConfig = getConfigFromResponse(response);
                resolve(newConfig);
            }, reject);

        resolve(config);
    })
});

When you encounter the then method, you're dealing with a Promise, indicating that everything should return a Promise when working asynchronously.

Using async/await makes this process much simpler. These modern browser-supported keywords allow you to place the Promise call inline with the await keyword, streamlining the code significantly.

axios.interceptors.request.use(async config =>

    // ... your code ...

    if(/* We need to get the async token */) {
        const response = await axios.get( API_BASE_URL + '/auth/refresh');
        config = getConfigFromResponse(response);
    }

    return config;
});

Wait for Axios Request Interceptor to complete before sending another ajax call

Answer №1

Similar questions

Sliding elements horizontally with jQuery from right to left

Transferring information from socket.io to vue.js

Retrieving information from an object using a randomly generated identifier

What is the best method to detect a change in scroll position on a webpage using JavaScript?

Using jQuery with AJAX for retrieving data and returning a value

Sharing JavaScript code between Maven modules can be achieved by following these steps

Use vue.js to add a block of content after every sixth iteration in a loop

Tips for unit testing an Angular Service that is primarily responsible for redirecting to an external page from the application

jQuery for validating input fields with positive integers only using regular expressions

Tips for adding an asterisk to the label of a Material-UI switch component

Using Flask to pass variable data from one route to another in Python using the `url

When directed to a different page, Fetch does not activate

How can I display SQL results in a Jade page using Node, Express, and MySQL?

Issue with parsing JSON data in jQuery Ajax requests

Exploring the world of SPA: Implementing Data Transfer Objects

Spring Boot Ajax Parse Error - issue with returning object to Ajax success function

Alternative way to search for child elements within an element without the use of jQuery

Unfortunately, CSS3 PIE is not compatible with border-radius and box-shadow properties

Issue with displaying a vTable component in VueJS / Vuetify

Encountering an issue with Next.js React SSR using styled-jsx: unable to access the 'state' property as