javascript - 使用 React JS 实现状态码为 404 时的 catch

Question

我希望在我构建的模态中捕获 404 错误，但我不知道如何解决。基本上，如果 API 响应是 404，则应该出现一个 div 并显示

sorry, ID cannot be found' along with a close modal button

我其他一切都工作正常，但只是不确定如何或在哪里实现此错误捕获。我也想在没有 JSX 的情况下完成它，因为我没有在这个项目中编写任何内容。

当API响应404时，json如下

{"success":false,"reason":{"code":14,"message":"Resource not found."}}

如有任何帮助，我们将不胜感激，谢谢

getUserProfile() {
  compsApi.get({
      path: `v1/users/profile/${this.props.Id}`,
  })
  .then(response => {
    this.setState({ user: response.results });
  })
}

render() {
  const { UID, profile, data } = this.state.user || {};

    return this.state.user
      ? div('.grid', [
        div('.grid__item .one-half', [
            div('.input-block__label-text--bold', 'ID'),
        ]),
        div('.grid__item .one-half', [
            div(`${UID}`),
        ]),
        div('.grid__item .one-half', [
            div('.input-block__label-text--bold', 'Email'),
            div('.input-block__label-text--bold', 'Name'),
            div('.input-block__label-text--bold', 'Date of Birth'),
            div('.input-block__label-text--bold', 'Gender'),
            div('.input-block__label-text--bold', 'Phone Number'),
            div('.input-block__label-text--bold', 'Address'),
        ]),
        div('.grid__item .one-half', [
            div(`${profile.email}`),
            div(`${profile.firstName} ${profile.lastName}`),
            div(`${profile.birthDay}/${profile.birthMonth}/${profile.birthYear}`),
            div(`${profile.gender}`),
            div(`${profile.phones.number}`),
            div(`${data.street}`),
            div(`${data.town}`),
            div(`${data.postcode}`),
        ]),
        div('.modal__spacing-top .align-right', [
            Button({
                onClick: this.props.POP_MODAL,
                buttonText: 'close',
                modifierClassName: ['min']
            })
        ])
      ])
    : div([
        h(TickSpinner, {
            width: 75,
            height: 75,
        })
    ]);
}

Answer 1

您的 API 库“compsApi”应该拒绝给出 404 的 promise ，然后您的 promise 链上可以有一个 .catch ，然后将组件状态设置为错误。

理想情况下，您不应该在组件中执行此操作，并且应该有一个更定义的架构(flux/redux？)，它将把这一切从您的表示组件中抽象出来，这样它们就不会那么耦合。但就目前情况而言，拒绝 promise 就能解决你的问题。

getUserProfile() {
  compsApi.get({
      path: `v1/users/profile/${this.props.Id}`,
  })
  .then(response => {
    this.setState({ user: response.results });
  })
  .catch(err => {
    this.setState({ error: err.message });
  });
}

然后您的 compsApi 库将简单地对调用进行检查。

 function get(path) {
   //make call
   if (res.success) {
     // do success
     resolve(payload);
   } else {
     reject(reason);
   }
 }