Ошибка xhr.abort () не является функцией, использующей Ajax jQuery

Question

Я пытаюсь прервать запрос Ajax, используя метод .abort(). Но он продолжает выдавать ошибку

xhr.abort is not a function

Это хук, где я его называю:

  useEffect(() => {
    const xhr = $.ajax(`https://pokeapi.co/api/v2/pokemon/${name}`)
      .then(sleeper(1)) // Create some latency
      .then(response => {
        setPokemon(response);
      })
      .catch(error => {
        console.log(error);
      });
    return () => {
      xhr.abort(); // ERROR: xhr.abort is not a function
    };
  }, [name]);

Демо

jQuery версия : 3.4.1

Answer 1

Как сказал @Twisty в комментариях, это связано с версией jQuery. Для версии 3 нам нужно передать экземпляр XMLHttpRequest:

  useEffect(() => {
    const xhr = new window.XMLHttpRequest(); // Create a XMLHttpRequest instance
    $.ajax({
      url: `https://pokeapi.co/api/v2/pokemon/${name}`,
      xhr: function() { // return the instance here
        return xhr;
      }
    })
      .then(sleeper(1))
      .then(response => {
        setPokemon(response);
      })
      .catch(error => {
        console.log(error);
      });
    return () => {
      xhr.abort(); // Succesfully aborted on React unmount lifecycle
    };
  }, [name]);

Fixed demo