Как использовать 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 (репрезентативное состояние). API.

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

Связанный: Что такое REST API и как вы можете получить данные для своего приложения или веб-сайта

Предпосылки

Чтобы следовать этому руководству, у вас должны быть:

• Базовое понимание JavaScript.
• Базовые знания React и хуков React.
• NPM установлен локально на вашем компьютере.
• Установлен текстовый редактор или IDE по вашему выбору.

Создать React-приложение

Во-первых, вам нужно будет создать приложение React. Скопируйте следующую команду в свой терминал, чтобы настроить среду разработки React.

факт создания-реакции-приложения npx

После завершения выполнения команды откройте факт папку в текстовом редакторе. Вы будете писать свой код в файле App.js в источник папку, так что продолжайте и удалите ненужный код.

импортировать "./App.css";
приложение функции () {
 возвращение (


Нажмите кнопку, чтобы узнать случайный факт о коте!



Получить факт о коте



 );
}
экспортировать приложение по умолчанию;

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

В app.js

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


Нажмите кнопку, чтобы узнать случайный факт о коте!



Получить факт о коте



 );
}
экспортировать приложение по умолчанию;

Чтобы оформить приложение, добавьте следующий код в app.css файл.

@импорт URL(' https://fonts.googleapis.com/css2?family=Playfair+Display: итал., wght@700;500&display=swap');
.Приложение {
 семейство шрифтов: «Playfair Display», с засечками;
 поле: 20px 15vw;
}
ч2 {
 семейство шрифтов: «Playfair Display», с засечками;
 вес шрифта: 700;
 размер шрифта: 3em;
}
кнопка {
 отступы: 1em 1.2em;
 граница: нет;
 размер шрифта: 1em;
 цвет фона: #131212;
 цвет: #ffffff;
 радиус границы: 0,5 em;
 курсор: указатель;
}
кнопка: наведите {
 цвет фона:#3b3b3b;
}

Теперь ваше приложение должно выглядеть так.

На следующих шагах вы будете получать данные из API и отображать их в приложении.

Связанный: Как создать свое первое приложение React с помощью JavaScript

Использование REST API с помощью Fetch

Получить API — это интерфейс, который позволяет вам получать ресурсы из API через HTTP-запросы. То принести() метод получает URL-адрес пути к ресурсу в качестве обязательного аргумента и возвращает обещание, которое может быть преобразовано в ответ.

Основной синтаксис принести() метод заключается в следующем:

fetch('ссылка на ресурс')
 .then (response => // обработка ответа)
 .catch (err => // обработка ошибки)

Внедрение Fetch API

В React Fetch API используется так же, как и в обычном JavaScript.

принести(" https://catfact.ninja/fact")
 .затем (ответ => ответ.json())
 .then (данные => // обрабатывать данные)
 .catch (err => // обработка ошибки)

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

Чтобы реализовать запрос на выборку в компоненте приложения, вы будете использовать хуки React. С помощью использованиеЭффект hook, ваше приложение сделает запрос после загрузки компонента и использование состояния hook создаст и обновит состояние компонента. Отслеживание состояния гарантирует повторную визуализацию компонента, когда API выборки возвращает ответ.

Связанный: Крючки: герой React

импортировать useState и useEffect.
импортировать {useEffect, useState} из «реагировать»

Создайте состояние для хранения факта о кошке и функцию для его обновления.

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

Затем создайте функцию для выполнения GET-запроса к API и вызовите ее в использованиеЭффект крюк.

константа fetchFact = () => {
принести(" https://catfact.ninja/fact")
 .then((ответ) => response.json())
 .then((данные) => setFact (data.fact));
}
использоватьЭффект(() => {
 fetchFact()
}, []);

Ваш файл app.js теперь должен выглядеть так:

импортировать "./App.css";
импортировать {useEffect, useState} из "реагировать";
приложение функции () {
 const [факт, setFact] = useState ("");
 константа fetchFact = () => {
 принести(" https://catfact.ninja/fact")
 .then((ответ) => response.json())
 .then((данные) => setFact (data.fact));
}
использоватьЭффект(() => {
 fetchFact()
}, []);
возвращение (


Нажмите кнопку, чтобы узнать случайный факт о коте!



Получить факт о коте
{факт}




);
}
экспортировать приложение по умолчанию;

Теперь вы сможете увидеть случайный факт о кошках, отображаемый в вашем браузере.

Затем напишите код для отображения случайного факта при нажатии кнопки.

Измените кнопку, чтобы включить по щелчку событие и его функция-обработчик.

 handleClick()}> Получить факт о коте

Определите обработатьклик() как показано ниже.

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

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

Использование REST API с помощью Axios

Вместо принести(), вы можете использовать API с Аксиос. Нравится принести(), Axios позволяет отправлять запросы к конечной точке API. Однако между ними есть несколько различий.

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

Внедрение Аксиос

Установите Axios, выполнив следующую команду.

npm установить аксиомы

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

импортировать axios из «axios»
константа fetchFact = () => {
 аксиос.получить(" https://catfact.ninja/fact").then((response) => {
 setFact (ответ.данные.факт)
 });
}

Вот и все! Ваше приложение должно отображать случайный факт о коте, когда оно загружается в браузере и когда вы нажимаете кнопку.

Дополнительные варианты использования API с React

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

Например, с помощью платежных API, таких как Stripe и PayPal, магазины могут легко обрабатывать транзакции клиентов в Интернете без необходимости самостоятельно реализовывать функциональность. Таким образом, даже менее технически подкованные пользователи могут создавать полезные приложения, отвечающие их потребностям.

Что такое аутентификация API и как она работает?

Как вы докажете, что человек, желающий получить доступ к важным данным, является тем, за кого себя выдает? Вот тут-то и приходит на помощь API-аутентификация...

Читать далее

Об авторе