Question

我正在创建一个简单的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不存在或被阻止的情况下），以便我的应用程序不会崩溃。

Answer 1

以下内容就足够了。

如果您的承诺成功，则返回一个新的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
        })
      })
  })()
}

Answer 2

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

快乐之路：

调用API
将响应解析为JSON
处理成功的响应

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

示例：

res

将获取承诺嵌套在另一个承诺中（反应）？

2 个答案: