Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cancelling in-flight fetch requests with AbortController/AbortSignal #1917

Closed
slorber opened this issue Aug 27, 2019 · 4 comments

Comments

@slorber
Copy link
Contributor

commented Aug 27, 2019

Hey, for a blog post I'm working on about race conditions, where I mention takeLatest, I was wondering how we could add support for in-flight request cancellations to Redux-saga in a generic way.

My saga is a bit rusty, but I wrote this pseudo code.

function withAbortSignal(generator) {
  return function* abortableGenerator(...args) {
    let abortController = new AbortController();
    try {
      yield * generator(abortController.signal, ...args);
    } finally {
      if (yield cancelled()) {
        abortController.abort();
      }
    }
  }
}

function* loadStarwarsHeroSaga() {
  yield* takeLatest('LOAD_STARWARS_HERO', withAbortSignal(function* loadStarwarsHero(signal,action) {
    try {
      const hero = yield fetch(`http://data.com/${action.payload.id}`, {signal});
      yield put({ type: 'LOAD_STARWARS_HERO_SUCCESS', hero });
    } catch (err) {
      yield put({ type: 'LOAD_STARWARS_HERO_FAILURE', err });
    }
  });
}

What do you think about supporting officially some helpers for in-flight request cancellation?

Note redux-observable/rxjs already has some more advanced discussions/implementations regarding this feature: ReactiveX/rxjs#3122

https://github.com/ReactiveX/rxjs/blob/1dc09e9f21780645063407d6670ee2f5e3e399f5/src/internal/observable/dom/fetch.ts

@Andarist

This comment has been minimized.

Copy link
Member

commented Aug 27, 2019

withAbortSignal could certainly be implemented, but really seems like abortableFetch would be way simpler

const abortableFetch = (url, opts) => {
    const controller = new AbortController();
    const signal = controller.signal;
    const promise = fetch(url, {
        ...opts,
        signal,
    })
    promise[CANCEL] = () => controller.abort()
    return promise
}
@slorber

This comment has been minimized.

Copy link
Contributor Author

commented Aug 28, 2019

So, you would see redux-saga automatically try to call promise.cancel() (if present) on yield promise ?

@Andarist

This comment has been minimized.

Copy link
Member

commented Aug 28, 2019

Yes, kinda. This is already supported.

@Andarist

This comment has been minimized.

Copy link
Member

commented Sep 16, 2019

@slorber this can be closed, right?

@slorber slorber closed this Sep 17, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.