2

这是一个由两部分组成的问题，第一部分是针对我的个人情况，第二部分是对事物运作方式的整体理解。

我正在为我的应用程序执行密码重置。电子邮件连同jwtURL 的附件一起发送。在用户单击 URL 后，他们会被带到重置密码页面，该页面会触发具有jwt直通componentWillMount功能的操作。然后此操作会触发fetch：

static verifyResetPasswordToken(token) {
  const obj = JSON.stringify(token);
  return fetch('/api/auth/verifyResetPasswordToken', {
    method: 'POST',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
    },
    credentials: 'include',
    body: obj
  })
    .then(res => {
      console.log('THEN');
    })
    .catch(error => {
      console.log('CATCH');
    });
}

在 API 上，我通过获取在正文中传递的令牌并检查它是否已过期来处理此问题：

export function verifyResetPasswordToken(req, res, next) {
  const token = jwt.decode(req.body.token);
  if (token.exp > Date.now() / 1000) {
    res.status(200).json();
  } else {
    res.status(401).json();
  }
}

注意我知道这不是检查令牌有效性的安全方法。我只需要弄清楚它是否过期。

这就是混乱所在。当401状态返回时，我的承诺被拒绝。我的理解是fetch不以这种方式处理错误。唯一要注意的fetch是，即使出现 400 和 500 个 http 状态错误network connectivity，我仍然应该遇到问题。then()关于为什么我的承诺被拒绝的任何想法401？为什么我会降落在catch街区？我该如何避免这种情况发生？如何处理我想在我的服务器上响应的不同状态？

我的第二个问题围绕着所有这些。处理服务器错误的最佳实践是fetch什么React Redux？这是我第一次使用fetch，任何可以理解我应该如何处理服务器端错误的信息将不胜感激。

static verifyResetPasswordToken(token) {
  const obj = JSON.stringify(token);
  return fetch('/api/auth/verifyResetPasswordToken', {
    method: 'POST',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
    },
    credentials: 'include',
    body: obj
  })
    .then(res => {
      if(res.ok) {
        console.log('THEN');
      } else {
        console.log('ELSE');
      }
    })
    .catch(error => {
      console.log('CATCH');
    });
}
4

1 回答 1

1

根据 MDN，正如您已经注意到的，fetch()API 仅在“遇到网络错误时拒绝承诺，尽管这通常意味着权限问题或类似问题”。

但是fetch提供了一个 ok 标志，指示 HTTP 响应的状态代码是否在成功范围内。

static verifyResetPasswordToken(token) {
  const obj = JSON.stringify(token);
  return fetch('/api/auth/verifyResetPasswordToken', {
    method: 'POST',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
    },
    credentials: 'include',
    body: obj
  }).then(res => {
     if (!res.ok) {
       throw Error(res.statusText);
     }
     return res;
  })
    .then(res => {
      console.log('THEN');
    })
    .catch(error => {
      console.log('CATCH');
    });
}
于 2017-08-15T20:18:13.580 回答