Отменить предыдущее обещание

Question

Я реализую поисковый ввод в моем приложении React, которое может занять несколько секунд для ответа от сервера в зависимости от размера набора результатов.Проблема, с которой я сталкиваюсь сейчас, заключается в том, что если пользователь ищет термин с большим набором результатов, а затем сразу ищет термин с небольшим набором результатов, первый поиск возвращается после последнего поиска и перезаписывает данные,поэтому отображение неверных результатов в таблице.

В настоящее время у меня есть компонент поиска, который вызывает асинхронную функцию в своем родительском элементе (эту функцию можно вызывать из нескольких дочерних компонентов, одним из которых является функция поиска).Внутри асинхронной функции у меня есть ожидающий вызов службы с поисковым запросом.Как только это возвращает, результаты передаются в функцию, которая обновляет некоторое состояние.

Я прочитал о токенах отмены, но я не совсем уверен, как это реализовать.Когда компонент поиска совершает первоначальный вызов, будет обещание, которое будет ожидаться до тех пор, пока не будет получен результат.Когда я буду искать снова, как я смогу игнорировать результат первого обещания?Каждый раз, когда я ищу, я буду хранить обещание в поле компонента и как-то проверять это поле в будущих поисках?

Я прочитал много возможных решений этого онлайн.Я использую fetch-retry для обработки вызова API и скорее не буду использовать библиотеку, такую ​​как bluebird или axios.Основная часть, которую я не понимаю, - как не выполнить свое обещание, если обещание было создано в будущем.

Надеюсь, я объяснил это достаточно хорошо!

Спасибо

Answer 1

Когда я буду искать снова, как я смогу проигнорировать результат первого обещания?

Вы, вероятно, не хотите этого, так как вы теряете немного пропускной способности, если вы делаетезапрос и игнорировать его результат.Вместо этого вы должны отменить основной запрос (не обещание, обещания не могут быть отменены напрямую).

Для этого вы можете сохранить контроллер прерывания беременности для каждого поиска:

 this.controller = new AbortController();

Тогдазапустите все запросы на получение как:

 fetch(url, { signal: this.controller.signal })
   .then(res => res.json())
   .then(res => this.setState({ /*...*/ }))
   .catch(() => /*..*/)

Теперь, если вы перезапустите поиск, просто выполните:

 this.controller.abort();
 this.controller = new AbortController();

и выполните выборку снова.

Продолжайте читать