Урок за API за извличане на JavaScript с примери за JS извличане на публикации и заглавки

Ако пишете уеб приложение, най-вероятно ще трябва да работите с външни данни. Това може да бъде вашата собствена база данни, API на трети страни и т.н.

Когато AJAX се появи за първи път през 1999 г., той ни показа по-добър начин за изграждане на уеб приложения. AJAX беше крайъгълен камък в уеб разработването и е основната концепция зад много съвременни технологии като React.

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

Crash Course на REST API

Сега сме в ерата на RESTful API. Най-просто казано, REST API ви позволява да изтласквате и изтегляте данни от хранилище за данни. Това може да е вашата база данни или сървър на трета страна като Twitter API.

Има няколко различни типа REST API. Нека разгледаме тези, които ще използвате в повечето случаи.

  • GET  - Вземете данни от API. Например, вземете Twitter потребител въз основа на потребителското му име.
  • POST  - изпращане на данни към API. Например създайте нов потребителски запис с име, възраст и имейл адрес.
  • PUT  - Актуализирайте съществуващ запис с нови данни. Например актуализирайте имейл адреса на потребителя.
  • ИЗТРИВАНЕ  - Премахване на запис. Например изтрийте потребител от базата данни.

Във всеки REST API има три елемента. Заявката, отговорът и заглавията.

Заявка  - Това са данните, които изпращате до API, като идентификатор на поръчка за извличане на подробностите за поръчката.

Отговор  - Всички данни, които получавате обратно от сървъра след успешна / неуспешна заявка.

Заглавки  - Допълнителни метаданни, предадени на API, за да помогнат на сървъра да разбере с какъв тип заявка се занимава, например „тип съдържание“.

Истинското предимство на използването на REST API е, че можете да изградите един API слой за работа с множество приложения.

Ако имате база данни, която искате да управлявате с помощта на уеб, мобилно и настолно приложение, всичко, от което се нуждаете, е един слой REST API.

Сега, след като знаете как работят REST API, нека разгледаме как можем да ги консумираме.

XMLHttpRequest

Преди JSON да поеме света, основният формат за обмен на данни беше XML. XMLHttpRequest () е функция на JavaScript, която направи възможно извличането на данни от API, които върнаха XML данни.

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

Тази функция е нараснала от първоначалните си дни, когато е била само XML. Сега той поддържа други формати за данни като JSON и открит текст.

Нека напишем обикновено извикване на XMLHttpRequest към API на GitHub, за да извлека моя профил.

// function to handle success function success() { var data = JSON.parse(this.responseText); //parse the string to JSON console.log(data); } // function to handle error function error(err) { console.log('Request Failed', err); //error details will be in the "err" object } var xhr = new XMLHttpRequest(); //invoke a new instance of the XMLHttpRequest xhr.onload = success; // call success function if request is successful xhr.onerror = error; // call error function if request failed xhr.open('GET', '//api.github.com/users/manishmshiva'); // open a GET request xhr.send(); // send the request to the server.

Горният код ще изпрати GET заявка до //api.github.com/users/manishmshiva за извличане на моята информация за GitHub в JSON. Ако отговорът е бил успешен, той ще отпечата следния JSON на конзолата:

Ако заявката е неуспешна, тя ще отпечата това съобщение за грешка на конзолата:

API за извличане

API за извличане е по-проста и лесна за използване версия на XMLHttpRequest за консумация на ресурси асинхронно. Извличането ви позволява да работите с REST API с допълнителни опции като кеширане на данни, четене на отговори за стрийминг и др.

Основната разлика е, че Fetch работи с обещания, а не с обратно извикване. Разработчиците на JavaScript се отдалечават от обратните обаждания след въвеждането на обещания.

За сложно приложение лесно бихте имали навика да пишете обратни обаждания, водещи до ада за обратно обаждане.

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

Ето как би изглеждала функцията, която написахме по-рано, ако сте използвали fetch () вместо XMLHttpRequest:

// GET Request. fetch('//api.github.com/users/manishmshiva') // Handle success .then(response => response.json()) // convert to json .then(json => console.log(json)) //print data to console .catch(err => console.log('Request Failed', err)); // Catch errors

Първият параметър на функцията Извличане винаги трябва да бъде URL. След това Fetch взема втори JSON обект с опции като метод, заглавки, тяло на заявката и т.н.

Има важна разлика между обекта за отговор в XMLHttpRequest и Fetch.

XMLHttpRequest връща данните като отговор, докато обектът за отговор от Fetch съдържа информация за самия обект на отговор. Това включва заглавки, код на състоянието и др. Извикваме функцията “res.json ()”, за да получим данните, от които се нуждаем, от обекта за отговор.

Друга важна разлика е, че API за извличане няма да изведе грешка, ако заявката връща код за състояние 400 или 500. Той все още ще бъде маркиран като успешен отговор и ще бъде предаден на функцията „тогава“.

Извличането извежда грешка само ако самата заявка е прекъсната. За да обработите 400 и 500 отговора, можете да напишете персонализирана логика, използвайки 'response.status'. Свойството 'status' ще ви даде кода на състоянието на върнатия отговор.

Страхотен. Сега, след като разбрахте как работи API на Fetch, нека разгледаме още няколко примера като предаване на данни и работа с заглавки.

Работа със заглавки

Можете да предавате заглавки, като използвате свойството “headers”. Можете също да използвате конструктора на заглавки, за да структурирате по-добре кода си. Но предаването на JSON обект на свойството “headers” би трябвало да работи в повечето случаи.

fetch('//api.github.com/users/manishmshiva', { method: "GET", headers: {"Content-type": "application/json;charset=UTF-8"} }) .then(response => response.json()) .then(json => console.log(json)); .catch(err => console.log(err));

Предаване на данни към POST заявка

За POST заявка можете да използвате свойството “body”, за да предадете JSON низ като вход. Имайте предвид, че тялото на заявката трябва да бъде JSON низ, докато заглавките трябва да бъдат JSON обект.

// data to be sent to the POST request let _data = { title: "foo", body: "bar", userId:1 } fetch('//jsonplaceholder.typicode.com/posts', { method: "POST", body: JSON.stringify(_data), headers: {"Content-type": "application/json; charset=UTF-8"} }) .then(response => response.json()) .then(json => console.log(json)); .catch(err => console.log(err));

The Fetch API is still in active development. We can expect better features in the near future.

However, most browsers support the use of Fetch in your applications. The chart below should help you figure out which browsers support it on the web and mobile apps.

I hope this article helped you understand how to work with the Fetch API. Be sure to try out Fetch for your next web application.

I regularly write about Machine Learning, Cyber Security, and DevOps. You can signup for my weekly newsletter here.