JavaScript XMLHttpRequest.abort() — перервати запит

Метод abort() перериває запит, що вже пішов у мережу.

автор: NagarD

Загальний опис

Найчастіше — це кнопка «Скасувати» біля смуги завантаження файлу.

Після переривання спрацьовує подія abort, а onload — ні. Тому логіку успіху туди класти безпечно: вона не виконається.

Статус (xhr.status) після переривання стає нулем — на це варто зважати, якщо перевіряєш його в спільному обробнику.

автор: NagarD

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач
abort	1+	1+	1.2+	8+	12+	7+

Підтримка: мобільні переглядачі
Переглядач
abort	yes	yes	yes	yes

Приклади

+ запропонувати свій приклад у пісочниці

Кнопка «Скасувати» біля завантаження файлу.

HTML

<form id="f">
    <input name="title" value="Запис">
</form>
<progress id="bar" value="0" max="100"></progress>
<button id="cancel">Скасувати</button>

const form = document.getElementById('f');
const bar = document.getElementById('bar');

const xhr = new XMLHttpRequest();

xhr.upload.onprogress = event => {
    if (event.lengthComputable) {
        bar.value = event.loaded / event.total * 100;
    }
};

xhr.onload = () => console.log('Готово');  // після abort НЕ спрацює
xhr.onabort = () => console.log('Скасовано користувачем');
xhr.onerror = () => console.log('Помилка мережі');

xhr.open('POST', '/api/upload');
xhr.send(new FormData(form));

document.getElementById('cancel').addEventListener('click', () => {
    xhr.abort();
});

автор: NagarD

Коментарі

Коментарів ще немає — будьте першим!