uk en

Переривання HTTP запитів використовуючи fetch, React та Redux-Saga

Квітень 6, 2021 ☕️ 4 хв читання

Привіт, читачу! Техніка, що описана у даній статті, актуальна тільки у випадку використання fetch, бібліотек React та Redux-Saga. Вирішення цієї проблеми має практичне застосування. Уявімо що ми здійснюємо відправку великого файлу на сервер, але користувач неочікувано вирішив відмінити завантаження. Це означає що нам потрібно зупинити процес завантаження даних на сервер.

Спочатку визначаємо стартову точку для saga. Далі створюємо безкінечний цикл. Усередині циклу форкаємо обробник завантаження файлу. Це для того щоб зберегти посилання на обробник та продовжити виконання, не чекаючи на його завершення. Далі використовуємо takeEvery, на кожну дію переривання завантаження ми викликаємо обробник переривання та передаємо форкнутий обробник завантаження.

Saga обробник для переривання завантаження файлу.

Переривання запиту відбувається за допомогою об'єкту AbortController. Створюємо новий екземпляр abortController (4 стрічка). Далі передаємо його як додатковий параметр signal до методу завантаження файлу fetch (10 стрічка). Обробка успіху або помилки завантаження файлу відбувається за звичайним saga сценарієм. Нас цікавить секція "finally". Дана секція виконується у будь-якому випадку. Отже, саме у цій секції ми слідкуємо чи завдання було перервано. Якщо так, тоді й запит на сервер потрібно зупинити за допомогою методу abort (19 стрічка). Ось і все.

Такою простою технікою вирішується досить нетривіальна та важлива задача переривання запитів на сервер. Зверніть увагу що цей метод розглядає саме fetch, тоді як XMLHttpRequest має свій механізм зупинки запиту.

Якщо моя розповідь вам допомогла, ви знайшли помилку або можете запропонувати покращення, будь ласка не соромтеся написати мені. Мої контакти ви знайдете на початку сторінки 😉