Практическо ръководство за ES6 за това как да изпълнявате HTTP заявки с помощта на Fetch API

Картина създадена от Яд Джубран

В това ръководство ще ви покажа как да използвате API за извличане (ES6 +) за изпълнение на HTTP заявки към REST API с някои практически примери, които най-вероятно ще срещнете.

Искате ли бързо да видите примерите за HTTP? Отидете в раздел 5. Първата част описва асинхронната част на JavaScript при работа с HTTP заявки.

Забележка: Всички примери са написани в ES6 със стрелкови функции.

Често срещан модел в съвременните уеб / мобилни приложения е да поискате или покажете някакъв вид данни от сървъра (като потребители, публикации, коментари, абонаменти, плащания и т.н.) и след това да ги манипулирате с помощта на CRUD (създаване, четене, актуализиране или изтриване) операции.

За по-нататъшно манипулиране на ресурс често използваме тези JS методи (препоръчвани), като .map (), .filter () и .reduce ().

Ако искате да станете по-добър уеб разработчик, да започнете свой собствен бизнес, да преподавате други или да подобрите уменията си за развитие, аз ще публикувам седмични съвети и трикове на най-новите езици за уеб разработка.

Ето какво ще адресираме

  1. Справяне с асинхронни HTTP заявки на JS
  2. Какво е AJAX?
  3. Защо Fetch API?
  4. Бързо въведение към Fetch API
  5. Fetch API - CRUD примери ← добрите неща!

1. Справяне с асинхронни HTTP заявки на JS

Една от най-предизвикателните части за разбирането на това как работи JavaScript (JS) е разбирането как да се справят с асинхронните заявки, което изисква и разбиране за това как работят обещанията и обратните повиквания.

В повечето езици на програмиране ние сме задължени да мислим, че операциите се случват в ред (последователно). Първият ред трябва да бъде изпълнен, преди да преминем към следващия ред. Има смисъл, защото така работим хората и изпълняваме ежедневни задачи.

Но с JS имаме множество операции, които се изпълняват във фонов / преден план и не можем да имаме уеб приложение, което се замразява всеки път, когато чака потребителско събитие.

Описването на JavaScript като асинхронен може би е подвеждащо. По-точно е да се каже, че JavaScript е синхронен и еднопоточен с различни механизми за обратно извикване. Прочетете още.

Независимо от това, понякога нещата трябва да се случват в ред, в противен случай това ще доведе до хаос и неочаквани резултати. Поради тази причина може да използваме обещания и отстъпки, за да го структурираме. Пример може да бъде валидиране на потребителските идентификационни данни, преди да се пристъпи към следващата операция.

2. Какво е AJAX

AJAX означава Asynchronous JavaScript и XML и позволява уеб страниците да се актуализират асинхронно чрез обмен на данни с уеб сървър, докато приложението работи. Накратко, това по същество означава, че можете да актуализирате части от уеб страница, без да презареждате цялата страница (URL адресът остава същият).

AJAX е подвеждащо име. Приложенията AJAX могат да използват XML за транспортиране на данни, но това е еднакво обичайно за транспортиране на данни като обикновен текст или JSON текст.
 - w3shools.com

AJAX докрай?

Видях, че много разработчици са склонни да се вълнуват от всичко в приложение на една страница (SPA) и това води до много асинхронна болка! Но за щастие имаме библиотеки като Angular, VueJS и React, което прави този процес много по-лесен и практичен.

Като цяло е важно да имате баланс между това, което трябва да презареди цялата страница или части от нея.

И в повечето случаи презареждането на страници работи добре от гледна точка на това колко мощни браузъри са станали. Обратно в дните презареждането на страницата ще отнеме секунди (в зависимост от местоположението на възможностите на сървъра и браузъра). Но днешните браузъри са изключително бързи, така че решението дали да се извърши AJAX или презареждане на страници не е голяма разлика.

Моят личен опит е, че е много по-лесно и по-бързо да се създаде търсачка с обикновен бутон за търсене, отколкото да се прави без бутон. И в повечето случаи клиентът не се интересува дали е SPA или допълнително презареждане на страница. Разбира се, не ме разбирайте погрешно, обичам СЗЗ, но трябва да обмислим няколко компромиси, ако се занимаваме с ограничен бюджет и липса на ресурси, тогава може би бързото решение е по-добър подход.

В крайна сметка това наистина зависи от случая на употреба, но лично аз чувствам, че СЗЗ изискват повече време за разработка и малко главоболие, отколкото просто презареждане на страници.

3. Защо Fetch API?

Това ни позволява да извършваме декларативни HTTP заявки към сървър. За всяка заявка тя създава обещание, което трябва да бъде разрешено, за да се определи вида на съдържанието и да се получи достъп до данните.

Предимството на Fetch API е, че той е изцяло поддържан от екосистемата JS, а също така е част от документите на MDN Mozilla. И не на последно място, тя работи извън кутията на повечето браузъри (с изключение на IE). В дългосрочен план предполагам, че ще стане стандартният начин за извикване на уеб API.

Забележка! Добре познавам други HTTP подходи, като например използване на наблюдаемо с RXJS и как той се фокусира върху управлението на паметта / теч по отношение на абониране / отписване и т.н. И може би това ще стане новият стандартен начин за извършване на HTTP заявки, кой знае?
Както и да е, в тази статия се съсредоточавам само върху Fetch API, но в бъдеще може да напиша статия за Observable и RXJS.

4. Бързо въведение в Fetch API

Методът fetch () връща обещание, което решава отговора от молбата да покаже състоянието (успешно или не). Ако някога получите това съобщение обещание {} в екрана на дневника на конзолата, не се паникьосвайте - това означава, че обещанието работи, но чака да бъде разрешено. Така че, за да го разрешим, ни е необходим обработващият .then () (обратно извикване) достъп до съдържанието.

Така че накратко, първо определяме пътя (Fetch), второ искаме данни от сървъра (Request), трето определяме типа съдържание (Body) и не на последно място, ние получаваме достъп до данните (Response).

Ако се мъчите да разберете тази концепция, не се притеснявайте. Ще получите по-добър преглед чрез примерите, показани по-долу.

Пътят, който ще използваме за нашите примери
https://jsonplaceholder.typicode.com/users // връща JSON

5. Fetch API - HTTP примери

Ако искаме да получим достъп до данните, се нуждаем от два обработващи .then () (обратна връзка). Но ако искаме да манипулираме ресурса, се нуждаем само от един обработващ .then (). Можем обаче да използваме втория, за да се уверим, че стойността е изпратена.

Основен шаблон на API за изтегляне:

Забележка! Примерът по-горе е само за илюстративни цели. Кодът няма да работи, ако го изпълните.

Примери за API на извличане

  1. Показване на потребител
  2. Показване на списък с потребители
  3. Създаване на нов потребител
  4. Изтриване на потребител
  5. Актуализиране на потребител
Забележка! Ресурсът няма да бъде наистина създаден на сървъра, но ще върне фалшив резултат, за да имитира истински сървър.

1. Показване на потребител

Както беше споменато по-горе, процесът на показване на един потребител се състои от два обработващи .then () (обратен разговор), първият за дефиниране на обекта, а вторият за достъп до данните.

Забележете само като прочетете низа за заявки / users / 2, ние сме в състояние да разберем / предскажем какво прави API. За повече информация как да пишете висококачествен API на REST, вижте тези съвети с указания, написани от Махеш Халдар.

пример

2. Показване на списък с потребители

Примерът е почти идентичен с предишния пример, само че низът на заявката е / потребители, а не / потребители / 2.

пример

3. Създаване на нов потребител

Този изглежда малко по-различно от предишния пример. Ако не сте запознати с протокола HTTP, той просто ни предоставя няколко сладки метода като POST, GET, DELETE, UPDATE, PATCH и PUT. Тези методи са глаголи, които просто описват вида на действието, което трябва да се изпълни, и се използват най-вече за манипулиране на ресурса / данните на сървъра.

Както и да е, за да създадем нов потребител с Fetch API, ще трябва да използваме HTTP глагола POST. Но първо трябва да го определим някъде. За щастие има незадължителен аргумент Init, който можем да предадем заедно с URL адреса за дефиниране на персонализирани настройки, като тип метод, тяло, идентификационни данни, заглавки и т.н.

Забележка: Параметрите на метода fetch () са идентични с тези на конструктора Request ().

пример

4. Изтриване на потребител

За да изтрием потребителя, първо трябва да се насочим към потребителя с / users / 1 и след това да дефинираме типа метод, който е DELETE.

пример

5. Актуализиране на потребител

HTTP глаголът PUT се използва за манипулиране на целевия ресурс и ако искате да направите частични промени, ще трябва да използвате PATCH. За повече информация за това, което правят тези HTTP глаголи, вижте това.

пример

заключение

Сега имате основно разбиране за това как да извлечете или манипулирате ресурс от сървъра с помощта на API на Fetch на JavaScript, както и как да се справите с обещанията. Можете да използвате тази статия като ръководство за това как да структурирате вашите заявки за API за CRUD операции.

Лично аз чувствам, че Fetch API е декларативен и лесно можете да разберете какво се случва без никакво техническо преживяване с кодиране.

Всички примери са показани в заявката за обещана база, където веригираме заявката, използвайки .then callback. Това е стандартен подход, с който много разработчици са запознати, но ако искате да използвате async / чакате, проверете тази статия. Концепцията е същата, с изключение на това, че async / чакането е по-лесно за четене и писане.

Ето няколко статии, които написах за уеб-екосистемата, заедно с лични съвети и трикове за програмиране.

  • Сравнение между Angular и React
  • Хаотичен ум води до хаотичен код
  • Разработчици, които постоянно искат да научат нови неща
  • Практическо ръководство за модулите ES6
  • Научете тези основни уеб концепции
  • Увеличете уменията си с тези важни JavaScript методи
  • Програмирайте по-бързо, като създавате персонализирани bash команди

Можете да ме намерите в Medium, където публикувам седмично. Или можете да ме последвате в Twitter, където публикувам подходящи съвети и трикове за уеб разработка заедно с лични истории.

Послепис Ако сте харесали тази статия и искате повече подобни, моля, плеснете ❤ и споделете с приятели, които може да се нуждаят от нея, това е добра карма.