According to the docs, ComponentWillUnmount is able to cancel requests.

I have a page that makes requests for an iframe to load, as well as other requests for page. If the user decides to navigate away from the page while the page is still processing the requests, how can I cancel those requests so that it doesn't affect the other pages the user goes to thereafter?

I should note that I am using Redux and Redux-saga.

According to the docs, ComponentWillUnmount is able to cancel requests.

I have a page that makes requests for an iframe to load, as well as other requests for page. If the user decides to navigate away from the page while the page is still processing the requests, how can I cancel those requests so that it doesn't affect the other pages the user goes to thereafter?

I should note that I am using Redux and Redux-saga.

• javascript
• reactjs

• 2 ponentWillUnmount cannot cancel "requests". It is a place where you are supposed to perform any necessary cleanup. What exactly that is depends on what you are doing and has nothing to do with React. So, if you have a specific question about aborting loading an iframe, you should ask that (again, it has nothing to do with React). However, there is already a question about that: How to stop iframe loading? – Felix Kling Commented Dec 12, 2016 at 22:50

2 Answers 2

Just think of ponentWillUnmount as an opportunity function. It is your opportunity to do as the docs say, perform any additional clean up that React won't do on its own.

As far as XHR requests go, you would need to have a Promise library that supports cancelling the promise. If the library you use does support that then in the ponentWillUnmount you would just make sure you have access to all Promises and cancel each one.

As far as canceling anything else, you just need to use whatever functions are provided for you to cancel whatever it is you want to cancel. If their is a function to cancel it then use the nature of ponentWillUnmount to do so if you need it to be cancelled if the ponent is being unmounted.

As an example of how we use it where I'm at: If a ponent is going to make requests, we set a property on the ponent that is an array and holds all the requests. we would call this this.statePromises. Whenever we make a request/Promise we would push that Promise into the this.statePromises. In the ponentWillUnmount we have the following

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

p being a promise. This only works because of the library, bluebird, that we use for our promises. But that should give you an idea of how you could use ponentWillUnmount to do any additional clean up.

Technically you cannot cancel or abort a promise because the web browser does not expose any method for doing that.

What you can do instead is to just ignore the promise if the user navigated to another page. There are two methods to do that:

Using Redux, Thunk, and a promise middleware

You should not store your application state in your ponent state. By using Redux the application state will be shared amongst all ponents. Then you use redux-promise-middleware in bination with Thunk middleware to handle async actions in Redux.

Simply, in your action you can do something like this:

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

  // store the data in the application state

Using RxJS and observables

Observables is an alternative way to Promises.

There is a library called redux-observable and a video from Netflix that explain how Observable can be used exactly for this very reason. Check out this recipe in their docs:

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