如何取消 redux-saga 中正在运行的网络请求？

Question

I have a saga:

function* sagaOne() {
   yield call(apiOne);
   yield call(apiTwo);
   yield call(apiThree);
}

function* sagaTwo() {
   try {
      yield all(users.map((user) => call(sagaOne, user));
      yield put(successAction);
   } catch (err) {
     yield put(errAction);
   }
}

function* sagaThree() {
   const task = yield fork(sagaTwo);
   yield take(CancelAction);
   yield cancel(task);
}

My problem is - when sagaThree fires, it forks sagaTwo . If I dispatch cancel the action and sagaOne is already in a deeper state - apiOne call already resolved and apiTwo started, the whole request is not canceled.

Question: how to properly cancel a "deeper", "nested" task (sagaOne), when it's already at 2nd yield or 3rd?

Summing up: cancellation works only if I cancel the task immediately after start and none of the apiTwo hasn't started yet. If it goes deeper, the cancellation doesn't work and every call inside every sagaOne resolves.

Answer 1

For functions which return Promise results, you can plug your own cancellation logic by attaching a [CANCEL] to the promise

More info on cancelling redux-saga tasks here .

So we need to enrich promise returned by axios with a method which will be called by redux-saga upon cancelation and will cancel outgoing xhr request. Here you can find relevant axios documentation.

OK, let's apply this to our api call:

import axios from 'axios';
import { CANCEL } from 'redux-saga'

const CancelToken = axios.CancelToken;

const apiOne = () => {
  const source = CancelToken.source();
  const promise = axios.post('url', {
    cancelToken: source.token
  });

  promise[CANCEL] = () => source.cancel();
  return promise;
};

Now once sagaOne is cancelled the api call will be cancelled as well (if it wasn't completed yet of course).

---

This is the basic idea. You can extract common logic into wrapper or maybe adapter, so you don't need to do it in each api function. You can also create a cancel token by passing an executor function to the CancelToken constructor.