Promise.allSettled 返回状态为“已完成”，即使 API 调用失败并显示状态为 404

Question

我有一个 Promise.allSettled，它需要两个 API。即使第二个 API 失败并返回 404，承诺状态也显示“已完成”。

  async function loadLivePrerequisites() {
    try {
      const API_ENDPOINTS = getRequiredApis()

      // [0] -> join link, [1] -> user name
      const response = await Promise.allSettled(API_ENDPOINTS);

      const joinLink = response[0].status === "fulfilled" ? response[0].value.data : undefined
      setLiveDetails(joinLink)

      let userName: string;
      if(response[1].status === "fulfilled") {
        userName = response[1].value.data.name
      } else {
        userName = userNameGenerator(user.firstName, user.lastName)
      }
      setUserName(userName)
    } catch(error) { 
      console.log(error)
    }
  }

回应： 在此输入图片描述

网络错误（404）： 在此输入图片描述

我原以为状态会被“拒绝”，并且 if 语句内的代码不会被执行。不确定是我的问题还是我对promise.allSettled如何工作缺乏了解。任何帮助都会被接受。预先感谢您。

Answer 1

您遇到的问题可能是由于代码中处理 API 响应的方式造成的。当请求因 404 错误而失败时，某些 HTTP 客户端（例如 Axios）可能仍会解析 Promise 并将错误信息包含在响应对象中，这可以解释为什么状态显示为“已完成”。

    async function loadLivePrerequisites() {
  try {
    const API_ENDPOINTS = getRequiredApis();

    // [0] -> join link, [1] -> user name
    const response = await Promise.allSettled(API_ENDPOINTS);

    const joinLink = response[0].status === "fulfilled" && response[0].value.status === 200 
      ? response[0].value.data 
      : undefined;
    setLiveDetails(joinLink);

    let userName: string;
    if (response[1].status === "fulfilled" && response[1].value.status === 200) {
      userName = response[1].value.data.name;
    } else {
      userName = userNameGenerator(user.firstName, user.lastName);
    }
    setUserName(userName);
  } catch (error) { 
    console.log(error);
  }
}