时间戳

首页 > 解决方案 > 如何在两种情况下有效地调用 setState - 成功和错误？

javascript - 如何在两种情况下有效地调用 setState - 成功和错误？

问题描述

我正在使用react并且我有一个异步操作，它使用axios. 我还有一个标志（状态变量tableLoaded），它描述是否获取数据。

    this.props.fetchDataAction(requestParams).then(
      () => {
        this.setState({
          data: this.props.reports.data
        });
      }
    ).then(() => {
      this.setState({ tableLoaded: true })
    });

我希望我的标志tableLoaded在这两种情况下都设置为 true - 在 API 调用成功和失败之后，所以我只是then()在我的 Promise 上添加了另一个，它触发了将此标志设置为 true 的函数。

我的问题是 - 这是实现我的目标的最佳解决方案吗？或者我应该在这两种情况下重复这个代码？

标签： javascriptreactjsapicallaxios

解决方案

您应该使用Promise.finally语法。

this.props.fetchDataAction(requestParams)
.then(() => {
    // Do your thing on success
    this.setState({
        data: this.props.reports.data
    });
})
.catch((error) => {
    // Do something if failed
})
.finally(() => {
    // Do this in all cases..
    this.setState({ tableLoaded: true })
});

编辑： 如果 return fromfetchDataAction是 Axios 承诺，那么您应该替换.finally为，.then因为 Axios 不提供该finally方法。然后我会说你原来的建议是正确的。你可以评论第二个.then，这样你就知道为什么了。

this.props.fetchDataAction(requestParams)
.then(() => {
    // Do your thing on success
    this.setState({
        data: this.props.reports.data
    });
})
.catch((error) => {
    // Do something if failed
})
.then(() => { // Triggered in all cases by axios
    // Do this in all cases..
    this.setState({ tableLoaded: true })
});

推荐阅读