通过 saga 取消请求

Question

我们在顶部提供了一个下拉选项..假设它有选项 A B C。每当用户更改下拉选项时，都会触发一个 saga，它会进行大约 10 个不同的 webapi 调用。（并行执行的调用映射）

我们在 saga watcher 中使用了 takeLatest 助手。因此，如果用户立即将下拉列表从 A 更改为 B。，只有通过 B 进行的调用才会在客户端被消耗，因为 takeLatest 中止了由 A 触发的传奇。

现在，问题是虽然只有 B 的调用被消耗，但所有 A 的 promise 调用都处于未决状态，也运行完成。只有 saga（因为 A）被中止，而不是 api 调用。我们可以在网络选项卡中看到它。因此，如果用户在 A B C 之间切换得相当快，我们将对服务器进行大约 30-40 次调用。尽管我们只对最后 10 个调用的完成感兴趣，但所有这些运行完成。如果我们在 chrome 开发工具中看到，最后 10 个调用在队列中或停止，直到上述调用完成。有没有办法通过取消承诺将取消从 saga（takeLatest level）传播到 axios。 Axios 文档谈到了取消和令牌，但我不清楚如何在 redux -Saga 和 axios 环境中传播取消。如何发起从saga到axios的cancel？

Answer 1

const cancelSource = axios.CancelToken.source()
try {
  yield all([
    call(axios.get, "/api/1", { cancelToken: cancelSource.token }),
    call(axios.get, "/api/2", { cancelToken: cancelSource.token }),
    /// ...
  ])
} finally {
  if (yield cancelled()) {
    yield call(cancelSource.cancel)
  }
}

Answer 2

如果有人对这个确切问题的有效解决方案感兴趣，我是 redux saga library addon 的创建者，专门针对此类问题 - https://github.com/klis87/redux-saga-requests

它会自动为您做这些事情 - 如果 saga 被取消，请求会自动中止，所以您甚至不需要考虑它。

Answer 3

最上面的答案对我有帮助，但是，我不得不使用这个电话

yield call(cancelSource.cancel)

通过 saga 取消请求

Cancel of requests through saga

javascript

reactjs

es6-promise

redux-saga

axios