Как да консумирате API в React, използвайки Fetch и Axios

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

Чрез API можете да интегрирате части от софтуер във вашето приложение без дреболия. Този процес на използване на API във вашето приложение обикновено се нарича консумация на API. Например, ако искате да покажете определено местоположение на уебсайта си, ще използвате API на Google Maps, вместо да внедрявате функционалността на картата от нулата. Следователно API-тата намаляват работното ви натоварване и ви спестяват време.

За да научите как да използвате REST API в React с помощта на Fetch и Axios, ще създадете просто приложение React, което получава случаен факт за котките от API, когато щракнете върху бутон.

Видове API

Приложните програмни интерфейси (API) могат да бъдат класифицирани по наличност или случай на употреба. По отношение на наличността API могат да бъдат публични, частни, партньорски или съставни API. Когато се класифицират според предназначението си, те могат да бъдат база данни, отдалечени, операционни системи или уеб API. В тази статия ще използваме тип уеб API, наречен REST (Representational State) API.

REST API ви позволяват да получавате данни от източник чрез URL. В React има няколко метода, които можете да използвате, за да използвате REST API. Тази статия обсъжда двата най-популярни метода, а именно JavaScript Fetch API и базирания на обещания HTTP клиент Axios.

Свързани: Какво е REST API и как можете да вземете данни за вашето приложение или уебсайт

Предпоставки

За да следвате това ръководство, трябва да имате:

• Основно разбиране на JavaScript.
• Основни познания за React и куките за React.
• NPM, инсталиран локално на вашата машина.
• Инсталиран е текстов редактор или IDE по ваш избор.

Създайте React приложение

Първо, ще трябва да създадете приложение React. Копирайте следната команда във вашия терминал, за да настроите среда за разработка на React.

npx create-react-app catfact

След като командата завърши изпълнението, отворете catfact папка във вашия текстов редактор. Ще пишете своя код във файла App.js в src папка, така че продължете и премахнете ненужния код.

импортирайте "./App.css";
функция App() {
 връщане (


Натиснете бутона за случаен факт за котка!



Вземете факта за котката



 );
}
експортиране на приложение по подразбиране;

След това създайте прост потребителски интерфейс, който ще използва за показване на произволния факт за котка.

В app.js

импортиране './App.css';
функция App() {
 връщане (


Натиснете бутона за случаен факт за котка!



Вземете факта за котката



 );
}
експортиране на приложение по подразбиране;

За да стилизирате приложението си, добавете следния код към app.css файл.

@import url(' https://fonts.googleapis.com/css2?family=Playfair+Display: ital, wght@700;500&display=swap');
.App {
 семейство шрифтове: 'Playfair Display', сериф;
 поле: 20px 15vw;
}
h2 {
 семейство шрифтове: 'Playfair Display', сериф;
 шрифт-тегло: 700;
 размер на шрифта: 3em;
}
бутон {
 подложка: 1em 1.2em;
 граница: няма;
 размер на шрифта: 1em;
 цвят на фона: #131212;
 цвят: #ffffff;
 радиус на границата: 0.5em;
 курсор: показалец;
}
бутон: задържане на мишката{
 фонов цвят:#3b3b3b;
}

Вашето приложение сега трябва да изглежда така.

В следващите стъпки ще извлечете данни от API и ще ги покажете в приложението.

Свързани: Как да създадете първото си React приложение с JavaScript

Консумиране на REST API с помощта на извличане

Извличане на API е интерфейс, който ви позволява да получавате ресурси от API чрез HTTP заявки. В извличам() Методът получава URL адреса на пътя към ресурса като задължителен аргумент и връща обещание, което може да разреши отговор.

Основният синтаксис на извличам() метод е както следва:

извличане („URL към ресурса“)
 .then (отговор => // обработка на отговора)
 .catch (err => // грешка при обработка)

Внедряване на API за извличане

В React API за извличане се използва по същия начин, по който се използва в обикновения JavaScript.

извличане (" https://catfact.ninja/fact")
 .then (response => response.json())
 .then (данни => // обработване на данни)
 .catch (err => // грешка при обработка)

В първия ред в кода по-горе предавате URL адреса на API към извличам() метод. извличам() връща HTTP отговор, който се преобразува в JSON с помощта на json() метод. В третия ред получавате достъп до данните, които след това можете да използвате в приложението. И накрая, блокът catch ви позволява да обработвате грешките елегантно.

За да приложите заявката за извличане в компонента на приложението, ще използвате React hooks. С помощта на useEffect hook, вашето приложение ще направи заявката, след като компонентът се зареди и useState hook ще създаде и актуализира състоянието на компонента. Проследяването на състоянието гарантира, че компонентът се изобразява повторно, когато API за извличане върне отговора.

Свързани: Куки: Героят на React

импортирайте useState и useEffect.
import { useEffect, useState } от 'react'

Създайте състояние, за да задържите факта котка и функцията за актуализирането му.

const [факт, setFact] = useState('')

След това създайте функция, за да направите заявката GET към API и да я извикате в useEffect кука.

const fetchFact = () => {
извличане (" https://catfact.ninja/fact")
 .then((response) => response.json())
 .then((data) => setFact (data.fact));
}
useEffect(() => {
 fetchFact()
}, []);

Вашият файл app.js сега трябва да изглежда така:

импортирайте "./App.css";
import { useEffect, useState } от "react";
функция App() {
 const [факт, setFact] = useState("");
 const fetchFact = () => {
 извличане (" https://catfact.ninja/fact")
 .then((response) => response.json())
 .then((data) => setFact (data.fact));
}
useEffect(() => {
 fetchFact()
}, []);
връщане (


Натиснете бутона за случаен факт за котка!



Вземете факта за котката
{факт}




);
}
експортиране на приложение по подразбиране;

Вече трябва да можете да видите произволен факт за котки, показан във вашия браузър.

След това напишете код за показване на произволен факт при щракване върху бутона.

Променете бутона, за да включите onClick събитие и неговата функция за обработка.

 handleClick()}>Вземете факта за котката

Определете handleClick() функция, както е показано по-долу.

const handleClick = () => {
 fetchFact()
}

Сега, когато щракнете върху бутона, handleClick() функцията ще извика извличане на данни() който ще изпълни заявката за API и ще актуализира състоянието с нов случаен факт. Следователно потребителският интерфейс на приложението ще се актуализира, за да покаже текущия факт.

Консумиране на REST API с помощта на Axios

Вместо извличане (), можете да консумирате API с Axios. като извличам(), Axios ви позволява да правите заявки към крайна точка на API. Между двете обаче има няколко разлики.

• Axios автоматично връща отговора в JSON, докато трябва да го конвертирате в JSON, когато използвате API за извличане.
• Axios изисква само едно обратно извикване .then() за разлика от API за извличане.
• Axios е съвместим с основните браузъри, докато Fetch се поддържа само в Chrome 42+, Edge 14+, Firefox 39+ и Safari 10+

Внедряване на Axios

Инсталирайте Axios, като изпълните следната команда.

npm инсталиране на axios

След като инсталацията приключи, импортирайте пакета Axios в компонента на приложението си и променете fetchFact() функция, за да го използвате.

импортирайте axios от „axios“
const fetchFact = () => {
 axios.get(" https://catfact.ninja/fact").then((response) => {
 setFact (response.data.fact)
 });
}

Това е! Вашето приложение трябва да показва случаен факт за котка, когато се зарежда в браузъра и когато щракнете върху бутона.

Повече приложения за API с React

Можете да използвате REST API в React, като използвате различни методи. В този урок научихте как да използвате Fetch и Axios, за да извлечете произволен факт от REST API. Случаите на използване на API в приложенията в реалния свят са безкрайни.

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

Какво е API удостоверяване и как работи?

Как доказвате, че човекът, който иска да получи достъп до важни данни, е този, за когото се представя? Ето къде идва API удостоверяването...

Прочетете Следващото

За автора