reactjs - Axios 等待 axios.get() 在具有多个操作的 useEffect(, []) 序列中不受支持

Question

我有一个useEffect(.., [])初始化序列，它涉及 2 个操作，每个操作都是await-blocked sync Axios 调用。

我验证了第一个 Axios 调用await调用没有被兑现，并且流程跳转到第二个useEffect操作，getFlag()就在 await axios.get() 行之后。有谁知道为什么？

useEffect(() => {    

    getAgreements(); // Step 1

    getFlag(); // Step 2

}, []); 



const getAgreements = async () => {

    const url = '/getAgreements';

    try {

        const response = await axios.get(url); // This 'await' is not honored, jumps to getFlag()

        setAgreementsList(response.data);

    }

    catch (error) { 

        setErrorObj({message: error.message, location: 'Agreements.js: getAgreements'});

    }

    finally {

        setIsLoading(false);

    }

}   

const getFlag = async () => {

    const url = '/getNewAgreementIndicator';

    try {

        const response = await axios.get(url);

        setNewAgreementFlag(response.data);

    }

    catch (error) { 

        setErrorObj({message: error.message, location: 'Agreements.js: getNewAgreementIndicator'});

    }

    finally {

        setIsLoading(false);

    }

}   

当我重写下面的代码时，.then()我看到在第二次提取中，await不兑现，它console.log()在第二次提取的结果返回之前进行。谁能澄清一下？

useEffect(() => {    
    getAgreements()
    .then(() => {
        getFlag()
    })
    .then(() => {
        console.log('test');
    })

}, []); 

Answer 1

只拥有 2 个使用效果而不是所有这些效果都出现在坐骑上会更好吗？有另一个 useEffect 在协议列表更新时触发

useEffect(() => {    
    getAgreements(); // Step 1
}, []); 

useEffect(() => {    
  if(agreementsList){
    getFlag(); // Step 2
  }
}, [agreementsList]);