Javascript 如何按顺序运行fetch语句？_Javascript_Reactjs

Javascript 如何按顺序运行fetch语句？

javascript reactjs

Javascript 如何按顺序运行fetch语句？,javascript,reactjs,Javascript,Reactjs,我的一些代码也没有按照我希望的方式运行。我发出了两个API请求，但它们没有按顺序执行。我读了一点，并尝试执行异步等待，但未能达到预期的结果。我错过了什么 useEffect(() => { const selectedSdksKeys = Object.keys(selectedSdks); fetch( `/api/sdk/churn?sdk1_id=${selectedSdksKeys[0]}&sdk2_id=${selectedSdksKeys[

我的一些代码也没有按照我希望的方式运行。我发出了两个API请求，但它们没有按顺序执行。我读了一点，并尝试执行异步等待，但未能达到预期的结果。我错过了什么

useEffect(() => {
    const selectedSdksKeys = Object.keys(selectedSdks);

    fetch(
      `/api/sdk/churn?sdk1_id=${selectedSdksKeys[0]}&sdk2_id=${selectedSdksKeys[1]}&sdk3_id=${selectedSdksKeys[2]}`
    )
      .then((res) => res.json())
      .then((res) => setAllSdksInfo(res))

// I would like the below to happen only after the above has happened. How?

    selectedSdksKeys.forEach((id) => {
      fetch(`/api/sdk/app_count?sdk_id=${id}`)
        .then((res) => res.json())
        .then((res) => {
            setAllSdksInfo(prev => ({...prev, res}))
    });
    });
  }, [selectedSdks]);

您可以添加另一个状态变量作为标志。在第一个请求完成后将标志设置为true，然后在执行另一个请求之前检查第一个请求是否完成

const [loaded, setLoaded] = useState(false);

useEffect(() => {
    const selectedSdksKeys = Object.keys(selectedSdks);
    if(!loaded){
      fetch(
        `/api/sdk/churn?sdk1_id=${selectedSdksKeys[0]}&sdk2_id=${selectedSdksKeys[1]}&sdk3_id=${selectedSdksKeys[2]}` )
        .then((res) => res.json())
        .then((res) => {
           setLoaded(true)
           setAllSdksInfo(res))
        }
     }

    if(loaded){
      selectedSdksKeys.forEach((id) => {
        fetch(`/api/sdk/app_count?sdk_id=${id}`)
          .then((res) => res.json())
          .then((res) => {
            setAllSdksInfo(prev => ({...prev, res}))
       }
      });
    });
  }, [selectedSdks,loaded]);

您可以添加另一个状态变量作为标志。在第一个请求完成后将标志设置为true，然后在执行另一个请求之前检查第一个请求是否完成

const [loaded, setLoaded] = useState(false);

useEffect(() => {
    const selectedSdksKeys = Object.keys(selectedSdks);
    if(!loaded){
      fetch(
        `/api/sdk/churn?sdk1_id=${selectedSdksKeys[0]}&sdk2_id=${selectedSdksKeys[1]}&sdk3_id=${selectedSdksKeys[2]}` )
        .then((res) => res.json())
        .then((res) => {
           setLoaded(true)
           setAllSdksInfo(res))
        }
     }

    if(loaded){
      selectedSdksKeys.forEach((id) => {
        fetch(`/api/sdk/app_count?sdk_id=${id}`)
          .then((res) => res.json())
          .then((res) => {
            setAllSdksInfo(prev => ({...prev, res}))
       }
      });
    });
  }, [selectedSdks,loaded]);

有两种方法可以解决此问题：

1-您缺少一个

await

语句，但这需要将其中发生的所有事情包装到一个

async

函数中

对于您的代码，类似这样的东西应该可以工作：

useffect（（）=>{
（异步（）=>{
const selectedSdksKeys=Object.keys（selectedSdks）；
待命(
`/api/sdk/CROUR？sdk1_id=${selectedSdksKeys[0]}和sdk2_id=${selectedSdksKeys[1]}和sdk3_id=${selectedSdksKeys[2]}`
)
.然后（（res）=>res.json（））
。然后（（res）=>setAllSdksInfo（res））
//必须在以下时间之后发生的代码：
等待承诺(
selectedSdksKeys.map（（id）=>{
返回fetch（`/api/sdk/app_count？sdk_id=${id}`）
.然后（（res）=>res.json（））
。然后（（res）=>{
setAllSdksInfo（prev=>（{…prev，res}））
});
});
)
})()
})

2-或者，如果您希望跳过此操作，您可以在

then（）

语句中将要执行的函数放在第一个之后。它应该是这样的：

useEffect(() => {
    const selectedSdksKeys = Object.keys(selectedSdks);

    fetch(
      `/api/sdk/churn?sdk1_id=${selectedSdksKeys[0]}&sdk2_id=${selectedSdksKeys[1]}&sdk3_id=${selectedSdksKeys[2]}`
    )
      .then((res) => res.json())
      .then((res) => setAllSdksInfo(res))
      .then(() => {
         // Your second API call which was being run out of order:
         selectedSdksKeys.forEach((id) => {
           fetch(`/api/sdk/app_count?sdk_id=${id}`)
            .then((res) => res.json())
             .then((res) => {
                setAllSdksInfo(prev => ({...prev, res}))
          });
    });

      })
    
  }, [selectedSdks]);

// Your second API call which was being run out of order:
return Promise.all(selectedSdksKeys.nmap((id) => {
  return fetch(`/api/sdk/app_count?sdk_id=${id}`)
     .then((res) => res.json())
     .then((res) => {
        setAllSdksInfo(prev => ({...prev, res}))
     });
})

编辑：我还注意到你正在做一个

forEach

，里面有一个fetch。这将导致回迁顺序混乱。如果这是一个问题，考虑把它包装在<代码>承诺中。所有< /代码>使用<代码>。大概是这样的：

useEffect(() => {
    const selectedSdksKeys = Object.keys(selectedSdks);

    fetch(
      `/api/sdk/churn?sdk1_id=${selectedSdksKeys[0]}&sdk2_id=${selectedSdksKeys[1]}&sdk3_id=${selectedSdksKeys[2]}`
    )
      .then((res) => res.json())
      .then((res) => setAllSdksInfo(res))
      .then(() => {
         // Your second API call which was being run out of order:
         selectedSdksKeys.forEach((id) => {
           fetch(`/api/sdk/app_count?sdk_id=${id}`)
            .then((res) => res.json())
             .then((res) => {
                setAllSdksInfo(prev => ({...prev, res}))
          });
    });

      })
    
  }, [selectedSdks]);

// Your second API call which was being run out of order:
return Promise.all(selectedSdksKeys.nmap((id) => {
  return fetch(`/api/sdk/app_count?sdk_id=${id}`)
     .then((res) => res.json())
     .then((res) => {
        setAllSdksInfo(prev => ({...prev, res}))
     });
})