ReactJS/Redux/Axios 等待服务器请求完成

Question

我有以下代码：

  handleDeleteBlackList(id, event) {
    this.props.actions.deleteBlackListItem(id, this.props.token);
    this.props.actions.fetchBlackListItems(this.props.token);
  }

第一行从某个网络服务中删除一条记录，第二行获取更新后的数据。有时系统在执行第二个请求之前不会等待第一个请求完成并且我的 "updated" 数据根本没有更新...

我正在寻找一些解决方案来等待第一个请求完成，然后执行第二个请求。

编辑：

我已经在使用 setTimeout 函数的解决方法，但它应该有更好的修复方法...

Answer 1

尝试使用承诺！

查看 google 有关承诺的文档！

https://developers.google.com/web/fundamentals/getting-started/primers/promises

handleDeleteBlackList(id, event) {
    return new Promise(function(accept,reject) {
        perform_first_request()
        .then(function(){
          perform_second_request()
        })
    })
}

Answer 2

也许使用 async/await。

  async handleDeleteBlackList(id, event) {
    const actionResponse = await this.props.actions.deleteBlackListItem(id, this.props.token);
    // No idea what you have set your type: to in your action so I just made this up
    if (actionResponse && actionResponse.type === 'DELETE_SUCCESS'){
        this.props.actions.fetchBlackListItems(this.props.token);
    }
  }

这取决于您如何组织您的行动。需要查看 deleteBlackListItem

的代码

Answer 3

Axios中有finally()方法，在调用结束后运行。像其他方法一样； then() 和 catch(), finally() 方法在收到响应后被调用。但请记住，无论您的请求结果是什么（成功或失败），都会调用此方法。尝试在 finally() 方法中编写第二个请求，例如

.finally(() => {
                your_second_request();
            });

ReactJS/Redux/Axios 等待服务器请求完成

ReactJS/Redux/Axios Wait for server request to finish

javascript

reactjs

async-await

redux

axios