Ние го правим през цялото време.

Ние го правим през цялото време. Отворете браузър, въведете уеб адрес и натиснете enter. След секунди нашият браузър ще ни пренасочи към уебсайта, където можем да четем новинарски статии или да публикуваме снимки на котки. Това се случва толкова безпроблемно, че процесът трябва да е прост.

Като начинаещ софтуерен инженер, научих, че това е всичко друго! Ето кратък преглед.

По-горе е пример за RESTful API. Този прост код е това, което позволява комуникацията и обмена на ресурси между клиент (потребител) и сървър (instagram.com, например). Ресурсите са данни като текстови и графични файлове или потребителска информация и те трябва да бъдат манипулирани програмно, за да осигурят на потребителя безпроблемно изживяване на даден уебсайт.

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

Процесът започва с метод fetch(). Според MDN, „метод fetch() приема един задължителен аргумент, пътя до ресурсите, които искате да извлечете. Той връща обещание, което се решава в отговор на тази заявка.... След като отговорът бъде извлечен, има редица налични методи за определяне какво е съдържанието на тялото и как трябва да бъде предадено.

Там се говори много и аз ще го разгледам. Преди сървърът да върне списъка с книги, той ще изпрати обещание. Обещанието е точно това, което звучи. Сървърът уведомява клиента, че е получил заявката и обещава или да изпълни, или да отхвърли заявката.

Защо просто не изпратите всички данни веднага и да приключите с това? Е, понякога изпълнението на исканото може да отнеме известно време. Да приемем, че щракнете върху връзка, която ви пренасочва към страница, която включва голямо изображение. Изтеглянето може да отнеме известно време. Обещанията позволяват асинхронно програмиране, което означава, че други задачи могат да бъдат изпълнени. Таблици и текстови файлове могат да се появят на сайта, докато голямото изображение се изтегля.

Обещанията също позволяват включването на код, който указва какви действия трябва да бъдат предприети, ако заявката бъде изпълнена или отхвърлена.

Защо просто не изпратите всички данни веднага и да приключите с това? Е, понякога изпълнението на исканото може да отнеме известно време. Да приемем, че щракнете върху връзка, която ви пренасочва към страница, която включва голямо изображение. Изтеглянето може да отнеме известно време. Обещанията позволяват асинхронно програмиране, което означава, че други задачи могат да бъдат изпълнени. Таблици и текстови файлове могат да се появят на сайта, докато голямото изображение се изтегля.

Обещанията също така позволяват включването на код, който указва какви действия трябва да бъдат предприети, ако заявката бъде изпълнена или отхвърлена.

Бих искал да направя крачка назад за момент. В горния пример има URL, подаден в метода fetch(). Но също така трябва да предоставим повече подробности за това какво да правим с информацията на клиента или сървъра. Тези подробности, известни като свойства, се съдържат във фигурни скоби.

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

Методите за HTTP заявка сигнализират, че искаме да създадем нови данни (POST), да актуализираме или заменим съществуващи данни (PATCH или POST), да изтрием данни (DELETE) или просто да ги прочетем (GET).

Има много различни видове HTTP глаголи. Пълен списък можете да намерите тук. Но изброените по-горе са най-често срещаните.

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

Заглавки на заявките: помагат на сървъра да разбере повече за заявката на клиента

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

Заглавки за представяне: съдържат информация за ресурсите. В горния пример на сървъра се казва как е форматиран ресурсът (content-type) и в какъв формат клиентът би искал ресурсите да бъдат изпратени като (accept).

Добре. Получихме обещание и сега получаваме отговор.

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

Нека да разгледаме този пример отново. Почти сме до края.

(Ще обсъдя json.stringify() в друга публикация в блог, тъй като това е интересен инструмент, който заслужава своя собствена публикация. Засега просто знайте, че той взема json обекта и го превръща в низ.)

then() приема функция за обратно извикване като аргумент. Първият then() взема отговора (анотиран като „res“) и го анализира в json обект с помощта на функцията за обратно извикване res.json(). Но все още не е направено. Друг метод then() е свързан, защото json() ще върне друго обещание. Това обещание съдържа нашите данни, които могат да бъдат манипулирани в DOM.

И ето го! Дългоочакваният списък с книги, отпечатан на конзолата. Сега вместо console.log може да бъде написан код, който показва как искаме тези данни да бъдат изобразени на уебсайта.

Ресурси и допълнителна литература:

· https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers

· https://www.youtube.com/watch?v=76CcJ90Lz4U

· https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview

· https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods

· https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

· https://www.youtube.com/watch?v=DHvZLI7Db8E

· https://www.youtube.com/watch?v=cuEtnrL9-H0

· https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise