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

Developing a two-dimensional JavaScript array using an AJAX PHP request

I've been working with a MySQL table that stores image data. My goal is to extract this image data and store it in a JavaScript array. The fields I need for the array are "image_ref" and "image_name." To achieve this, I understand that I'll nee ...

javascriptphpajaxjsonmultidimensional-array

Retrieve the string data from a .txt document

I am facing an issue with my script that retrieves a value from a .txt file. It works perfectly fine when the value is a number, but when trying to fetch text from another .txt file, I encounter the "NaN" error indicating it's not a number. How can I ...

javascripthtmlvariablesget

Divide the table row and store each cell using regular expressions

Here is the original source text: gi0/1 1G-Fiber -- -- -- -- Down -- -- Access gi0/2 1G-Fiber -- -- -- -- Down -- -- gi0/3 1G-Fiber -- -- -- -- Down -- -- gi0/4 1G-Fiber -- -- -- -- Down -- -- gi0/5 1G-Fiber -- -- -- -- Down -- -- gi0/0/1 1G-Fiber -- ...

javascriptregex

The Process of Developing Applications

As a newcomer to web development, I have a solid understanding of HTML and CSS, and am learning JavaScript. When considering creating a web app, would it be better for me to focus on writing the functionality in JavaScript first before integrating it int ...

javascriptangularjsweb-applicationsreactjs

Dynamic blog posts experiencing issues with syntax highlighting feature

I am currently developing a blog using Vue and have decided to incorporate syntax highlighting for the code snippets in my posts by utilizing vue-highlightjs. In order to write the content of my blog posts, I am simply using a textarea within my admin pane ...

javascriptvue.jshighlight.js

React Native does not support Laravel Echo's listenForWhisper functionality

I have successfully implemented private channels and messaging in my Laravel App using websockets:serve. Now, I am attempting to enable whisper functionality for the typing status but encountering some issues. When sending a whisper: Echo.private('c ...

javascriptreactjslaravelreact-native

Error occurred due to a reference to a function being called before it was

Occasionally, I encounter a "Reference Error" (approximately once in every 200 attempts) with the code snippet below. var securityPrototype = { init: function(){ /* ... */ }, encryptionKey: function x() { var i = x.identifier; ...

node.jsgoogle-chromejavascriptjavascript-objects

Passport.js: Navigating Users in the Right

I've been working on integrating passport.js, passport-google-oauth, and nodjes to retrieve a user's profile locally. However, I'm facing an issue with the redirect after logging in. Although the information is successfully loaded (I can acc ...

javascriptnode.jspassport.js

Solving the Challenge of URL Issue in Ajax Call to MVC Controller

I have searched extensively for a solution to my jQuery/MVC problem, but haven't found one that works. Here is the JavaScript code I am using: $.ajax({ type: "POST", url: '@Url.Action("Search","Controller")& ...

javascriptjqueryajaxasp.net-mvc-3

"Troubleshooting a blank page issue in Angular UI Router caused by query string

I've been struggling with an issue related to query string parameters for quite some time. When I navigate to /, everything works perfectly fine. However, if I try something like /?anything, it simply doesn't work. These are the configurations in ...

javascriptangularjsquery-stringangular-ui-router

Access an object's property from within a callback function

I have an async.series() function that is calling a method from another Javascript object: main.js var obj1 = require('./obj1'); var obj2 = require('./obj2'); async.series([ obj1.myFunc1, obj2.anotherFunc ]); obj1.js module ...

javascriptnode.jsasync.js

Error message: "Named export cannot be identified"

My file structure looks like this: routes auth login index.js Login.jsx routes.js Within the routes.js file, I have the following code snippet: import { Route } from 'react-router-dom'; import { Login } from './login ...

javascriptreactjsecmascript-6import

How can you display an alert message when new data is successfully added to a database using ajax?

In my web application, I have implemented a functionality to display an alert message when new data is successfully inserted into the database. The Ajax code below is responsible for sending a request to the EditDeleteLecture.php file. However, a challenge ...

javascriptphpajax

NPM Messer - the innovative chat tool for Facebook Messenger. Ready to see it in action?

Previously, I had the idea of creating my own Messenger client. However, when I reviewed the documentation, it only provided instructions on how to write a chatbot. Despite this obstacle, I stumbled upon something intriguing - a Messer command line client. ...

javascriptnpmfacebook-messengerfacebook-chat

Update a Div automatically without causing it to scroll back to the beginning of the Div

I'm encountering an issue with a script on my website that refreshes a Div every 20 seconds. The problem is, after the refresh, it automatically scrolls to the top of the Div. I want it to remain at the last scroll position and not jump to the top. Ca ...

javascriptjquery

Mastering the art of Promises and handling errors

I've been tasked with developing a WebApp using Angular, but I'm facing a challenge as the project involves Typescript and asynchronous programming, which are new to me. The prototype already exists, and it includes a handshake process that consi ...

javascriptangulartypescript

Using API calls to update component state in React-Redux

I am currently working on setting up a React application where clicking on a map marker in one component triggers the re-rendering of another component on the page. This new component should display data retrieved from a database and update the URL accordi ...

javascriptreactjsreact-redux

Issue with Bootstrap4 Carousel not scrolling horizontally

I'm currently working on creating a carousel following the Bootstrap code snippet page. It features three images and is designed to have slide controls that move left and right. The script tags with the necessary scripts are located at the bottom of t ...

javascripthtmlcssbootstrap-4

A guide to loading CSS and JavaScript files asynchronously

Is it possible to use loadCSS (https://github.com/filamentgroup/loadCSS/blob/master/README.md) to allow the browser to asynchronously load CSS and JavaScript? This is what I currently have in my head tag: <link rel="preload" href="http://zoidstudios. ...

javascripthtmlcss

Issue with CORS on Next.js static files leading to broken links on version 10.1.4

Currently, my Nextjs application is fetching its static files from Cloudfront. During deployment, I upload the /static folder to S3. After updating to version 9, I encountered a strange problem where some of my CSS files are triggering a CORS error: Acces ...

javascriptamazon-s3cachingcorsnext.js