javascript - xhr.onload 和 xhr.onprogress 有什么区别

Question

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 代码中找到什么区别呢？

Answer 1

spec还说:

The XMLHttpRequestEventTarget.onprogress is the function called periodically with information when an XMLHttpRequest before success completely

onload 当进度为 100% 时调用

还要注意 onprogress 函数是用 event object 调用的包括

event.loaded: the amount of data currently transfered.

event.total: the total amount of data to be transferred.

这是一个例子:

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。尝试打开一个新的 Google 标签页并将该代码粘贴到控制台中。

顺便说一句，除非服务器提供，否则 event.total 将为 0