Как скачать файл через XMLHttpRequest?

Question

[Dimazsever]

Не получается скачать файл с сервера. Сервер выдает коды состояния в консоль в таком порядке(readyState, status):
2 200 - сервер ответил
3 200 - файл загружается
4 200 - файл скачался
Когда получаю состояние 2, очищаю таймер, затем ожидаю состояния 4. Но этот код почему то не работает. Что я не так делаю?

var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';
var timeout = setTimeout(function(){
xhr.abort();
console.log( "Сервер не отвечает.");
},5000);
xhr.onreadystatechange = function(){
console.log(xhr.readyState,xhr.status); // показать код состояния и статуса
if(xhr.readyState != 2) return;
clearTimeout(timeout);
if(xhr.readyState == 4){
if(xhr.status == 200){
// скачать файл. Этот код не выполняется
} else {
// вывести ошибку
}
}
}

Comments

[nick4fake]

Можете дать лог ответов в onreadystatechange ?

Answer 1

[Евгений Петров]

if(xhr.readyState != 2) return;
Функция вызывается при каждой смене readyState. Это значит, что когда readyState будет равен 4, функция выполнит возврат.

xhr.onreadystatechange = function (data) {
	if (this.readyState == 2) {
		clearTimeout(timeout);
	} else if (this.readyState == 4) {
		if(this.status == 200){
			console.log(data);
		} else {
			// вывести ошибку
		}
	}
}

Кстати, современные браузеры поддерживают timeout в экземплярах XMLHttpRequest (кроме... Safari:)

Comments

[Dimazsever]

спасибо! В смысле timeout не нужен? Или нужно настроить как-то?

[Евгений Петров]

Можно проверять наличие timeout в экземпляре. Но с учётом неожиданности от Safari, в принципе и setTimeout сойдёт.

[Dimazsever]

@Petroveg как я понял свойство timeout будет работать, только если сервер вернул состояние "4"? Дело в том, что у меня оно все равно срабатывает, хотя файл начал качаться. Но в моем случае сервер возвращает сначала состояние 2, потом состояние 3(файл качается), а 4 возвращает только тогда, когда файл полностью скачался.

[Евгений Петров]

Если использовать нативное свойство timeout у экземпляра XMLHttpRequest, то вообще ничего делать не нужно — abort() вызывается автоматически.

Мы вроде остановились на том, что timeout — это переменная, где хранится ссылка на отложенный код. В своём коде я поставил отмену на readyState == 2.
Вы проверяли в консоли — срабатывает условие this.readyState == 2 или нет?

[Dimazsever]

@Petroveg ваш код работает. Просто я решил попробовать встроенное свойство. Но почему-то оно не реагирует на readyState = 2. Как я понял это свойство нельзя применять для загрузки файлов и оно реагирует только на состояние "4". Я правильно понимаю?

[Евгений Петров]

Нативное свойство timeout не требует действий — через указанный промежуток времени вызывается abort. Мы же просто указываем количество миллисекунд.

Но если очень хочется по возникновению события принудительного окончания запроса что-то сделать, есть свойство ontimeout для задания callback.

[Dimazsever]

@Petroveg Это все понятно. Я не об этом. По идее ведь свойство timeout должно вызывать abort только тогда, когда ответ от сервера не получен. А он получен, но загрузка файла все равно прерывается. Получается, что это свойство отменяет abort только если получено состояние 4. А состояние 4 приходит только после полной загрузки файла. Т.е. как я понял timeout не реагирует на readyState 2, или 3, а только на 4. Исходя из этого, свойство timeout не подходит для загрузки файлов. Или я что-то не понимаю?

[Евгений Петров]

Аха. Это я не совсем вас понял. Да, если даже идёт загрузка, произойдёт прерывание. Только на деле не с помощью abort — это я для иллюстрации написал.

В спецификации буквально так и написано:

When the time has passed, the request has not yet completed, and the synchronous flag is unset, a timeout event will then be dispatched

[Dimazsever]

@Petroveg Спасибо за помощь. А вообще не предусмотрели этот вариант, когда добавили это свойство. Было бы не плохо добавить параметр к этому свойству, в качестве которого передавался бы код состояния. А если параметр не передан, по умолчанию стоял бы readyState = 4. Может об этом можно куда-нибудь сообщить, чтобы доработали?))

[Евгений Петров]

Куда писать не знаю:)
Но вот поскольку вы тестируете — не могли бы проверить — при наступлении readyState == 2 удалить из экземпляра свойство timeout?

Прямо вот так

if (this.readyState == 2) {
	delete this.timeout;
}

[Dimazsever]

@Petroveg неа, не работает. все равно прерывается. так что придется таймер самому делать)