В чем разница между 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

это мое заключение:

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();

onprogress будет запускаться при получении HTTP-ответа браузера, он может запускаться несколько раз.

onload будет запускаться при успешном прогрессировании,

, но прогрессирование может быть неудачным, тогда он будет вызывать onerror или ontimeout или onabord.

в любом случае, он в конечном итоге активирует onloadend.

Answer 2

spec также говорит:

XMLHttpRequestEventTarget.onprogress - это функция, периодически вызываемая с информацией, когда XMLHttpRequest до успешного завершения

onload вызывается, когда прогресс равен 100%

, также обратите внимание, что функция onprogress вызывается с event объектом , состоящим из

event.loaded : количество передаваемых данных.

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, если не предоставлено сервером