https://github.com/samundrak/fetch-progress
Progress of response for fetch API
https://github.com/samundrak/fetch-progress
ecmascript fetch javascript progress
Last synced: 12 days ago
JSON representation
Progress of response for fetch API
- Host: GitHub
- URL: https://github.com/samundrak/fetch-progress
- Owner: samundrak
- License: mit
- Created: 2018-04-05T18:33:08.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-03-01T19:40:05.000Z (about 2 years ago)
- Last Synced: 2025-04-09T18:17:02.822Z (12 days ago)
- Topics: ecmascript, fetch, javascript, progress
- Language: JavaScript
- Homepage: https://samundrak.github.io/fetch-progress/
- Size: 679 KB
- Stars: 88
- Watchers: 2
- Forks: 12
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# [Fetch Progress](https://samundrak.github.io/fetch-progress)
Progress of response for fetch API.
Get progress report of your response called from fetch like percentage, speed, total, transferred, eta and remaining.
## Install
`npm i fetch-progress`
## Usage
import `fetchProgress` method to your project
```js
import fetchProgress from 'fetch-progress
```
Now use `fetchProgress` method on your fetch calls, try to put this before using response. You can
```js
fetch(this.props.src)
.then(
fetchProgress({
// implement onProgress method
onProgress(progress) {
console.log({ progress });
// A possible progress report you will get
// {
// total: 3333,
// transferred: 3333,
// speed: 3333,
// eta: 33,
// percentage: 33
// remaining: 3333,
// }
},
})
)
```
# Example
```js
import fetchProgress from '../index';
const self = this;
fetch(this.props.src)
.then(
fetchProgress({
onProgress(progress) {
self.setState({ progress });
},
onError(err) {
console.log(err);
},
})
)
.then(r => r.blob())
.then(src => {
this.src = URL.createObjectURL(src);
this.setState({
loaded: true,
});
});
```
# Demo
[Live Demo](https://samundrak.github.io/fetch-progress)
Clone this repo and run `npm i` and `npm run dev` which will start a server or you can see `examples/` folder in this repo.