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 · 6 comments
Closed

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

slorber opened this issue Aug 27, 2019 · 6 comments

Comments

@slorber
Copy link
Contributor

@slorber slorber 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
Copy link
Member

@Andarist Andarist 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
}

Loading

@slorber
Copy link
Contributor Author

@slorber slorber commented Aug 28, 2019

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

Loading

@Andarist
Copy link
Member

@Andarist Andarist commented Aug 28, 2019

Yes, kinda. This is already supported.

Loading

@Andarist
Copy link
Member

@Andarist Andarist commented Sep 16, 2019

@slorber this can be closed, right?

Loading

@slorber slorber closed this Sep 17, 2019
@PaulKujawa
Copy link

@PaulKujawa PaulKujawa commented Nov 1, 2019

But this does not work if one uses async await.

Loading

@IvanSakhman
Copy link

@IvanSakhman IvanSakhman commented Nov 4, 2019

@slorber @Andarist does not work for me also.

Loading

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
4 participants