当 API returns 出现任何错误时，catch 块不会被触发

Question

我正在进行正常的 API 调用，但由于某种原因，我在 catch 块中看不到 console.log(err) 当我收到 500 错误时。它总是在我的 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);
      });
  };

Answer 1

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

Using Fetch

The Promise returned from fetch() won’t reject on HTTP error status even if the response is an HTTP 404 or 500. Instead, as soon as the server responds with headers, the Promise will resolve normally (with the ok property of the response set to false if the response isn’t in the range 200–299), and it will only reject on network failure or if anything prevented the request from completing.

Checking that the fetch was successful

您应该检查 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);
    });
};

当 API returns 出现任何错误时，catch 块不会被触发

catch block doesn't get fired when API returns any error

fetch

reactjs