将获取承诺嵌套在另一个承诺中(反应)?

我正在创建一个简单的React Web应用程序,它将使用Reddit的api显示Reddit内容。

handleLoad(event) {
    (() => {
        this.setState({
        isLoading: true
    });
    var newUrl = "https://www.reddit.com/r/" + this.state.search + ".json"
        return new Promise((resolve,reject) => {
            fetch(newUrl)
            .then((res) => {
                if(res.ok){
                    resolve(res.json())
                } else {
                    reject(res.status)
                }
            })
        }).then(data => {
            this.setState({
                info: data,isLoading: false,error: false
            })
        }).catch((message)=>{
            this.setState({
                isLoading: false,error: true
            })
        })
    })()
}

此代码确实有效,但我想知道我是否做得太多?我希望能够捕获任何错误(在subreddit不存在或被阻止的情况下),以便我的应用程序不会崩溃。

yangpq008 回答:将获取承诺嵌套在另一个承诺中(反应)?

以下内容就足够了。

如果您的承诺成功,则返回一个新的JSON承诺并相应地设置状态。

如果没有,则在您已经在处理该错误的setState的catch块内抛出错误。

handleLoad(event) {
  (() => {
    this.setState({
      isLoading: true
    });
    var newUrl = "https://www.reddit.com/r/" + this.state.search + ".json"

    fetch(newUrl)
      .then((res) => {
        if (res.ok) {
          return res.json()
        }
        throw new Error('failed')
      })
      .then(data => {
        this.setState({
          info: data,isLoading: false,error: false
        })
      }).catch((message) => {
        this.setState({
          isLoading: false,error: true
        })
      })
  })()
}
,

由于获取已经返回了Promise,请在另一个Date块中处理响应,因此您无需将其包装在另一个promise中。

快乐之路:

  1. 调用API
  2. 将响应解析为JSON
  3. 处理成功的响应

不太高兴的道路: 1.调用API 2.检查.then(),如果还不行,则抛出以下错误: 3. catch块将处理引发的错误

示例

res

本文链接:https://www.f2er.com/2695027.html

大家都在问