Question

输入元素发生输入更改后，我运行空字符串check（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 and redux - How to prevent excessive api calls from a live-search component?但

1）诺言部分让我感到困惑

2）我认为我不必使用类

3）我想了解更多异步/等待

编辑：添加了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){...}
  }

Answer 1

这是一个看起来像的想法。您可以使用诺言来实现这一目标。首先调用={First!A2:F2; array_constrain(sort({Staff!A3:A9,Staff!B3:F9,row(First!A3:A9)-row(First!A1); FILTER ( { left(First!A1:A9,0) & First!A1 ,First!B1:F9,row(First!A1:A9)-row(First!A1); left(Second!A1:A9,0) & Second!A1 ,Second!B1:F9,row(Second!A1:A9)-row(Second!A1); left(Third!A1:A9,0) & Third!A1 ,Third!B1:F9,row(Third!A1:A9)-row(Third!A1); left(Fourth!A1:A9,0) & Fourth!A1 ,Fourth!B1:F9,row(Fourth!A1:A9)-row(Fourth!A1) }, { row(First!A1:A9)-row(First!A1); row(Second!A1:A9)-row(Second!A1); row(Third!A1:A9)-row(Third!A1); row(Fourth!A1:A9)-row(Fourth!A1) }>1, { First!A1:A9; Second!A1:A9; Third!A1:A9; Fourth!A1:A9 }<>"")} ,7,1),1000,6)}，然后调用awk -F'|' '{print $3}' log.txt：

autoFetch

Answer 2

您还可以在任何生命周期中使用功能，具体取决于您的项目。

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

     fetchData();

   }
}

如何使用异步/等待方式按执行顺序获取api结果？

2 个答案: