AJAX和FETCH请求进度条_fetch 进度_大鲤余的博客

fetch

fetch给了我们可读流实时获取当前的数据量。可读对象的read方法返回promise，我们可以通过其获取{value，done}类似一迭代器的结果。而value的长度就是数据量
class FetchRequest{
    constructor() {
        this.baseURL = 'http://127.0.0.1:3000'
    request(url,method,data,cb) {
        return new Promise(async(resolve, reject) => {
            const res = await window.fetch(this.baseURL+url, {
                method,
                body:data
            const total = res.headers.get('content-length')
            const reader = res.body.getReader()//创建可读流
            let loaded = 0
            while (true) {
                const { done, value } = await reader.read()
                loaded += value?.length || 0
                const progress = loaded / total * 100
                cb && cb()
                if (done) {
                    break;
class XHRRequest {
    xhr = new XMLHttpRequest()
    constructor(options) {
        this.baseURL = options.baseURL
        options.watchProgress && this.watchProgress()
        this.xhr.timeout = options.timeout || 5000
    defaultProgressCb(e) {
        const progress = document.querySelector('.progress')
        progress.textContent = e.loaded / e.total * 100 + '%'
        if (progress.textContent.includes('100')) {
            setTimeout(() => {
                progress.style.display = 'none'
            }, 1000);
    watchProgress(cb) {
        this.xhr.addEventListener("progress", (e) => {
            cb && cb() || this.defaultProgressCb(e)
        });
    closeWatchProgress() {
        this.xhr.removeEventListener('progress')
    request(method = 'GET', url) {
        return new Promise((resolve, reject) => {
            this.xhr.open(method.toLocaleUpperCase(), this.baseURL + url)
            method.toLocaleUpperCase() === 'POST' &&
                this.xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
            this.xhr.send()
            this.xhr.onreadystatechange = () => {
                if (this.xhr.readystate === this.xhr.DONE && this.xhr.status === 200) {
                    resolve(this.xhr.responseText)
                reject(this.xhr.statusText)
将fetchProgress方法导入您的项目
import fetchProgress from 'fetch-progress
 现在在提取调用中使用fetchProgress方法，尝试在使用响应之前将其放入。 你可以
fetch(this.props.src)
    .then(
      fetchProgress({
        // implement onProgress method
        onProgress(progress) {
          console.log({ progress });
          // A possible progress report y
				1. XMLHttpRequest对象
在浏览器中，最开始与服务器交换数据的方式则是通过XMLHttpRequest对象。【它可以使用JSON、XML、HTML和Text文本等格式发送和接收数据。】
1.不重新加载页面的情况下更新网页
2.在页面已加载后从服务器请求/接收数据
3.在后台向服务器发送数据。
1.使用起来也比较繁琐，需要设置很多值。
2.早期的IE浏览器有自己的实现，这样需要写兼容代码。
if (window.XMLHttpRequest) { // model browser
  xhr = new XMLHttpRequest()
} else if (w
本身是针对MVC的编程,不符合现在前端MVVM的浪潮
基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案
JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务）
axios
*中断了从哪个分片开始。
如何分，利用强大的js库，来减轻我们的工作，市场上已经能有关于大文件分块的轮子，虽然程序员的天性曾迫使我重新造轮子。但是因为时间的关系还有工作的关系，我只能罢休了。最后我选择了百度的WebUploader来实现前端所需。
如何合，在合之前，我们还得先解决一个问题，我们如何区分分块所属那个文...
fetch 是一种 HTTP 数据请求的方式，是 XMLHttpRequest 的一种替代方案。
fetch 不是 ajax 的进一步封装，没有使用 XMLHttpRequest对象。fetch 是原生 JavaScript。
fetch 与 ajax 的区别：
fetch()返回的promise将不会拒绝http的错误状态，即使响应是一个HTTP 404或者500——当接收到一个代表错误的 HTTP 状态码时，从 fetch() 返回的 Promise 不会被标记为 reje