Question

我对诺言有疑问。我才刚开始与他们打交道，这并不容易理解！

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

注册页面

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 } }
}

UserService

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)？为什么呢？

Answer 1

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

似乎您应该使用.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));
}

对React的承诺

1 个答案: