reactjs React Promise所有多个API,不同的错误处理

xxe27gdn  于 2022-11-22  发布在  React
关注(0)|答案(2)|浏览(131)

我想运行不同的错误处理与React承诺。API 1和2应该有不同的错误处理。
1.一次执行所有API以保存时间。
1.尽快为每个API运行不同的错误处理语句,而不等待其他语句。
1.即使一个API失败,每个API也应该继续。
如何做到这一点?

参考:

Fetch API requesting multiple get requests

Promise.all([
            fetch(api1).then(value => value.json()),
            fetch(api2).then(value => value.json())
            ])
            .then((value) => {
               console.log(value)
              //json response
            })
            .catch((err) => {
                console.log(err);
            });
z4iuyo4d

z4iuyo4d1#

const p1 = new Promise((res, rej) => {
  setTimeout(() => {
    res("p1 success")
  }, 1000)
})
const p2 = new Promise((res, rej) => {
  setTimeout(() => {
    res("p2 success")
  }, 3000)
})
const p3 = new Promise((res, rej) => {
  setTimeout(() => {
    rej("p3 failed")
  }, 1000)
})
const p4 = new Promise((res, rej) => {
  setTimeout(() => {
    rej("p4 failed")
  }, 2000)
})

Promise.allSettled([p1, p2, p3, p4])
  .then(console.log)
dohp0rv5

dohp0rv52#

Promise.all 只 不过 是 对 你 所 做 的 任何 承诺 的 总结 - - 所以 你 没有 理由 不能 对 每 一 个 错误 单独 处理 。 例如 , 你 可以 为 每 一 次 提取 创建 一 个 单独 的 函数 - - 你 甚至 可以 在 这里 抛出 一 个 自 定义 的 错误 , 指示 要 做 的 某种 " followUp " 操作 , 或者 标识 错误 来自 哪里 , 或者 任何 东西 ( 你 可以 在 javascript 中 抛出 任何 东西 ) :

const fetchFromApi1 = async () => {
  try {
    const response = await fetch(api1);
    return response.json();

  } catch (err) {
    console.log('API 1 failed');
    
    // Throw a custom error
    throw {
      errorSource: 'API_CALL_1',
      message: 'API call 1 failed',
    };
  }
};

const fetchFromApi2 = async () => {
  // ----- 8< -----
};

中 的 每 一 个
然后 你 可以 把 它们 合并 到 你 的 Promise.all 中 - - 如果 你 抛出 了 一 个 如上 所 述 的 自 定义 错误 , 你 可以 用 它 来 决定 该 怎么 做 :

const fetchAllTheThings = async () => {
  try {
    const [response1, response2] = await Promise.all([
      fetchFromApi1(),
      fetchFromApi2(),
    ]);

  } catch (err) {
    const { errorSource, message } = err;
    // do something....
  }
};

格式

# # # # 编辑

如果 您 想 知道 在 调用 时 哪个 承诺 失败 了 , 最 好 使用 allSettled -

const fetchAllTheThings = async () => {
  const [result1, result2] = await Promise.allSettled([
    fetchFromApi1(),
    fetchFromApi2(),
  ]);

  if (result1.status === 'rejected') {
    // Sad for promise 1
  }

  if (result2.status === 'rejected') {
    // Sad for promise 2
  }
};

格式

相关问题