Cancel Request if same request called subsequently multiple times is keeping active request too long to get response, Please Help. #2934

kathirr007 · 2020-04-29T15:11:08Z

Issue Description

I'm trying infinite scrolling for list of data fetching from an API. On some condition the same api call is being called multiple times subsequently. I've tried to cancel the multiple axios calls using Cancel API in axios. The requests are getting cancelled, but the one active request taking too long time to response.
The following is the scenario about timing issue i am facing for ex:

The first api call takes the time of about 5.40s
The next active api call after canceling one time takes 10.57s
The next active api call after canceling two times takes 15.90s
The next active api call after canceling three times takes 21.12s
The next active api call after canceling four times takes 25.96s

Please help me to reduce the active api call timing.

Thanks in advance.

Issue Code

Here is the Code I've used to test the axios cancellation. For security reason the API URL is changed.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>

    <title>Document</title>
</head>

<body>
    <div id="app">
        <button @click="getMissions">Get Missions</button>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                axiosCall : null,
            },
            methods: {
                getMissions() {
                    // let
                    // debugger
                    let url = "http://xxx.x1.fr/xxx?client_secret=xxx&startFrom=0&numberOfRecords=5"
                    if(this.axiosCall != null) {
                        // debugger
                        this.axiosCall.cancel();
                        // console.log('request canceled...')
                    }
                    this.axiosCall = axios.CancelToken.source();
                    axios.get(url, { cancelToken: this.axiosCall.token })
                    .then((response) => {
                        console.log(response.data)
                    })
                    .catch(function(thrown) {
                        if (axios.isCancel(thrown)) {
                            console.log('API request is canceled...', thrown.message);
                        } else {
                            // handle error
                        }
                    });
                }
            }
        })
    </script>
</body>

</html>

Expected behavior, if applicable
The active API call should take same timing as the first API call even after cancelling subsequent API calls.

Environment:

Axios Version: 0.19.2
OS: Windows 10 Pro
Browser: Chrome
Browser Version: 81
Additional Library Versions Vuejs 2.6.11

Screenshots

jasonsaayman · 2020-04-29T19:04:39Z

Hi @kathirr007,

This seems to be a performance based and seems to have to do with the server that you are calling. I would suggest looking at the back end.

Thanks

jasonsaayman closed this as completed Apr 29, 2020

axios locked and limited conversation to collaborators May 22, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Cancel Request if same request called subsequently multiple times is keeping active request too long to get response, Please Help. #2934

Cancel Request if same request called subsequently multiple times is keeping active request too long to get response, Please Help. #2934

kathirr007 commented Apr 29, 2020 •

edited

jasonsaayman commented Apr 29, 2020

Cancel Request if same request called subsequently multiple times is keeping active request too long to get response, Please Help. #2934

Cancel Request if same request called subsequently multiple times is keeping active request too long to get response, Please Help. #2934

Comments

kathirr007 commented Apr 29, 2020 • edited

Issue Description

Issue Code

jasonsaayman commented Apr 29, 2020

kathirr007 commented Apr 29, 2020 •

edited