Опановуємо JavaScript AbortController: Безшовне скасування запитів

У динамічному світі сучасної веб-розробки асинхронні операції є основою адаптивних та захопливих користувацьких інтерфейсів. Від отримання даних з API до обробки взаємодій з користувачем, JavaScript часто має справу із завданнями, виконання яких може зайняти певний час. Однак, що відбувається, коли користувач переходить з поточної сторінки до завершення запиту, або коли наступний запит заміщує попередній? Без належного керування ці незавершені операції можуть призвести до марної витрати ресурсів, застарілих даних і навіть неочікуваних помилок. Саме тут на допомогу приходить API JavaScript AbortController, пропонуючи надійний та стандартизований механізм для скасування асинхронних операцій.

Необхідність скасування запитів

Розглянемо типовий сценарій: користувач вводить текст у рядок пошуку, і з кожним натисканням клавіші ваш застосунок робить запит до API для отримання пошукових підказок. Якщо користувач друкує швидко, одночасно може виконуватися кілька запитів. Якщо користувач перейде на іншу сторінку, поки ці запити очікують на виконання, відповіді, якщо вони надійдуть, будуть неактуальними, а їх обробка стане марною тратою цінних ресурсів на стороні клієнта. Крім того, сервер, можливо, вже обробив ці запити, що призвело до непотрібних обчислювальних витрат.

Інша поширена ситуація — коли користувач ініціює дію, наприклад завантаження файлу, але потім вирішує скасувати її на півдорозі. Або, можливо, тривала операція, така як отримання великого набору даних, більше не потрібна, оскільки було зроблено новий, більш актуальний запит. У всіх цих випадках можливість коректно завершити ці незавершені операції є надзвичайно важливою для:

• Покращення користувацького досвіду: Запобігає відображенню застарілих або неактуальних даних, уникає непотрібних оновлень інтерфейсу та підтримує швидкість роботи застосунку.
• Оптимізація використання ресурсів: Економить пропускну здатність, не завантажуючи непотрібні дані, зменшує цикли процесора, не обробляючи завершені, але непотрібні операції, та вивільняє пам'ять.
• Запобігання станам гонитви (Race Conditions): Гарантує, що обробляються лише найсвіжіші актуальні дані, уникаючи сценаріїв, коли відповідь старішого, заміщеного запиту перезаписує новіші дані.

Представляємо AbortController API

Інтерфейс AbortController надає спосіб передати сигнал про скасування одній або кільком асинхронним операціям у JavaScript. Він розроблений для роботи з API, які підтримують AbortSignal, зокрема з сучасним fetch API.

По суті, AbortController має два основні компоненти:

• Екземпляр AbortController: Це об'єкт, який ви створюєте для нового механізму скасування.
• Властивість signal: Кожен екземпляр AbortController має властивість signal, яка є об'єктом AbortSignal. Саме цей об'єкт AbortSignal ви передаєте в асинхронну операцію, яку хочете мати можливість скасувати.

AbortController також має один метод:

• abort(): Виклик цього методу на екземплярі AbortController негайно активує пов'язаний AbortSignal, позначаючи його як скасований. Будь-яка операція, що прослуховує цей сигнал, отримає сповіщення і зможе діяти відповідно.

Як AbortController працює з Fetch

API fetch є основним і найпоширенішим випадком використання AbortController. Роблячи запит fetch, ви можете передати об'єкт AbortSignal в об'єкті options. Якщо сигнал буде скасовано, операція fetch буде передчасно завершена.

Базовий приклад: Скасування одного запиту Fetch

Проілюструймо це простим прикладом. Уявімо, що ми хочемо отримати дані з API, але мати можливість скасувати цей запит, якщо користувач вирішить перейти на іншу сторінку до його завершення.

```javascript // Створюємо новий екземпляр AbortController const controller = new AbortController(); const signal = controller.signal; // URL-адреса кінцевої точки API const apiUrl = 'https://api.example.com/data'; console.log('Ініціюємо запит fetch...'); fetch(apiUrl, { signal: signal // Передаємо сигнал в опції fetch }) .then(response => { if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } return response.json(); }) .then(data => { console.log('Дані отримано:', data); // Обробляємо отримані дані }) .catch(error => { if (error.name === 'AbortError') { console.log('Запит fetch було скасовано.'); } else { console.error('Помилка fetch:', error); } }); // Симулюємо скасування запиту через 5 секунд setTimeout(() => { console.log('Скасовуємо запит fetch...'); controller.abort(); // Це викличе блок .catch з помилкою AbortError }, 5000); ```

У цьому прикладі:

• Ми створюємо AbortController та отримуємо його signal.
• Ми передаємо цей signal в опції fetch.
• Якщо controller.abort() викликається до завершення fetch, проміс, повернутий fetch, буде відхилено з помилкою AbortError.
• Блок .catch() спеціально перевіряє цю AbortError, щоб розрізнити справжню мережеву помилку та скасування.

Дієва порада: Завжди перевіряйте error.name === 'AbortError' у ваших блоках catch при використанні AbortController з fetch для коректної обробки скасувань.

Обробка кількох запитів одним контролером

Один AbortController можна використовувати для скасування кількох операцій, які прослуховують його signal. Це неймовірно корисно для сценаріїв, де дія користувача може зробити недійсними кілька незавершених запитів. Наприклад, якщо користувач залишає сторінку панелі інструментів, ви можете скасувати всі незавершені запити на отримання даних, пов'язані з цією панеллю.

```javascript const controller = new AbortController(); const signal = controller.signal; const apiUrl1 = 'https://api.example.com/users'; const apiUrl2 = 'https://api.example.com/products'; function fetchData(url, name) { console.log(`Ініціюємо запит fetch для ${name}...`); return fetch(url, { signal: signal }) .then(response => { if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } return response.json(); }) .then(data => { console.log(`Дані для ${name} отримано:`, data); }) .catch(error => { if (error.name === 'AbortError') { console.log(`Запит fetch для ${name} було скасовано.`); } else { console.error(`Помилка fetch для ${name}:`, error); } }); } // Ініціюємо кілька запитів fetch fetchData(apiUrl1, 'Users'); fetchData(apiUrl2, 'Products'); // Симулюємо скасування всіх запитів через 7 секунд setTimeout(() => { console.log('Скасовуємо всі запити fetch...'); controller.abort(); }, 7000); ```

Тут операції fetch для 'Users' і 'Products' використовують той самий signal. Коли викликається controller.abort(), обидва запити будуть завершені.

Глобальний погляд: Цей патерн є неоціненним для складних застосунків з багатьма компонентами, які можуть незалежно ініціювати виклики API. Наприклад, міжнародна платформа електронної комерції може мати компоненти для списків товарів, профілів користувачів та зведень кошика, і всі вони отримують дані. Якщо користувач швидко переходить від однієї категорії товарів до іншої, один виклик abort() може очистити всі незавершені запити, пов'язані з попереднім переглядом.

Прослуховувач подій AbortSignal

Хоча fetch автоматично обробляє сигнал скасування, інші асинхронні операції можуть вимагати явної реєстрації для подій скасування. Об'єкт AbortSignal надає метод addEventListener, який дозволяє прослуховувати подію 'abort'. Це особливо корисно при інтеграції AbortController з власною асинхронною логікою або бібліотеками, які не підтримують безпосередньо опцію signal у своїй конфігурації.

```javascript const controller = new AbortController(); const signal = controller.signal; function performLongTask(signal) { return new Promise((resolve, reject) => { const taskDuration = 10000; // Завдання займає 10 секунд let elapsedTime = 0; const intervalId = setInterval(() => { elapsedTime += 1000; console.log(`Прогрес завдання: ${elapsedTime / 1000}с`); if (elapsedTime >= taskDuration) { clearInterval(intervalId); resolve('Завдання успішно завершено!'); } }, 1000); // Прослуховуємо подію скасування signal.addEventListener('abort', () => { clearInterval(intervalId); console.log('Тривале завдання скасовано через прослуховувач подій.'); reject(new DOMException('Скасовано', 'AbortError')); }); }); } console.log('Запускаємо тривале завдання...'); performLongTask(signal) .then(result => console.log(result)) .catch(error => { if (error.name === 'AbortError') { console.log('Операцію було скасовано.'); } else { console.error('Сталася неочікувана помилка:', error); } }); // Скасовуємо завдання через 3 секунди setTimeout(() => { console.log('Ініціюємо скасування...'); controller.abort(); }, 3000); ```

У цьому прикладі:

• Функція performLongTask приймає AbortSignal.
• Вона встановлює інтервал для симуляції прогресу.
• Що важливо, вона додає прослуховувач подій до signal для події 'abort'. Коли подія спрацьовує, вона очищує інтервал і відхиляє проміс з AbortError.

Дієва порада: Патерн addEventListener('abort', callback) є життєво важливим для власної асинхронної логіки, гарантуючи, що ваш код може реагувати на сигнали скасування ззовні.

Властивість signal.aborted

AbortSignal також має булеву властивість aborted, яка повертає true, якщо сигнал було скасовано, і false в іншому випадку. Хоча вона не використовується безпосередньо для ініціювання скасування, вона може бути корисною для перевірки поточного стану сигналу у вашій асинхронній логіці.

```javascript const controller = new AbortController(); const signal = controller.signal; function checkStatus(signal) { if (signal.aborted) { console.log('Неможливо перевірити статус, сигнал вже скасовано.'); return; } console.log('Перевірка статусу...'); // Симулюємо деяку роботу... setTimeout(() => { if (!signal.aborted) { console.log('Перевірку статусу завершено.'); } else { console.log('Перевірку статусу перервано через скасування.'); } }, 2000); } checkStatus(signal); // Скасувати через 1 секунду setTimeout(() => { console.log('Скасування...'); controller.abort(); }, 1000); ```

У цьому фрагменті коду signal.aborted дозволяє перевірити стан перед тим, як продовжувати з потенційно ресурсоємними операціями. Хоча API fetch обробляє це внутрішньо, власна логіка може виграти від таких перевірок.

Поза Fetch: Інші сценарії використання

Хоча fetch є найвидатнішим користувачем AbortController, його потенціал поширюється на будь-яку асинхронну операцію, яку можна спроектувати для прослуховування AbortSignal. Це включає:

• Тривалі обчислення: Web Workers, складні маніпуляції з DOM або інтенсивна обробка даних.
• Таймери: Хоча setTimeout та setInterval не приймають AbortSignal напряму, ви можете обернути їх у проміси, які це роблять, як показано в прикладі performLongTask.
• Інші бібліотеки: Багато сучасних бібліотек JavaScript, які працюють з асинхронними операціями (наприклад, деякі бібліотеки для отримання даних, бібліотеки анімації), починають інтегрувати підтримку AbortSignal.

Приклад: Використання AbortController з Web Workers

Web Workers чудово підходять для перенесення важких завдань з основного потоку. Ви можете спілкуватися з Web Worker і надавати йому AbortSignal, щоб дозволити скасування роботи, що виконується у воркері.

main.js

```javascript // Створюємо Web Worker const worker = new Worker('worker.js'); // Створюємо AbortController для завдання воркера const controller = new AbortController(); const signal = controller.signal; console.log('Надсилаємо завдання воркеру...'); // Надсилаємо дані завдання та сигнал воркеру worker.postMessage({ task: 'processData', data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], signal: signal // Примітка: Сигнали не можна передавати напряму таким чином. // Нам потрібно надіслати повідомлення, яке воркер зможе використати для // створення власного сигналу або прослуховування повідомлень. // Більш практичний підхід — надіслати повідомлення для скасування. }); // Більш надійний спосіб роботи з сигналом у воркерах — через передачу повідомлень: // Уточнимо: ми надсилаємо повідомлення 'start' та повідомлення 'abort'. worker.postMessage({ command: 'startProcessing', payload: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] }); worker.onmessage = function(event) { console.log('Повідомлення від воркера:', event.data); }; // Симулюємо скасування завдання воркера через 3 секунди setTimeout(() => { console.log('Скасовуємо завдання воркера...'); // Надсилаємо команду 'abort' воркеру worker.postMessage({ command: 'abortProcessing' }); }, 3000); // Не забудьте завершити роботу воркера, коли він закінчить // worker.terminate(); ```

worker.js

```javascript let processingInterval = null; let isAborted = false; self.onmessage = function(event) { const { command, payload } = event.data; if (command === 'startProcessing') { isAborted = false; console.log('Воркер отримав команду startProcessing. Дані:', payload); let progress = 0; const total = payload.length; processingInterval = setInterval(() => { if (isAborted) { clearInterval(processingInterval); console.log('Воркер: Обробку скасовано.'); self.postMessage({ status: 'aborted' }); return; } progress++; console.log(`Воркер: Обробка елемента ${progress}/${total}`); if (progress === total) { clearInterval(processingInterval); console.log('Воркер: Обробку завершено.'); self.postMessage({ status: 'completed', result: 'Оброблено всі елементи' }); } }, 500); } else if (command === 'abortProcessing') { console.log('Воркер отримав команду abortProcessing.'); isAborted = true; // Інтервал очиститься на наступному тіку завдяки перевірці isAborted. } }; ```

Пояснення:

• В основному потоці ми створюємо AbortController.
• Замість того, щоб передавати signal напряму (що неможливо, оскільки це складний об'єкт, який нелегко передати), ми використовуємо передачу повідомлень. Основний потік надсилає команду 'startProcessing', а пізніше — команду 'abortProcessing'.
• Воркер прослуховує ці команди. Отримавши 'startProcessing', він починає свою роботу та встановлює інтервал. Він також використовує прапорець isAborted, яким керує команда 'abortProcessing'.
• Коли isAborted стає true, інтервал воркера самоочищується та повідомляє, що завдання було скасовано.

Дієва порада: Для Web Workers реалізуйте патерн комунікації на основі повідомлень для сигналізації про скасування, ефективно імітуючи поведінку AbortSignal.

Найкращі практики та рекомендації

Щоб ефективно використовувати AbortController, дотримуйтесь цих найкращих практик:

• Чіткі імена: Використовуйте описові імена змінних для ваших контролерів (наприклад, dashboardFetchController, userProfileController), щоб ефективно керувати ними.
• Керування областю видимості: Переконайтеся, що контролери мають відповідну область видимості. Якщо компонент демонтується, скасуйте всі пов'язані з ним незавершені запити.
• Обробка помилок: Завжди розрізняйте AbortError та інші мережеві або обчислювальні помилки.
• Життєвий цикл контролера: Контролер може скасувати операції лише один раз. Якщо вам потрібно скасовувати кілька незалежних операцій з часом, вам знадобиться кілька контролерів. Однак один контролер може скасувати кілька операцій одночасно, якщо всі вони використовують його сигнал.
• DOM AbortSignal: Майте на увазі, що інтерфейс AbortSignal є стандартом DOM. Хоча він широко підтримується, за потреби забезпечте сумісність зі старими середовищами (хоча підтримка загалом відмінна в сучасних браузерах та Node.js).
• Очищення: Якщо ви використовуєте AbortController в компонентній архітектурі (наприклад, React, Vue, Angular), переконайтеся, що ви викликаєте controller.abort() на етапі очищення (наприклад, у `componentWillUnmount`, функції повернення `useEffect`, `ngOnDestroy`), щоб запобігти витокам пам'яті та неочікуваній поведінці при видаленні компонента з DOM.

Глобальний погляд: Розробляючи для глобальної аудиторії, враховуйте різницю у швидкості мережі та затримках. Користувачі в регіонах з гіршим з'єднанням можуть стикатися з довшим часом виконання запитів, що робить ефективне скасування ще більш критичним для запобігання значному погіршенню їхнього досвіду. Ключовим є проектування вашого застосунку з урахуванням цих відмінностей.

Висновок

AbortController та пов'язаний з ним AbortSignal є потужними інструментами для керування асинхронними операціями в JavaScript. Надаючи стандартизований спосіб сигналізації про скасування, вони дозволяють розробникам створювати більш надійні, ефективні та зручні для користувача застосунки. Незалежно від того, чи маєте ви справу з простим запитом fetch, чи оркеструєте складні робочі процеси, розуміння та впровадження AbortController є фундаментальною навичкою для будь-якого сучасного веб-розробника.

Опанування скасування запитів за допомогою AbortController не тільки підвищує продуктивність та керування ресурсами, але й безпосередньо сприяє кращому користувацькому досвіду. Створюючи інтерактивні застосунки, не забувайте інтегрувати цей важливий API для коректної обробки незавершених операцій, забезпечуючи, щоб ваші застосунки залишалися адаптивними та надійними для всіх ваших користувачів у всьому світі.