Comments (12)
I guess you could just go with
function futch(url, opts={}, onProgress) {
return new Promise( (res, rej)=>{
var xhr = new XMLHttpRequest();
xhr.open(opts.method || 'get', url);
for (var k in opts.headers||{})
xhr.setRequestHeader(k, opts.headers[k]);
xhr.onload = e => res(e.target.responseText);
xhr.onerror = rej;
if (xhr.upload && onProgress)
xhr.upload.onprogress = onProgress; // event.loaded / event.total * 100 ; //event.lengthComputable
xhr.send(opts.body);
});
}
futch('/').then(console.log)
for now
from fetch.
The XHR instance is an implementation detail of the polyfill that is not exposed to callers.
The best way to upload files, with progress events, is still using XHR directly rather than fetch
. You might open an issue on the Fetch API repository to request this feature, though!
from fetch.
Progress is something that is important to me. As such also willing to implement a best-attempt polyfill today for progress likely by implementing the needed subset of a readable stream.
From reading responses to the previous issue and asking some questions is seems like: response.body will be a readable stream from https://streams.spec.whatwg.org/ and you'll also be able to provide a readable stream when creating responses too. Streams everywhere
I suspect the response.body byte stream may carry sufficient information to create reasonable progress events. That being said, from my quick reading this will likely be more be more verbose then I suspect most would want to endure. (but maybe its ok?)
// example source https://github.com/yutakahirano/fetch-with-streams/
function consume(stream, total = 0) {
while (stream.state === "readable") {
var data = stream.read()
total += data.byteLength;
console.log("received " + data.byteLength + " bytes (" + total + " bytes in total).")
}
if (stream.state === "waiting") {
stream.ready.then(() => consume(stream, total))
}
return stream.closed
}
fetch("/music/pk/altes-kamuffel.flac")
.then(res => consume(res.body))
.then(() => console.log("consumed the entire body without keeping the whole thing in memory!"))
.catch((e) => console.error("something went wrong", e))
Maybe @domenic or @jakearchibald have some ideas how this can be improved? Or how one may want to interact with it in such a way that this is easier to digest. Or how the polyfil may look.
I suspect we should assemble some examples where progress is used (data-binding/etc). This will help us craft something that is hopefully ergonomically appealing.
from fetch.
Thanks. I just filed an issue there.
from fetch.
wanted native fetch methods to get the progress
from fetch.
Is there a current work-around if we need to track progress of a file-upload with the fetch polyfill? Or are we forced to use a different library or XHR directly?
from fetch.
@axelson Since fetch itself doesn't support progress callbacks, you're forced to use XHR directly, unfortunately. There's nothing to stop you from using 3rd-party libraries for this either, but this polyfill can't help with your need.
from fetch.
@mislav in the meantime, would it be possible to expose the xhr object fetch uses to make this easier? I built a REST client using fetch and need to display upload progress on just one POST. It would suck having to rewrite the whole thing just for this one case.
from fetch.
To others, for posterity: @olalonde's question got answered in a separate thread: #290 (comment)
from fetch.
When will it be supported in the fetch?
from fetch.
@dharmax whatwg/fetch is more where it should be discussed I think whatwg/fetch#21
from fetch.
This is not a place to request features for fetch. Instead, please head to whatwg/fetch#607
Thank you!
from fetch.
Related Issues (20)
- 📢 🎉 We’ve made some exciting improvements to our [REST API documentation](https://docs.github.com/en/rest) and we'd love to know what you think about the new layout! Let us know 👇 HOT 1
- Thanks for opening this pull request! A GitHub docs team member should be by to give feedback soon. In the meantime, please check out the [contributing guidelines](https://github.com/github/docs/blob/main/CONTRIBUTING.md). HOT 1
- This repository is moving from the github org HOT 2
- Owner [email protected]
- 2018 license appachie com [email protected]
- Refused to get unsafe header "set-cookie"
- Owner
- changelog is missing for latest releases HOT 1
- File fetching broken since commit 0c1d2b9 HOT 3
- Create a Security Policy HOT 1
- Enable OpenSSF Scorecard Action HOT 3
- `Set-Cookie` headers should not be combined / Support `Headers.getSetCookie()` method
- Hash pin actions used on workflows and enable depenadabot
- code is working in chrome, not in firefox HOT 2
- Overriding feature detection HOT 1
- suggestion to use str.indexOf(searchString) === 0 for better compatibility HOT 2
- UMD Releases don't exist HOT 1
- Linkedin uses status code 999 which leads to RangeError HOT 4
- Response does not resolve until body fetched
- Response.body is always undefined
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fetch.