JavaScript XMLHttpRequest.abort() — перервати запит
Метод abort() перериває запит, що вже пішов у мережу.
Загальний опис
Найчастіше — це кнопка «Скасувати» біля смуги завантаження файлу.
Після переривання спрацьовує подія abort, а onload — ні. Тому логіку успіху туди класти безпечно: вона не виконається.
Статус (xhr.status) після переривання стає нулем — на це варто зважати, якщо перевіряєш його в спільному обробнику.
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1.2 | ≤12.1 | 12 | 5 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Кнопка «Скасувати» біля завантаження файлу.
HTML
<form id="f">
<input name="title" value="Запис">
</form>
<progress id="bar" value="0" max="100"></progress>
<button id="cancel">Скасувати</button>JS
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();
});Коментарі
Коментарів ще немає — будьте першим!