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也说：

  

XMLHttpRequestEventTarget.onprogress是在XMLHttpRequest完全成功之前会定期调用带有信息的函数

onload在进度为100％时被调用

还请注意，onprogress函数是由包含以下内容的event object调用的：

  

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

     

event.total ：要传输的数据总量。

这是一个例子：

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标签，并将该代码粘贴到控制台中。

btw，event.total将为0，除非服务器提供了

Answer 2

这是我的结论：

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响应时会触发进行中，可能会多次触发。

进度成功后将触发加载

但是进程可能会失败，然后将触发错误，超时或异常。

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