如果其中一个抛出错误，我无法使用 Promise.allSettled() 根据 2 个获取调用的结果呈现 2 个组件

Question

我在 Promise.allSettled() 中发送两个提取调用，并根据结果呈现组件，如果满足则带有数据的组件，如果拒绝则呈现错误组件。问题是当其中一个抛出错误时，一个错误组件已呈现，但包含其他调用数据的组件未呈现？为什么会这样？

代码：

 const sendRequest=useCallback(async (url)=>{
        setIsLoading([true,true]);
        setError([null,null]);

        let response;

        try{
            response=await Promise.allSettled( [fetch(url[0]),fetch(url[1])]);

            
            if(!response[0].value.ok){
                throw new Error('Something went wrong');
            }

            const data1=await response[0].value.json();

            if(!response[1].value.ok){
                throw new Error('Something went wrong');
            }

            const data2=await response[1].value.json();

            setItems([[data1.results],[data2.results]]);
        }
        catch(err){
            if(!response[0].value.ok) {setError([err.message || 'Something went wrong',error[1]])};
            if(!response[1].value.ok){setError([error[0],err.message || 'Something went wrong'])};
        }
        setIsLoading([false,false]);
    },[])

Answer 1

这是因为 setItems([[data1.results],[data2.results]]); 方法没有被调用，如果你的任何请求如果给出错误你正在执行 throw new Error('Something went wrong') 这将使代码执行捕获块和你的 setItems([[data1.results],[data2.results]]); 方法将不会被执行。请查看下面的代码来解决您的问题。

        let error = false;
        if(!response[0].value.ok){
            error =true;
        }else{
          const data1=await response[0].value.json();
        }
        if(!response[1].value.ok){
           error =true;
        }else{
         const data2=await response[1].value.json();
        }
        setItems([[data1.results],[data2.results]]);
        if(error){
         throw new Error('Something went wrong')
        }

Answer 2

我改进了上面由@abhishek sahu 发布的代码。检查错误时最好使用子句保护。错误不应用作流程中的标志。当错误发生时应该立即抛出，而不是等到 code/function 结束。中间可能会发生一些其他错误，您将不知道是否使用标志作为错误。

const hanndleCallsAsync = async () =>{
    if(!response[0].value.ok)
        throw new Error('Something wrong went with reponse0');
    if(!response[1].value.ok){
           throw new Error('Something wrong went with reponse1');

    const data1=await response[0].value.json();        
    const data2=await response[1].value.json();
    setItems([[data1.results],[data2.results]]);
    ....

}

现在，您的代码更短，更易于阅读和找出错误发生的位置。

如果其中一个抛出错误，我无法使用 Promise.allSettled() 根据 2 个获取调用的结果呈现 2 个组件

I am not able to render 2 components based on result of 2 fetch call using Promise.allSettled() if one of them throws error

javascript

promise

reactjs