Axios Interceptors як HTTP-мідлвэр: ментальная модель для дапрынкаў на React

У маленькай базе коду на React запыткі API зазвычай ствараюцца паэтапна, што выражаецца ў копіюванні та вставкі коду: кожны запыт стварае свой заголовак Authorization, кожны адпаведзь мае свою логіку обробкі памылак, а кожны варіант неудачы перавтварае тую ж самую логіку вярнення до нормальнага стану. Такое рашэнне падходзіць для трох канцэнтраў, але стае проблемай падтрымкі для трыдцяти канцэнтраў. Axios мае вбудованыя рашэнні, інтэрсептары, і калі вы пачнёте спаглядаць іх як мідлвэры для трафіку HTTP, стане ясна, што трэба перакласты ў іх, а шта залишыць у вашых компонентах.

Падвойнасць, яку усунуць інтэрсептары

Тыповая пачаткова точка — запыт да корыстнікаў, у яком уключаецца токен-пераводчык безпосередна:

axios.get("/users", {
  headers: {
    Authorization: `Bearer ${token}`,
  },
});

Другі канцэнтраў повторае блок заголовка слова ў слова:

axios.get("/products", {
  headers: {
    Authorization: `Bearer ${token}`,
  },
});

А операцыя запісу робіць тое ж самае, з пакетам дадзеных усередыні:

axios.post("/orders", orderData, {
  headers: {
    Authorization: `Bearer ${token}`,
  },
});

Спачатку нічага з гэтаго не выглядае шкодным. Калі проект расте, кожная запчыта прымае токен, кожны адказ трэбуе обробкі памылак, а кожная нявыполненна запчыта выклікае аднаковую рэакцыю. Самэўсёлкавае ведзенне такіх задач і є метай інтэрцептораў.

Што такое інтэрцептор на практыке

Інтэрцептор — это функцыя, якая запускаецца праменем Axios для кожнай выходзячай запчаты пры ўсылці або для кожнага вяртаючагася адказу пры ўзьмеце вашага коду: гэта пункт контролю, дзе можна пераглядаць або змяніць трафік. Адказ таксама прымае свой пункт контролю перш чым выпалняеся обяцанне, якое чакае ваш код на базе React.

Абщы маршрут пачынаецца у вашай аплікацыі:

React Application

і продовжваецца через оба пункты контролю пры вярненні да яе:

↓Request Interceptor↓Axios↓Server↓Response Interceptor↓React Application

Вашы компаненты ніколі не вяртаюцца безпосередньна да сервера; усё праходзіць через ланцюг, што робіць яго ідеальным месца для еднаковага паведання.

Мідлвэр, адказанае прыкладам з рэцэпшнай

Якщо вы пісалі код на Express або Koa, гэтыя панявы вам знайомы: гэта мідлвэр. Якщо няўпамінай, падумаце пра візіт у офісны будынак. Вы не заходзіце працоўнаю камнатай сяродзінь. Паходжыце з самага початку:

You

і праходзіце чераз два пункты на шляху:

↓Security Check↓Reception↓Office

Сістэма безпекі пераканальваецца ў вашым айдэнтыфікаторы, рэцэпшна паўтарае вашу прызначанню, і толькі пасля гэтага вы доходзіце да офісу. Жадны з пунктов не ёсць канечной мэтай; кожны з іх пераскаквае ваш паходжыць, каб выканаць дадатковую роботу, а потым прабачае вам продаваць далей або не прабачае.

Мідлвэр — гэта любой шар межу двума сістэмамі, який выканае роботу перад тым, как запит будзе працаваны далей. Заменіце офіс на сервер, пачынаючы з аплікацыі React:

React App

а інтэрцептор — гэта шар усередзіне:

↓Middleware (Interceptor)↓Server

Іншымі словамі, інтэрсептары Axios — это мідлвэр для запытаў і адпаведзей HTTP на кліянце.

Інтэрсептары запытаў і адпаведзей

Axios праставляе два відэры, якія рэгіструюцца за дапамою axios.interceptors.request.use(...) і axios.interceptors.response.use(...). Кожны вызов прыймае функцію для обработкі успеху і неабяжна функцыю для обработкі адказа пра бяду, і вяртае ідэнтыфікатор, які пазней можна перадаць функцыі eject для яго адключэння.

Інтэрсептары запытаў

Яны выконваюцца перад адправленнем запыту. Компанента выконвае вызов:

Component

а інтэрсептар бачыць яго пад час адправкі:

↓Request Interceptor↓Server

Тыповыя задачы інтэрсептара запыту:

• дадаванне токэнаў аутантыкацыі
• насталяванне спецыяльных заголовкаў, такіх як локаляцыя або ідэнтыфікатор запыту
• корэкцыя паданых данных запыту
• логаванне выходячага трафіку

Адміністратар прыемліе настройкі запиту і должен яны аддаць (альбо прабачэнне пра яны), каб запит могў продавацца; забывчына пра гэта — класычная памылка пачатківцаў.

Інтерцэптары адпаведзення

Яны запускаюцца пасля таго, як сервер даа адпаведзенне, але перад тым, як ваша прыемліцельная програма атрымае рэзультат. Адпаведзенне прыходзіць з сервера:

Server

і праходзіць через інтерцэптар па сваёй дорозе да компонента:

↓Response Interceptor↓Component

Звычныя задачы тут:

• обработка памылак у аднам месцы
• трансфармаванне альбо распаковка дадзеных адпаведзення
• лагіраванне адпаведзенняў
• перапрыбуткі неудачных запытоў
• перыяхоўкі пользователя, напрыклад, на стороннюю старонку аблогінацыі

Адміністратар успеху карабіцца 2xx адпаведзенняя, а адміністратар памылак — рэшту. Якщо ён не можа вярнуць справу, яго следуе аддаць прабачэнне з статусам «распрацоўваецца», каб вызываючыя апэрыты все раве бачылі проблему.

Што выканаецца за аднам вызывам

Запрос у адзіне рэчыце выглядае так, як будто Axios атрымуе його негараздо:

axios.get("/users");

Унутранне той самы кал:

axios.get("/users")

праходзіць чераз дыявароўшуюся лінію обробкі прытаму, калі ўжо запускаецца .then():

↓Request Interceptor↓HTTP Request↓Server↓HTTP Response↓Response Interceptor↓.then()↓Your Component

Спяшаная логіка выконваецца праз кожны кал, без таго, каб месца вызову пра гэта ведалі.

Чаму централізацыя мае значэнне, калі прыклад запускаецца

Уявіце проект з ста вызоў API, напісаных у ручны спосаб. Запрос корыстніка мае загалоўку:

axios.get("/users", {
  headers: {
    Authorization: `Bearer ${token}`,
  },
});

Так сама і запрос пра тавары:

axios.get("/products", {
  headers: {
    Authorization: `Bearer ${token}`,
  },
});

І так сама кожны запіс, напрыклад стварэнне замовлення:

axios.post("/orders", data, {
  headers: {
    Authorization: `Bearer ${token}`,
  },
});

Якщо серверная часть зменіў свойу схему аутентыфікацыі, неабходна апдэйтаваць кожны запыт, і кожны пракінуты запыт стае багам. Інтерцептор зберагае гэтую логіку ўсёраз і Axios застосоўвае яе всюды. Зарэгіструйце його на экземпляры, створаным за дапамою axios.create(), так, каб ён застосоўваліся да вашай API, а не да URL-адрэс трэціх сторон.

Случай выкарыстоўвання: аўтаматычнае дадаванне токена доступу

Гэта найпаўзначыцьвейшая прычына для вжывання інтерцептораў. Пасля заходу ў систему дапынг стоіць токен доступу, які атрыбуецца кожнам захіщанам канцэнтру. Запыт пачынаецца як звычны запит:

API Call

а інтерцептор дадае заголовак прытаму, калі запыт не даходзіць да сервера:

↓Request Interceptor↓Authorization Header Added↓Server

Тепер кожны запыт несе токен. Чытайце яго ў інтерцепторы на кожны запыт, а не раз пад час запуску, інакша апцэнтаваны токен ніколі не будзе застосоўвацца.

Случай выкарыстоўвання: глобальнае обробкі адпаведзей 401

Токены доступу выканчваюцца. Калі гэта адбываецца, сервер адпавядае так:

401 Unauthorized

Без інтэрцептораў кожны вызов трэбуе свойяй часткі коду для такога разлучэння. Першы вызов API:

API 1

працоўвае за аднаковым прыемам, які дуплікуецца для кожнага іншага канцэнтра.

↓401 HandlingAPI 2↓401 HandlingAPI 3↓401 Handling

Інтэрцептор адпаведзення можа заместа таго падхапіць кожны 401 Unauthorized у аднам месцы. Калі ён яго бачыць:

401 Received

ён можа апавярзіць токен доступу, праказаць первісны запит занова і аддаць успешнае адпаведзенне назад вызываючаму:

↓Refresh Access Token↓Retry Original Request↓Return Successful Response

Пользоватар ніколи не паведамляеся пра выцягнуты токен. Важлівы два захавальныя меры: пазначыць запит, які быў перадаўся знову, у його настройках, каб другі код 401 не могаў ціклічна працаваць, і змусіць адночасныя неудачы выкарыстоўваць адну вызову апавежэння, пра што пісана ў чаму адночасныя коды 401 выключаюць корыстувачаў і як ўсунуць гэту проблему.

Калі інтерцептары не ўжо канчаткова неабходны

Маленькія прыкладнікі з двума-трыма запитамі да API мало выгадваюць ад такога опосередкування, а схованая логіка можа здзівіць чытальніка, які не можа бачыць, звядзеўся заголовак. Калі запытоў дзесяткі або сотні, інтерцептары ўжо ўскладненне з’яўляюцца як адна з найлепшых способаў падтрымкі чыстага і аднаковага оброблэння запытоў. Храніце іх для праблем, якія стосуюцься ўсіх частак прыкладніка; логіка, спецыфічная для канкрэтнага канца, павінна застацца ў самам канцы.

Узагальненне

Адрасаванне запыткаў — это толькі частка задачі слоя HTTP. Аутантыкацыя, карэстацыя бядаў, логаванне, формаванне адпаведзей і паўнавагараджэнне токенаў ёсць скрозныя аспекты, і інтэралектары забезпечваюць кожнаму з іх адпаведную ролю.

• Спрыяйце інтэралектарам як мідлвэру на баку кліента: інтэралектары запыткаў формуюць тое, што выходзіце, а інтэралектары адпаведзей — тое, што прыходзіце.
• Заўжды вяртайце настройкі з інтэралектараў запыткаў, а неканцэсаваныя бяды — з інтэралектараў адпаведзей.
• Прыўяжыце іх да экзампляра axios.create(), прызначанага для вашай API.
• Захавайце логіку паўнавагараджэння дакумента 401 ад ціклавасці і адночасных паўнавагараджэнняў.