Как использовать API в React с помощью Fetch и Axios

Хотите знать, как использовать API? Понимание того, как использовать API в React, является ключевым элементом использования API.

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

С помощью API вы можете интегрировать части программного обеспечения в свое приложение без выполнения мельчайших деталей. Этот процесс использования API в вашем приложении обычно называется использованием API. Например, если вы хотите отобразить определенное местоположение на своем веб-сайте, вам следует использовать API Карт Google вместо реализации функций карты с нуля. Таким образом, API уменьшают вашу рабочую нагрузку и экономят время.

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

Типы API

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

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

Предварительные условия

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

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

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

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

npx create-react-app catfact

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

import "./App.css";
function App() {
  return (
    <div className="App">
      <h2>Press the button for a random cat fact!</h2>
      <hr />
      <button>Get Cat fact</button>
    </div>
  );
}
export default App;

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

В app.js

import './App.css';
function App() {
  return (
    <div className="App">
    <h2>Press the button for a random cat fact!</h2>
    <hr/>
    <button>Get Cat fact</button>
    </div>
  );
}
export default App;

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

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@700;500&display=swap');
.App {
  font-family: 'Playfair Display', serif;
  margin: 20px 15vw;
}
h2 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 3em;
}
button {
  padding: 1em 1.2em;
  border: none;
  font-size: 1em;
  background-color: #131212;
  color: #ffffff;
  border-radius:0.5em;
  cursor: pointer;
}
button:hover{
  background-color:#3b3b3b;
}

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

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

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

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

Основной синтаксис метода fetch() следующий:

fetch(&lsquo;url to resource&rsquo;)
  .then(response => // handle response)
  .catch(err => // handle error)

Реализация API выборки

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

fetch("https://catfact.ninja/fact")
  .then(response => response.json())
  .then(data => // handle data)
  .catch(err => // handle error)

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

Чтобы реализовать запрос на выборку в компоненте приложения, вы будете использовать перехватчики React. Используя перехватчик useEffect, ваше приложение выполнит запрос после загрузки компонента, а перехватчик useState создаст и обновит состояние компонента. Отслеживание состояния гарантирует, что компонент выполняет повторную визуализацию, когда API-интерфейс выборки возвращает ответ.

import useState and useEffect.
import { useEffect, useState } from 'react'

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

const [fact, setFact] = useState('')

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

const fetchFact = () => {
fetch("https://catfact.ninja/fact")
  .then((response) => response.json())
  .then((data) => setFact(data.fact));
}
useEffect(() => {
  fetchFact()
}, []);

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

import "./App.css";
import { useEffect, useState } from "react";
function App() {
  const [fact, setFact] = useState("");
  const fetchFact = () => {
  fetch("https://catfact.ninja/fact")
    .then((response) => response.json())
    .then((data) => setFact(data.fact));
}
useEffect(() => {
  fetchFact()
}, []);
return (
  <div className="App">
    <h2>Press the button for a random cat fact!</h2>
    <hr />
    <button>Get Cat fact</button>
    <p>{fact}</p>
  </div>
);
}
export default App;

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

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

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

<button onClick= {() => handleClick()}>Get Cat fact</button>

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

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

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

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

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

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

Реализация Аксиоса

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

npm install axios

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

import axios from &lsquo;axios&rsquo;
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, магазины могут легко обрабатывать транзакции клиентов онлайн без необходимости самостоятельно реализовывать эту функциональность. Таким образом, даже менее разбирающиеся в технологиях пользователи могут создавать полезные приложения, отвечающие их потребностям.