Перехоплювачі Axios у додатку React Native

Що таке Axios Interceptors?

Axios interceptors (перехоплювачі Axios) — це функції або можливості, які дозволяють змінювати запити та відповіді перед тим, як ваш додаток обробить їх.

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

Як реалізувати Axios interceptors

У axios є два основних типи перехоплювачів: перехоплювачі запитів та перехоплювачі відповідей. Давайте розглянемо реалізацію кожного з цих типів перехоплювачів.

Реалізація перехоплювачів запитів

Перехоплювачі запитів корисні для додавання заголовків, перевірки доступу (токенів аутентифікації) або відслідковування (логування) деталей запиту.

Розглянемо код і зрозуміємо, як реалізувати перехоплювач запиту в axios.

У axios.interceptors.request.use, axios є самою інстанцією axios. Interceptors — це властивість axios, яка відповідає за управління перехоплювачами. Метод request у перехоплювачах обробляє HTTP-запити.

Що таке метод Use в перехоплювачі запитів?

• Приймає два параметри: функцію для запиту та функцію для обробки помилок.
• Перший параметр (конфігурація запиту) приймає об'єкт config як аргумент. Він містить конфігурацію HTTP-запиту (наприклад, URL, заголовки, метод, дані). Ця функція виконується до того, як запит буде надісланий. Усередині цієї функції розробники можуть виконувати завдання, такі як зміна заголовків запиту, додавання токенів аутентифікації, логування запитів тощо. Функція повинна повернути об'єкт config або обіцянку, що розв'язується в об'єкт config.
• Другий параметр (обробка помилок) приймає об'єкт error як аргумент і обробляє помилки, які виникають під час обробки запиту. Розробники можуть обробляти помилки запиту, такі як помилки конфігурації, помилки специфічні для бібліотеки (axios) тощо, і відхиляти їх за допомогою Promise.reject(error).

Реалізація перехоплювачів відповідей

Перехоплювачі відповідей — це функції, які виконуються після того, як відповідь була отримана від сервера, але до того, як вона потрапить у основну логіку додатку. Вони корисні для обробки глобального управління помилками, трансформації даних перед тим, як вони потраплять у додаток, централізованого логування відповідей та управління аутентифікацією, пов'язаною з механізмом оновлення токенів.

Розглянемо код і зрозуміємо, як реалізувати перехоплювач відповідей в axios.

У axios.interceptors.response.use, axios є самою інстанцією axios. Interceptors — це властивість axios, яка відповідає за управління перехоплювачами. Метод response у перехоплювачах обробляє HTTP-відповіді.

Що таке метод Use в перехоплювачі відповідей?

• Приймає два параметри: функцію для відповіді та функцію для обробки помилок.
• Перший параметр (обробка успішної відповіді) response у коді містить інформацію про успішну API-відповідь (статус-код у діапазоні 2xx). Він дозволяє розробникам маніпулювати або обробляти дані відповіді і централізовано логувати відповіді. Функція повинна повернути об'єкт response або обіцянку, що розв'язується в об'єкт response.
• Другий параметр (обробка помилок) приймає об'єкт error як аргумент. Помилки API викликаються, коли статус-код знаходиться поза діапазоном 2xx. Розробники можуть обробляти такі проблеми, як мережеві помилки, тайм-аути, а також реалізовувати механізм оновлення токенів.
  В основному, це централізує управління глобальними помилками та відхиляє помилки за допомогою Promise.reject(error).

Різні сценарії використання

Трансформація запитів

• Ви можете змінювати дані запиту перед тим, як відправити їх на сервер. Це може включати додавання заголовків, часових міток, форматування даних та шифрування чутливої інформації.

Трансформація відповідей

• Подібно, ви можете трансформувати дані відповіді перед їх використанням у вашому додатку. Це може включати витягування конкретних даних, парсинг JSON-відповідей, оновлення токенів при неавторизованих відповідях, валідацію даних, обробку помилок з власними повідомленнями та шифрування/дешифрування даних.

Аутентифікація

• Один з поширених сценаріїв використання — додавання токенів аутентифікації до кожного заголовка запиту. Це гарантує, що тільки авторизовані користувачі можуть отримати доступ до захищених ресурсів.

Логування та моніторинг

• Перехоплювачі можуть логувати всі запити та відповіді для налагодження та моніторингу. Це може допомогти вам виявити проблеми з викликами API та відслідковувати поведінку додатка.

Обробка помилок

• Перехоплювачі дозволяють вам перехоплювати помилки від запитів та відповідей. Ви можете визначити власну логіку для обробки різних типів помилок, відображення зрозумілих для користувачів повідомлень або запуску повторних спроб.

Дилеми з перехоплювачами та методи налагодження

Занадто багато перехоплювачів

• Додавання занадто багатьох перехоплювачів може призвести до складної логіки і ускладнити розуміння потоку запитів. Використовуйте їх тільки для конкретних завдань і уникайте їх вкладення без потреби.
• Розгляньте можливість організувати перехоплювачі в окремий сервіс, щоб ваш код був чистим і легким для читання. Перевірте, чи можна об'єднати або видалити перехоплювачі, які є зайвими.

Неочікувана поведінка через безпосереднє модифікування

• Безпосереднє змінення оригінального об'єкта може призвести до неочікуваних проблем у вашому коді, оскільки інші частини додатку можуть також залежати від цього об'єкта. Це може викликати помилки та ускладнити налагодження.
• Щоб уникнути цих проблем, дотримуйтесь правила незмінності в перехоплювачах. Замість того, щоб змінювати оригінальний об'єкт безпосередньо, створюйте новий об'єкт, що містить необхідні зміни. Ви можете використовувати методи, такі як Object.assign(), щоб створити нову копію об'єкта, а потім змінювати цю копію всередині вашого перехоплювача перед тим, як повернути її.
• Інший спосіб — використовувати синтаксис розпакування (...) в JavaScript, який дозволяє швидко створювати копії об'єктів. Це гарантує, що ваші зміни в перехоплювачі не впливають на оригінальний об'єкт, зберігаючи стабільність додатку та спрощуючи його управління.

Невідловлені помилки

• Неправильна обробка помилок у перехоплювачах може порушити функціональність вашого додатку. Завжди включайте логіку обробки помилок у функції перехоплювачів. Використовуйте блоки try…catch, щоб захоплювати помилки і надавати чіткі повідомлення або плани на випадок помилок.
• Тестуйте ваш додаток з різними сценаріями помилок, щоб переконатися, що ваші перехоплювачі ефективно обробляють помилки. Використовуйте console logs або інструменти для налагодження, щоб визначити, де саме виникають помилки у ланцюгу перехоплювачів для подальшого усунення проблем.

Зниження продуктивності через занадто складні перехоплювачі

• Перехоплювачі Axios корисні для зміни поведінки запитів та відповідей, але якщо вони стають надто складними, це може уповільнити ваш додаток. Це особливо актуально, якщо перехоплювачі виконують багато роботи або якщо їх занадто багато. Кожен перехоплювач додає додаткові кроки до процесу надсилання та отримання даних. Навіть прості перехоплювачі накопичуються, а складні з безліччю обчислень чи циклів можуть зробити додаток "повільним".
• Щоб ваш додаток працював плавно, важливо зробити перехоплювачі ефективними. Зосередьте кожен з них на його основному завданні, не додаючи зайвої складності.
  Пишіть зрозумілий та простий код, уникаючи надмірно складної логіки або операцій, що можуть викликати затримки.

Оптимальні підходи до використання перехоплювачів Axios

Централізоване управління помилками

• Реалізуйте централізовану механізм обробки помилок, який перехоплює помилки з усіх ваших перехоплювачів і надає користувачам послідовні повідомлення про помилки.

Безпекові аспекти

• При маніпуляціях з запитами через перехоплювачі, таких як зміна ідентифікаторів користувачів, надзвичайно важливо санітізувати введені дані. Це означає видалення будь-якого потенційно шкідливого коду для запобігання загрозам безпеці, таким як SQL-ін'єкції або атаки типу cross-site scripting (XSS).
• Крім того, необхідно валідувати введені дані, щоб переконатися, що вони відповідають очікуваним форматам і типам. Цей проактивний крок допомагає запобігти непередбачуваній поведінці та знижує ймовірність вразливостей у вашому додатку. Такі практики забезпечують функціональність ваших перехоплювачів і захищають від потенційних загроз, що виникають через введення даних користувача.

Оптимізація перехоплювачів Axios: коли менше — це більше!

• Хоча перехоплювачі надають вам гнучкість, намагайтеся не використовувати їх занадто часто. Подумайте, чи можна досягти потрібного результату за допомогою іншої організації коду. У добре спроектованому додатку використовуйте перехоплювачі лише в разі необхідності для завдань, які не можна вирішити іншим способом.
• Дотримуючись цих принципів, ви зможете отримати максимальну користь від перехоплювачів axios. Це покращує продуктивність вашого додатку, полегшує його обслуговування і робить його швидким. Пам'ятайте, перехоплювачі мають бути зосереджені та ефективні, акцентуючи увагу на простоті та правильних пріоритетах для більш плавної розробки.

Висновок

Перехоплювачі axios — це потужні інструменти, але, як і будь-який гострий інструмент, вони потребують обережного використання. Ви можете скористатися їх можливостями, не жертвуючи продуктивністю чи підтримуваністю, якщо пріоритетним зробите незмінність, чітку та зосереджену логіку, стратегічне пріоритизування та асинхронні операції.

Пам'ятайте, добре спроектований додаток використовує перехоплювачі обґрунтовано, зосереджуючи увагу на завданнях, які неможливо вирішити іншими способами. Такий підхід веде до надійного, продуктивного і, що найголовніше, підтримуваного додатку.

Перекладено з: Axios interceptors in React Native application