Javascript 什么'；s xhr.onload和xhr.onprogress之间的差异

XMLHttpRequest实例上有五个事件

var xhr = new XMLHttpRequest();

xhr.onloadstart = res => {
    console.log('onloadstart')
}

xhr.onprogress = res => {
    console.log('onprogress')
}

xhr.onload = res => {
    console.log('onload')
}

xhr.onloadend = res => {
    console.log('onloadend')
}

xhr.onreadystatechange = res => {
    console.log(xhr.readyState)
}
console.log(xhr.readyState)

xhr.open('GET', 'https://api.github.com/repos/vuejs/vue/issues');
xhr.send();

这就是结果

/*
1   
onloadstart
2
3
onprogress
4
onload
onloadend 
*/

从结果中，我可以找到调用事件处理程序的顺序

但我很困惑，这些事件到底有什么区别？我知道whatwg规范中说，onlandstart意味着进步已经开始，onprogress意味着进步

但我不明白。我在每个事件处理程序中都尝试过这段代码

console.log(res)
console.log(res.target.status)
var result = res.target.responseText
console.log(JSON.parse(result))
console.log(res.target.getAllResponseHeaders())
console.log(res.target.getResponseHeader('x-ratelimit-remaining'))

结果完全相同

那么，我们可以在javascript代码中找到什么区别呢？

还说：

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

onload

在进度为100%时调用

还请注意，

onprogress

函数是通过包含

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

事件总数：要传输的数据总量

下面是一个例子：

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。试着打开一个新的谷歌标签，并在控制台中粘贴代码

顺便说一句，

事件。除非服务器提供，否则总数将为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。
我添加了一个示例