Как получить результаты поиска API в порядке выполнения с помощью async / await? - PullRequest
Новая
       4

Как получить результаты поиска API в порядке выполнения с помощью async / await?

0 голосов
/ 28 января 2020

После изменения ввода в моем элементе ввода я запускаю проверку пустой строки (if (debouncedSearchInput === "")), чтобы определить, получаю ли я один API или другой.

Основная проблема - правильное обещание, возвращаемое быстрее, чем другой, приводящий к неверным данным при рендеринге. 

    //In my react useEffect hook
        useEffect(() => {
           //when input empty case
           if (debouncedSearchInput === "") autoFetch();
           //search
           else searchvalueFetch();
        }, [debouncedSearchInput]);

searchvalueFetch () возвращал медленнее, чем autoFetch (), когда я очищал ввод. Я получаю отложенные данные searchvalueFetch () вместо правильных данных autoFetch ().

Каковы способы решения этой проблемы? Как мне вернуть очередь из обещаний?

Я читаю Reactjs и redux - Как предотвратить чрезмерные вызовы API из компонента live-поиска? , но

1 ) Части обещания сбивают меня с толку

2) Я думаю, мне не нужно использовать класс

3) Я хотел бы узнать больше async / await

Редактировать: добавлено searchvalueFetch, autoFetch, fetcharticles код 

  const autoFetch = () => {
    const url = A_URL
    fetchArticles(url);
  };
  const searchNYT = () => {
    const url = A_DIFFERENT_URL_ACCORDING_TO_INPUT
    fetchArticles(url);
  };
  const fetchArticles = async url => {
    try{
      const response = await fetch(url);
      const data = await response.json();
      //set my state
    }catch(e){...}
  }

Ответы [ 2 ]

0 голосов
/ 28 января 2020

Вы также можете использовать функцию в любом жизненном цикле в зависимости от вашего проекта. 

lifecycle(){
     const fetchData = async () => {
try{
       await autoFetch();
       await searchvalueFetch();
} catch(e){
console.log(e)
}
     };

     fetchData();

   }
}
0 голосов
/ 28 января 2020

Это идея, как это может выглядеть. Вы можете использовать обещания, чтобы достичь этого. Сначала будет вызван autoFetch, а затем searchvalueFetch: 

   useEffect(() => {
     const fetchData = async () => {
       await autoFetch();
       await searchvalueFetch();
     };

     fetchData();

   }, []);
...