时间戳

首页 > 解决方案 > 当 API 返回任何错误时，catch 块不会被触发

reactjs - 当 API 返回任何错误时，catch 块不会被触发

问题描述

我正在进行正常的 API 调用，但由于某种原因，console.log(err)当我收到 500 错误时，我在 catch 块中看不到。它总是在我的 then 块中触发console.log(result)我做错了什么？

const startHandler = () => {
    setOpenLoadingModal(true);
    fetch(url, {
      method: 'post',
      body: JSON.stringify(payload),
      headers: headers,
    })
      .then((response) => response.json())
      .then((result) => {
        console.log(" ~ file: index.js ~ line 159 ~ .then ~ result", result)
        const { client_id, token } = result;
        if (!token || !client_id){
          setOpenErrorModal(true);
          return setOpenLoadingModal(false);
        } else{
          return history.push({
            pathname: FORMS_URL.LANDING_PAGE,
          });
      })
      .catch((err) => {
        console.log(err)

        setOpenErrorModal(true);
        setOpenLoadingModal(false);
      });
  };

标签： reactjsfetch

解决方案

fetch不拒绝 4xx/5xx 错误状态

使用 Fetch

即使响应是 HTTP 404 或 500，返回的 Promisefetch() 也不会拒绝 HTTP 错误状态。 相反，只要服务器响应标头，Promise 就会正常解析（响应的 ok 属性设置为 false如果响应不在 200-299 范围内），它只会在网络故障或任何阻止请求完成的情况下拒绝。

检查获取是否成功

你应该检查response.ok状态。

const startHandler = () => {
  setOpenLoadingModal(true);
  fetch(url, {
    method: 'post',
    body: JSON.stringify(payload),
    headers: headers,
  })
    .then((response) => {
      if (!response.ok) { // <-- check response OK here
        throw new Error('Network response was not ok');
      }
      return response.json();
    })
    .then((result) => {
      console.log(" ~ file: index.js ~ line 159 ~ .then ~ result", result)
      const { client_id, token } = result;
      if (!token || !client_id){
        setOpenErrorModal(true);
        return setOpenLoadingModal(false);
      } else{
        return history.push({
          pathname: FORMS_URL.LANDING_PAGE,
        });
    })
    .catch((err) => {
      console.log(err)

      setOpenErrorModal(true);
      setOpenLoadingModal(false);
    });
};

推荐阅读