How to cancel all requests in ComponentWillUnmount?

Question

According to docs, ComponentWillUnmount can cancel requests.

I have a page that requests loading an iframe, as well as other page requests. If the user decides to go from the page while the page is still processing requests, how can I cancel these requests so that they do not affect other pages that the user goes to after that?

I should note that I use the Redux and Redux saga.

Answer 1

Technically, you cannot cancel or break a promise because the web browser does not provide any method for this.

, . :

Redux, Thunk

. Redux, . redux-promise-middleware Thunk Redux.

- :

case 'LOAD_ORDERS_SUCCESS':
  if state.location != 'orders' { return }

  // store the data in the application state

RxJS

Observables - Promises.

redux-observable Netflix, , Observable . recipe :

const fetchUserEpic = action$ =>
  action$.ofType(FETCH_USER)
    .mergeMap(action =>
      ajax.getJSON(`/api/users/${action.payload}`)
        .map(fetchUserFulfilled)
        .takeUntil(action$.ofType(FETCH_USER_CANCELLED))
    );

Answer 2

componentWillUnmount . , , , .

XHR, Promise, . , componentWillUnmount , Promises .

- , , , , . , , componentWillUnmount, , .

, , : , , , . this.statePromises. , /, this.statePromises. componentWillUnmount

componentWillUnmount() {
  this.statePromises.forEach(p => p.cancel());
 }

p . - bluebird, promises. , componentWillUnmount .

Answer 3

. , . ajax DidMount. , , CDM, - .

, , . , .

.

,