xhr.onload和xhr.onprogress之间有什么区别

这个 spec 还说:

XMLHttpRequestEventTarget.onprogress是在XMLHttpRequest完全成功之前定期调用的函数,其中包含信息

onload 当进度为100%时调用

onprogress 函数是使用 event object

事件已加载 :当前传输的数据量。

事件总数 :要传输的数据总量。

下面是一个例子:

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.google.com/search?q=stack+overflow')
xhr.onprogress = e => { console.log(`Loaded ${e.loaded} bytes`, e); }
xhr.send();

这在代码段中不起作用(下载0字节),可能是因为CORS。试着打开一个新的谷歌标签,并在控制台中粘贴代码。

顺便提一下 event.total 除非由服务器提供,否则将为0

这是我的结论:

var xhr = new XMLHttpRequest();

xhr.onloadstart = res => {
    console.log('onloadstart')
    console.log(`Loaded ${res.loaded} bytes`)
}

xhr.onprogress = res => {
    console.log('onprogress')
    console.log(`Loaded ${res.loaded} bytes`)
}

xhr.onload = res => {
    console.log('onload')
    console.log(`Loaded ${res.loaded} bytes`)
}

xhr.onloadend = res => {
    console.log('onloadend')
    console.log(`Loaded ${res.loaded} bytes`)
}
xhr.open('GET', 'https://www.google.com/search?q=stack+overflow');
xhr.send();

浏览器收到HTTP响应时会触发onprogress,可能会多次触发。

进展成功时将触发onload,

但进程可能会失败,然后会触发onerror、ontimeout或onabord。

无论如何,它最终将触发onloadend。