实现一个捕捉时的状态码是404阵营JS

Question

我期待赶上我的语气，我已经建立了一个404错误，但我不知道如何去做。基本上，如果API响应是404那么div应该出现说

对不起，ID不能与亲密模式按钮

一起发现”我拥有一切工作正常，但只是不知道如何或在哪里实现这个错误捕获。我也想在没有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和那么你的诺言链可在其上具有.catch这将然后设置组件的状态是一个错误。

理想情况下，你不应该在一个组件，虽然这样做的，应该有一个更明确的架构（通量/终极版？）那会摘要从表象部件全部带走，使他们不那么耦合。但就目前而言，拒绝承诺将解决您的问题。

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