React 的承诺 [重复]答案

【问题标题】：Promises with React [duplicate]React 的承诺 [重复]
【发布时间】：2019-02-04 15:57:22
【问题描述】：

我对 Promise 有疑问。我才刚开始和他们打交道，没那么容易理解！

我正在尝试为我的应用设置身份验证系统。

注册页面

handleSubmit 看起来像这样：

handleSubmit(event) {
  event.preventDefault();     
  const { user } = this.state;
  //some code here
  userActions.register(user);
}

用户操作

function register(user) {
  userService.register(user)
    .then(
      user => {
        success(user);
      },
      error => {
        failure(error.toString());
      }
    );
  function success(user) { return { type: "REGISTER_SUCCESS", user } }
  function failure(error) { return { type: "REGISTER_ERROR", error } }
}

用户服务

function register(user) {
  const requestOptions = {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(user)
  };

  return fetch(`/api/users/register`, requestOptions).then(handleResponse);
}

function handleResponse(response) {
  return response.text().then(text => {
      const data = text && JSON.parse(text);
      if (!response.ok) {  
          const error = (data && data.message) || response.statusText;
          return Promise.reject(error);
      }

      return data;
  });
}

问题 1。 该代码正在“工作”，但不像我想要的那样。这样，即使请求成功，我仍然可以从服务器收到错误，例如重复的用户名或类似的东西。我想我想要的是返回Promise.reject()，不仅是!response.ok，而且如果我在返回的JSON中有错误，对吗？

function handleResponse(response) {
  return response.text().then(text => {
      const data = text && JSON.parse(text);
      if (!response.ok) {  
          const error = (data && data.message) || response.statusText;
          return Promise.reject(error);
      }
      else if(data.errors) {
          return Promise.reject(data.message);
      }

      return data;
  });
}

问题 2。 如果一切正常，我应该return data 还是return Promise.resolve(data)？为什么？

【问题讨论】：

React 在哪里？
1) 是的。虽然你也可以用throw 代替return Promise.reject。请注意，您可能应该使用.text()在之前检查response.ok。还有一个response.json() 方法，因此您无需在响应文本上调用JSON.parse。 2）使用更简单的。
好吧，这不是一个真正的 React 问题，你是对的。
` Promise.reject()` 将被调用，要么你的响应 HTTP 代码包含 4xx 或 5xx 错误代码，要么你的逻辑有错误
(2) 这也是一样的，因为如果传递给then 的函数返回一个promise，那么该promise 将被解析以确定结果。阅读 Promise 文档（如上面的链接）有助于了解总体思路，但它非常技术性，一旦您开始更多地使用它们，您会发现它们比看起来要简单得多。

标签： javascript reactjs promise

【解决方案1】：

在此处查看fetch 的文档：https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Checking_that_the_fetch_was_successful

看来您应该使用.catch() 来获取服务器错误，而只使用throw new Error() 来获取错误。

您实际上不需要使用Promise.resolve 或Promise.reject。

为了帮助重构你所拥有的，你可以试试这个

function register(user) {
  const requestOptions = {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(user)
  };

  return fetch(`/api/users/register`, requestOptions).then(handleResponse);
}

function handleResponse(response) {
  return response.text()
     .then(text => {
       if (!response.ok) {
          const error = (data && data.message) || response.statusText;
          throw new Error(error);
       } else {
          const data = text && JSON.parse(text);
          return data;
       }
     })
     .catch(error => throw new Error(err));
}

【讨论】：