通过saga取消请求

Question

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

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

现在，问题是虽然只消耗了B的调用，但所有处于挂起状态的A的promise调用也会运行到完成。只有saga (因为A)会被中止，但api调用不会。我们可以在网络选项卡中看到这一点。因此，如果用户在A、B、C之间切换得相当快，我们将有大约30-40次对服务器的调用。所有这些都会运行到完成，尽管我们只对最后10个调用的完成感兴趣。如果我们在chrome dev工具中看到，最后10个调用在队列中或停止，直到上面的调用完成。难道没有一种方法可以通过取消承诺将取消从saga(takeLatest级别)传播到axios吗？Axios文档提到了取消和令牌，但我不清楚如何在redux -Saga和axios环境中传播cancel。如何启动从saga到axios的取消？

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库插件的创建者，专门针对这类问题- https://github.com/klis87/redux-saga-requests

它会自动为你做这些事情--如果一个传奇被取消，请求就会自动中止，所以你甚至不需要考虑它。

Answer 3

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

​

yield call(cancelSource.cancel)

​