如何在 React 的获取承诺中从 catch 块中的节点传递响应数组答案

【问题标题】：How to pass the response array from node in the catch block in a fetch promise in React如何在 React 的获取承诺中从 catch 块中的节点传递响应数组
【发布时间】：2023-01-25 22:39:17
【问题描述】：

我正在开发 React 和 Node 应用程序，但我不明白如何将从后端给出的错误传递到前端获取中的 catch 块。

我的问题是，当强制错误并将错误抛出到 fetch promise 的 catch 块中时，我无法将后端返回的错误数组提供给 catch。我将响应提供给 catch，当它被记录时，它说它是一个对象 Response。而且它没有来自后端响应的错误属性。

这是前端的登录功能：

  function handleLogin() {
    fetch('http://localhost:5000/auth/login', {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ username, password }),
    })
      .then((response) => {
        if(!response.ok) {
          throw Error(response)
        }
        return response.json()
      })
      .then((token) => {
        localStorage.setItem('token', token);
        history.push('/');
        window.location.reload();
      })
      .catch((error) => {
        console.log('error: ', error); // error:  Error: [object Response]
        console.log('error:', error.errors);  // undefined
        setErrors(error.errors) 
      })
  }

这是后端登录的控制器：

exports.login = async (req, res) => {
  const { password, username } = req.body;
  const hasErrors = validationResult(req);
  // VALIDATE INPUTS
  if (!hasErrors.isEmpty()) {
    console.log('there are errros')
    return res.status(401).json({
      erros: hasErrors.array(),
    });
  }
  // VALIDATE USER
  const user = await User.findOne({ username });
  if (!user) {
    return res.status(401).send({
      erros: [
        {
          msg: 'Invalid Credentials 1',
        },
      ],
    });
  }

  const isValid = await bcrypt.compare(password, user.password);

  if (isValid) {
    // SIGN THE JWT
    const token = await JWT.sign({ username }, 'mysecret', {
      expiresIn: 864_000,
    });
    return res.json(token);
  } else {
    return res.status(401).send({
      erros: [
        {
          msg: 'Could not save the user into the db',
        },
      ],
    });
  }
}

【问题讨论】：

标签： node.js reactjs promise

【解决方案1】：

您面临的问题是传递给 catch 块的 error 对象是一个 Response 对象，它没有您尝试访问的 errors 属性。要访问 errors 属性，您需要将响应主体解析为 JSON。

以下是如何实现此目标的示例：

.catch((error) => {
        return error.json().then((errorJSON) => {
          console.log(errorJSON.errors);
          setErrors(errorJSON.errors);
        });
      });

这会将响应主体解析为 JSON 并提取错误属性，然后您可以将其设置为组件的状态。

或者，您可以在抛出错误之前解析 then 块中的响应主体。

.then((response) => {
        if(!response.ok) {
          return response.json().then((errorJSON) => {
            throw Error(errorJSON.errors);
          });
        }
        return response.json();
      })

这将使 errors 属性在被抛出到 catch 块时可用。

值得注意的是错误属性名称是“错误”在您的后端代码中，但您正试图在前端代码中将其作为“错误”访问。您需要确保两者匹配，否则将无法正常工作。

【讨论】：