Creating a cancel button... how to completely abort a request in Node/Express.js

Question

I want to create a "Cancel" button in my app. The request the button is meant to cancel contains a Promise.all that usually takes a few minutes to complete due to API rate limiting on the other end.

If I have a route like this:

router.get('/api/my_route', (req, res, next) => {

//imagine this takes about 2 minutes to complete and send back the 200.
//The user changes their mind and wants to cancel it at the 1 minute mark.

  fetch("https://jsonplaceholder.typicode.com/albums")
    .then(first_response => first_response.json())
    .then(arr => Promise.all(arr.map(item => 
       fetch("https://jsonplaceholder.typicode.com/users")
       .then(second_response => second_response.json())
       .then(value => console.log(value))
      )))
    .then(() => {
        res.status(200);   
    });
});

How do you cancel this and completely abort it in the middle of making the Promise requests?

Answer 1

You would use an AbortController in order to abort the fetch requests and listen to the close event on the request to know the client closed the connection:

router.get('/api/my_route', (req, res, next) => {
  // we create a new AbortController to abort the fetch request
  const controller = new AbortController();
  const signal = controller.signal;

  req.on('close', err => { // if the request is closed from the other side
    controller.abort(); // abort our own requests
  })


  fetch("https://jsonplaceholder.typicode.com/albums", {signal})
    .then(first_response => first_response.json())
    .then(arr => Promise.all(arr.map(item => 
       fetch("https://jsonplaceholder.typicode.com/users", {signal})
       .then(second_response => second_response.json())
       .then(value => console.log(value))
      )))
    .then(() => {
        res.status(200);
    });
});