Is there a way to continue a failed fetch request?

I am curious about the possibility of resuming an incomplete fetch request if it fails due to a non-code-related issue, like a lost network connection.

In one of my current projects, we send a large download via AJAX to the client after they log in. This response can be over 70mb and may take some time to complete. The progress is shown as a readable stream to keep the user informed.

My concern is whether it's feasible to pick up where we left off if the user's network connection drops during the download, or if we have to start from scratch. I've researched how the fetch API operates, how browsers manage downloads, and how the XMLHttpRequest object works with the fetch API. It seems that most major browsers support partial downloads (referencing this KeyCDN post), with additional help from the web server sending the file. However, I haven't found any evidence of this capability within the fetch API. Any insights on this matter would be welcomed.

javascriptajaxxmlhttprequestfetch-api

Answer №1

Just like @Christopher mentioned, the solution to this issue can be found in HTTP Range Requests.

To make a range request, it's essential for the server to support it by including the following header:

Accept-Ranges: bytes

Subsequently, the client needs to include the Range header in its request like so:

Range: bytes=0-1023

The amount of data bytes to be received per request is at your discretion.

If the server responds with only partial data, it will return the status code 206, denoting Partial Content. More details are available through the provided link.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to change an ISO 8601 date into the format '/Date(1525687010053)/' using JavaScript?

Is there a way to convert a date value that is formatted as 9999-12-31T00:00:00Z to the format /Date(1525687010053)/ using javascript? I tried implementing the following code, but it doesn't seem to be working: var datevalue = '9999-12-31T00:00 ...

javascripttypescriptdatedate-formattime-format

Is it possible to share deep links with just a hashtag?

I am currently developing a web application and I want to include social media buttons such as Facebook Like. I have tried using the HTML code/API provided by Facebook, AddThis, Shareaholic, ShareThis, but none of them seem to properly handle my deep link ...

htmlajaxfacebookdeep-linkingaddthis

What's causing this failed request in jQuery Deferred to unexpectedly resolve?

Trying to handle two AJAX deferreds, with a success message if both succeed and an error message if one fails. Check out the simplified code: var reqs = $.map(['file', 'db'], function(mode) { $.get(wspath(desyn.repo_id, 'rever ...

jqueryajaxcallbackjquery-deferred

Go to a different page when a row is selected in a PrimeFaces datatable

My primefaces datatable is displaying a number of records. I want to navigate to another page when a row is selected (for editing the selected entity, for example). The closest example I found was using the p:ajax tag to bind the rowSelect event to a lis ...

ajaxjsf-2primefacesliferay-6

Unable to send parameters via URL when making an Ajax request in Rails

Struggling to pass a parameter through a URL in an Ajax request that's triggered by a confirmation dialog. Need the value of that parameter in my Rails controller upon successful request but can't seem to make it work. Tried the following code s ...

javascriptjqueryruby-on-railsajax

How can I customize the <span> element created by material-ui?

Is there a way I can customize the appearance of the <span> tag that is produced when using the Checkbox component from the material-ui library? Essentially, I am seeking a method to alter: <span class="MuiButtonBase-root-29 MuiIconButton-root-2 ...

javascriptreactjsmaterial-ui

A straightforward interval-based Ajax request

I've recently delved into the world of Ajax and jQuery. Just yesterday, I embarked on creating a simple ajax request for a form that sends a select list value to a PHP script and retrieves data from a database. Things are going smoothly so far! Howev ...

javascriptphpjqueryajax

Tips for effectively utilizing Mongoose models within Next.js

Currently, I am in the process of developing a Next.js application using TypeScript and MongoDB/Mongoose. Lately, I encountered an issue related to Mongoose models where they were attempting to overwrite the Model every time it was utilized. Here is the c ...

javascriptnode.jstypescriptmongoosenext.js

What is the best way to iterate through an array of images and upload them individually, ensuring that they do not have duplicate names

In my current code snippet, I am working with an array of images called images and uploading each image within that array. Everything seems to be working correctly, but I am encountering a minor issue where all the uploaded images end up having the same na ...

javascriptreactjs

Encapsulate the module function and modify its output

I am currently utilizing the node-i18n-iso-countries package and I need to customize the getNames function in order to accommodate a new country name that I wish to include. At the moment, I am achieving this by using an if-else statement like so: let cou ...

javascriptreactjstypescriptinternationalizationwrapper

How to include a key-value pair to a JSON object within an array using JavaScript

I am looking to include the following functionality in the JSON data provided below: "Check if the key name default exists, and if it does, add another key within the same object => ("pin" : 91)." I have attempted to achieve this using the code snippet b ...

javascriptjsoncrud

Why does AngularJS treat $http response.data as an object, even though PHP sends back a JSON string?

I am struggling with an AJAX call to PHP. The Angular code seems simple: $http( { // ... } ) .then( function cf_handle_success( response ) { console.log( response.data ) ; // --> [object Object] } , ...

javascriptphpangularjsjsonajax

What is the best way to manage files in Vue.js?

I am faced with a challenge in storing image files and video files as Blob data. One thing I like is that the uploaded video and image files display instantly, which is pretty cool. I'm not entirely sure if the code below is correct - how can I navi ...

javascriptlaravelvue.js

The animation of a disappearing div with CSS is not stopping when hovering over it

Hello, I've been working on a snackbar feature that appears and disappears on a set timer but also needs to pause when hovered over. Unfortunately, the current setup with setTimeout and useState is causing issues with this functionality. I have looke ...

javascripthtmlcssreactjs

What is the correct way to utilize Html.Raw(Json.Encode(Model))?

I'm facing an issue with encoding my MVC Model using the code snippet below. The alert message is returning a null value, which is confusing to me since this is a create form. The HTML code structure is as follows: @using (Html.BeginForm()) { @H ...

jqueryajaxjsonasp.net-mvcasp.net-ajax

How to use jQuery to locate and update the final parameter of a URL

Hello everyone, I've already done some research but couldn't find a solution that fits my needs. Can anyone assist me with this? I currently have a URL "/view/album/4/photo/1" and I am looking to remove the final parameter and replace it with so ...

javascriptjquery

ajaxStop and ajaxStart not functioning as expected

Currently working on a project to create a Wikipedia viewer, and running into an issue with the following code snippet: $(document).ready(function() { $(document).on('click', '#search_button', function() { ...

javascriptajax

Show items in the sequence of clicking

Is there a way to display elements in the order they're clicked, rather than their order in the HTML using jQuery? For example: CSS code: .sq{ display:none; } HTML Code: <a href="#" id="1">A</a> <a href="#" id="2">B</a> ...

javascriptjqueryhtmlcss

Guidelines for placing an HTML element in relation to another HTML element using CSS or JavaScript

Is there a way to position an HTML element in relation to another using CSS or JavaScript? I have attempted to copy the inner HTML of the "second-element" and append it inside the "first-element", but this approach is causing issues with other functional ...

javascripthtmlcsspositioncss-position

Encounter an error parsing the package.json file. Confirmed that it is valid JSON

As I embark on creating my very first yeoman generator, I have encountered an issue when running yo to initiate the project. The error message I am receiving is as follows: npm ERR! install Couldn't read dependencies npm ERR! Darwin 14.0.0 npm ERR! a ...

javascriptjsonnode.jsnpmpackage.json