Stop initiating the HTTP fetch() requests

Question

Stop initiating the HTTP fetch() requests

Found on Stack Overflow - How can I stop an HTTP fetch() request?, it is now possible to cancel a fetch() request using AbortController.

Instead of canceling a fetch() request, I am interested in pausing it temporarily and then resuming it at a later time. Is this achievable?

javascript ajax http fetch-api http-streaming

Answer 1

Answer №1

Let's dive into the heart of your inquiry:

Is there a way to temporarily halt a fetch() request and then resume it at a later time, rather than completely canceling it?

The definitive answer is "no, this functionality is not supported."

With that in mind, in response to your additional query:

The primary scenario involves a critical event occurring that takes precedence over all other pending requests. In such cases, the other requests should be put on hold until the urgent task is completed.

One potential solution could be to create a priority queue system (manually or through a third-party library, beyond the scope of this discussion) where your application manages the outcome of the resolved fetch promise only after addressing any higher-priority tasks.

Answer 2

Let's dive into the heart of your inquiry:

Is there a way to temporarily halt a fetch() request and then resume it at a later time, rather than completely canceling it?

The definitive answer is "no, this functionality is not supported."

With that in mind, in response to your additional query:

The primary scenario involves a critical event occurring that takes precedence over all other pending requests. In such cases, the other requests should be put on hold until the urgent task is completed.

One potential solution could be to create a priority queue system (manually or through a third-party library, beyond the scope of this discussion) where your application manages the outcome of the resolved fetch promise only after addressing any higher-priority tasks.

Answer 3

Answer №2

In order to halt and continue an HTTP request from JavaScript methods, aside from the AbortController, there are a few approaches you can take.

i) One method involves using the fetch() call within a promise, allowing you to choose whether to reject or resolve the request based on whether you wish to pause or reject it. However, this approach does not support the ability to resume the request.

ii) The AbortController can be used to achieve a similar functionality by pausing requests (aborting the ongoing request) and then resuming the requests again using the same controller.

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 => ...);

Essentially, this involves making another request using the same controller object.

For more information, you can refer to: https://developer.mozilla.org/en-US/docs/Web/API/AbortController

iii) If you are interested in pausing/resuming stream processing through HTTP, you can refer to the following sample method I discovered: https://gist.github.com/Grigore147/4611134

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

// Provide a URL to a large 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 4

In order to halt and continue an HTTP request from JavaScript methods, aside from the AbortController, there are a few approaches you can take.

i) One method involves using the fetch() call within a promise, allowing you to choose whether to reject or resolve the request based on whether you wish to pause or reject it. However, this approach does not support the ability to resume the request.

ii) The AbortController can be used to achieve a similar functionality by pausing requests (aborting the ongoing request) and then resuming the requests again using the same controller.

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 => ...);

Essentially, this involves making another request using the same controller object.

For more information, you can refer to: https://developer.mozilla.org/en-US/docs/Web/API/AbortController

iii) If you are interested in pausing/resuming stream processing through HTTP, you can refer to the following sample method I discovered: https://gist.github.com/Grigore147/4611134

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

// Provide a URL to a large 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 5

Answer №3

Halting a fetch() operation is not achievable. The purpose of the AbortController is to terminate, not to pause. And since termination is final, there is no option to resume. It's akin to severing a string with a blade. In this analogy, Cancel == cut.

Therefore, various alternative methods can be explored:

Dividing a large request into several smaller ones
Implementing the Range header to fetch multiple segments, with the requirement that the joining process and header support are on your end
Researching the applicability of ReadableStream in this scenario (although it may be a long shot)
appears to offer a potential solution as well ;)

Answer 6

Halting a fetch() operation is not achievable. The purpose of the AbortController is to terminate, not to pause. And since termination is final, there is no option to resume. It's akin to severing a string with a blade. In this analogy, Cancel == cut.

Therefore, various alternative methods can be explored:

Dividing a large request into several smaller ones
Implementing the Range header to fetch multiple segments, with the requirement that the joining process and header support are on your end
Researching the applicability of ReadableStream in this scenario (although it may be a long shot)
appears to offer a potential solution as well ;)

Stop initiating the HTTP fetch() requests

Answer №1

Answer №2

Answer №3

Similar questions

Create your own AngularJS directive for displaying or hiding elements using ng-show/ng

The expected React component's generic type was 0 arguments, however, it received 1 argument

Visual UpdatePanel control layout in a SharePoint web part using AJAX with C#

Utilize prop-types inheritance when a component is rendered via props

Exploring the testing capabilities of Angular JS in conjunction with third-party libraries such as

Is there a method to refresh the entire DOM-based location without having to reload the browser window?

Combining two arrays of names and values into a fresh object using Javascript

Extract a section of the table

Linking states using AngularJS and jQuery

Assess the scss styles specific to components following the global min.css in a React application

What is preventing the input box from shrinking further?

Utilizing 'Ng-If' causes a glitch in the program during the execution of a $( '#x' ).change event or when adding a new item with AngularFire $add

The class .is-invalid transforms into .is-valid when rendered

How can you modify Jquery show_hide so that the page automatically scrolls to the bottom of the concealed field when the button is clicked?

Allow users to zoom in and out on a specific section of the website similar to how it works on Google Maps

Exploring the potential of utilizing records within deepstream.io

Having trouble linking the component to the Redux store

Maximizing the potential of .delegate in combination with .closest

Create a dynamic image showcase using PHP or JavaScript

Tips for displaying user-entered information from a form after submitting it with PHP