Отмена запросов axios при выполнении полей ввода типа «мгновенный поиск»

Question

У меня есть:

  function testURL(url) {
    return axios.post(`http://localhost:4000/api/test`, { url } )
  }

  onChangeDestination(url, index) {
    this.setState(prevState => {
      const rules = [...prevState.rules];
      const url_status = "Checking"
      rules[index] = { ...rules[index], url, url_status};
      return { rules };
    });
    if (isURL(url+'')) {
        testURL(url).then(r=> {
          var url_status = r.data.response
          this.setState(prevState => {
            const rules = [...prevState.rules];
            rules[index] = { ...rules[index], url_status};
            return { rules };
          });
        })
      } else {
        this.setState(prevState => {
          const rules = [...prevState.rules];
          var url_status = "No URL"
          rules[index] = { ...rules[index], url_status};
          return {rules};
        });
      }
  };

Итак, у меня есть текстовый ввод для URL, который на onChangeDestination (то есть нажатие клавиши) выполняет обратный вызов и проверяет, разрешается ли URL (url_status),Это похоже на то, как работает мгновенный поиск Google.Проблема, с которой я сталкиваюсь, заключается в том, что иногда ответы на axios могут поступать не по порядку, то есть окончательный url_status не обязательно является последним нажатием клавиши.

Я пытаюсь понять, как использовать отмену axiosAPI, но я изо всех сил пытаюсь понять, как его структурировать.Что имеет смысл в качестве токена отмены и где его хранить?

Answer 1

Дополнительное предложение, кроме существующих, которые показывают, как отменить отправленный вызов (что вы все равно должны сделать).Что делать, если вы также debounce вводите свои данные, чтобы в первую очередь было меньше вызовов для отмены?

См. http://demo.nimius.net/debounce_throttle/ о том, что делает отмена.

Answer 2

Это должно сработать.Он просто проверяет, выполняется ли вызов (состояние ожидания), и, если это так, навигатор отменяет его.

_source = undefined

testURL = url => {
     if (this._source) this._source.cancel()
     this._source = axios.CancelToken.source()

     return axios.post(`http://localhost:4000/api/test`, 
          { url }, 
          { cancelToken: this._source.token })
  }

Answer 3

Я думаю, вы просите об этом. Отмена Axios

const CancelToken = axios.CancelToken;
let cancel;
function testURL(url) {
    return axios.post(`http://localhost:4000/api/test`, { url,
      cancelToken: new CancelToken(function executor(c) {
       // An executor function receives a cancel function as a parameter
      cancel = c;
      }
   })
 }


...
// whenever you need to cancel request
// by calling cancel();


onChangeDestination(url, index) {
if(rules[index].url !== url) { // i have added this check 
   cancel();
 // implement  call again() 
}else{
  // usual call 
}
};
...

Answer 4

Вы можете отменить запрос, используя токен отмены.

Вы можете создать токен отмены, используя фабрику CancelToken.source, как показано ниже:

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // handle error
  }
});

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

// cancel the request (the message parameter is optional)
source.cancel('Operation canceled by the user.');

Вы также можете создать отменутокен, передав функцию-исполнителю в конструктор CancelToken:

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // An executor function receives a cancel function as a parameter
    cancel = c;
  })
});

// cancel the request
cancel();

Примечание: вы можете отменить несколько запросов одним и тем же токеном отмены.