Increased response time after too much cancelled request

[hakankaan]

I use live search. And i cancel previous request when new key pressed by user. But response time is too much when there is a lot of cancelled requests before last one. Ex: User pressed 10 times to keys. 9 request has been cancelled. The last one takes 3 seconds to response. If pressed 20 times to keys. 19 request has been cancelled. The last one takes 6 seconds to response. Less cancelled tokens before last request means faster response.

I use Laravel for api. Is there any solutions for this issue?

  let source = axios.CancelToken.source();
function send(example, source){
  axios
      .post(
        POST_URL,
        {
          ...example,
        },
        {
          cancelToken: source.token,
          headers: { Authorization: `Bearer ${user.token}` },
        }
      )
      .then((res) => {
      })
      .catch((err) => {
      });
}
 useEffect () => {
  send(example, source)
  return () => { source.cancel()}
},[example]}

Expected behavior

Shouldnt effect response time for last request after too much cancelled previous request.

Environment

• Axios Version [0.21.1]
• Adapter [XHR/HTTP]
• Browser [Chrome]
• Browser Version [90.0.4430.72]
• Laravel 8
• ReactJS

[github-actions]

Hello! 👋

This issue is being automatically closed because it does not follow the issue template. Please read the issue template carefully and follow all of the instructions when opening a new issue.

Thanks

[DigitalBrainJS]

It seems something wrong with the place where you have defined the token. It will be redefined on each component render.

 useEffect () => {
  const source = axios.CancelToken.source();
  send(example, source)
  return () => { source.cancel()}
},[example]}

Currently, Axios has a conditional bug with cancelation token leakage (#3001) and the PR with fix is still waiting for the review (#3305), but it looks like this issue is not related to the bug.

Or as an alternative, you can try to use an axios wrapper with a custom hook that supports auto-cancelation. (Live demo - click the fetch button repeatedly to see how the previous pending request was aborted):

import React, { useState } from "react";
import {
  useAsyncEffect,
  E_REASON_UNMOUNTED,
  CanceledError
} from "use-async-effect2";
import cpAxios from "cp-axios";

export default function TestComponent(props) {
  const [text, setText] = useState("");
  const [id, setId] = useState(1);

  const cancel = useAsyncEffect(
    function* () {
      setText("fetching...");
      try {
        const response = yield cpAxios(
          `https://rickandmortyapi.com/api/character/${id}`
        ).timeout(props.timeout);
        setText(JSON.stringify(response.data, null, 2));
      } catch (err) {
        CanceledError.rethrow(err, E_REASON_UNMOUNTED);
        setText(err.toString());
      }
    },
    [id]
  );

  return (***);
}