Pause HTTP fetch() requests

Question

As seen in Stack Overflow - How do I cancel an HTTP fetch() request?, we can nowadays abort a fetch() request using AbortController.

Instead of aborting a fetch() request, I'd like to merely pause it and resume it later. Is it possible?

Answer 1

To answer the root of your question:

Instead of aborting a fetch() request, I'd like to merely pause it and resume it later. Is it possible?

The answer is "no, it is not possible."

That said, to answer your comment:

the main use case is some event happening that is of utmost priority and all other pending requests should be paused. The other requests should resume once the urgent request is finished.

You can probably implement something like a priority queue (either manually or via some existing library, that's outside the scope of this question), such that your application handles the result of the completed fetch promise after any higher priority results are handled.

Answer 2

It is Actually not possible to pause and resume the HTTP request from the other js methods except the AbortController,

i) we can use fetch() call inside a promise and we can actually decide whether to reject or resolve the request whether you want to pause or reject the requests. this will not support u the resume feature.

ii) The AbortController does the similar functionality of pausing the requests (aborting the on going request) and upon using the same controller make the requests again

const controller = new AbortController();
const signal = controller.signal;    
fetch(url, {..., signal: signal}).then(response => ...);

To pause :

controller.abort() 

To resume: fetch(url, {..., signal: signal}).then(response => ...); basically we are making one more request using the same controller object used fetch again.

refer here for more data : https://developer.mozilla.org/en-US/docs/Web/API/AbortController

iii) if your are looking for stream process pause / resume which is happening through http you can use the below sample method i found here : https://gist.github.com/Grigore147/4611134

var Http = require('http');
var Fs   = require('fs');

// some url to big video file
var url = 'url';
var path = 'save_path';

var downloaded = 0;
var percents = 0;
var size = 0;

var request = Http.request(url, function(response) {
  size = parseInt(response.headers['content-length']);
  
  response.on('data', function(chunk) {
    downloaded += chunk.length;
    percents = parseInt((downloaded / size) * 100);
    
    console.log(percents +'%', downloaded +'/'+size);
  });
  
  response.on('error', function(error) {
    console.log(error);
  });
  
  response.pipe(Fs.createWriteStream(path));
  
  setTimeout(function() {
    response.pause(); console.log('stream paused');
    
    setTimeout(function() {
      response.resume(); console.log('stream resumed');
    }, 5000);
  }, 5000);
}).end();

Answer 3

It is not possible to pause a fetch(). The AbortController is there to cancel, not pause. And since it will cancel, it cannot be resumed. It's like taking a knife to a string. Cancel == cut in this analogy.

So, there are several approaches you might consider.

1. split one big request into multiple smaller ones
2. apply the Range header to receive multiple parts, but then you must join them yourself and the header must be supported.
3. maybe you could read up on ReadableStream and whether it can be applied here (long shot)
4. https://stackoverflow.com/a/75537289/2119863 looks promising too ;)