ОТРИМАЙТЕ HTTP-запит у React

Вступ

Під час розробки веб-додатків ми регулярно отримуємо доступ до ресурсів, розміщених на сервері. Запит, надсилання або виконання інших операцій над ресурсами здійснюється через запити HTTP. Ці запити надсилаються від клієнта до хосту на сервері. Під час виконання HTTP-запиту клієнт використовує a URL (уніфікований локатор ресурсів) і корисне навантаження, яке містить необхідну інформацію для доступу до ресурсів сервера.

П’ять звичайних методів запиту HTTP: GET, PUT, POST, PATCH та DELETE. Ці методи дозволяють нам виконувати стандартні операції CRUD.

У цій статті ми дізнаємося, як зробити HTTP-запит GET у React за допомогою Axios або Fetch API, а також як це зробити в класових і функціональних компонентах.

Що таке GET запит?

GET це метод запиту HTTP, який використовується для отримання ресурсів із серверів.

Axios і Fetch API це два основні методи для створення запитів HTTP.

• Fetch API — це вбудований модуль JavaScript на основі обіцянок для отримання ресурсів із сервера або кінцевої точки API.
• Axios — це HTTP-клієнтська бібліотека на основі обіцянок, яка спрощує надсилання асинхронних HTTP-запитів до кінцевих точок REST. Це зовнішня бібліотека, яку необхідно встановити.

У цій статті ми розглянемо, як виконувати запити GET у функціональних компонентах React за допомогою Fetch API і методів Axios, а потім, як зробити те саме в компонентах на основі класів.

Як виконати GET HTTP-запит у функціональних компонентах React

Функціональний компонент створюється, коли функція JavaScript (звичайна або ES6) повертає елемент React (JSX). Ми використовуємо хуки React під час роботи з функціональними компонентами, які дуже важливі під час виконання запитів GET.

Ми будемо використовувати useState() та useEffect() гачки. Тому що useEffect() hook рендериться негайно, коли додаток монтується, ми завжди виконуємо в ньому запити GET і використовуємо useState() гачок для зберігання наших даних/відповіді.

Як виконати запит GET HTTP у функціональному компоненті React за допомогою Fetch API

Команда fetch() метод приймає один обов’язковий аргумент – URL-адресу ресурсу, який ми хочемо отримати, а також необов’язковий аргумент, який вказує метод запиту. Значення за замовчуванням для цього додаткового аргументу GET, тому його не потрібно встановлювати під час виконання запиту GET.

Тоді Fetch API повертає a Promise, тому ми можемо використовувати then() та catch() методи вирішення успіху чи невдачі:

import { useState, useEffect } from 'react';

const App = () => {
   const [posts, setPosts] = useState([]);

   useEffect(() => {
      fetch('https://jsonplaceholder.typicode.com/posts')
         .then((res) => res.json())
         .then((data) => {
            console.log(data);
            setPosts(data);
         })
         .catch((err) => {
            console.log(err.message);
         });
   }, []);

   return (
      
   );
};

Ось так виглядає стандартний запит GET. Тепер давайте розкладемо те, що ми зробили досі, щоб ви краще зрозуміли наведений вище код. Перш за все, ми створили стан для зберігання всіх ресурсів/дописів, з яких ми будемо отримувати posts API:

const [posts, setPosts] = useState([]);

Тоді ми скористалися useEffect() hook і написав у ньому наш запит GET, щоб запит запускався відразу після монтування програми:

useEffect(() => {
   fetch('https://jsonplaceholder.typicode.com/posts')
      .then((res) => res.json())
      .then((data) => {
         console.log(data);
         setPosts(data);
      })
      .catch((err) => {
         console.log(err.message);
      });
}, []);

Після цього ми створили запит на вибірку в useEffect() перехопив і передав URL-адресу, яку ми можемо використовувати для доступу до сервера. Оскільки це повертає обіцянку, ми використали then() метод. Оскільки цей метод повертає об’єкт відповіді, а не JSON, ми спочатку перетворили дані у формат JSON:

useEffect(() => {
   fetch('https://jsonplaceholder.typicode.com/posts')
      .then((res) => res.json())
}, []);

Потім ми перейшли до отримання публікацій/даних і зберегли їх у стані, який ми створили раніше:

useEffect(() => {
   fetch('https://jsonplaceholder.typicode.com/posts')
      .then((res) => res.json())
      .then((data) => {
         console.log(data);
         setPosts(data);
      }
}, []);

Нарешті ми використовуємо catch() метод обробки помилок:

useEffect(() => {
   fetch('https://jsonplaceholder.typicode.com/posts')
      .then((res) => res.json())
      .then((data) => {
         console.log(data);
         setPosts(data);
      })
      .catch((err) => {
         console.log(err.message);
      });
}, []);

Ми вже виконали запит GET і зберегли наші дані у створеному стані. Тепер ми можемо використовувати дані в нашій програмі React.

Як виконати запит GET HTTP у функціональному компоненті React за допомогою Axios

Крім Fetch API, ми також можемо використовувати Axios для надсилання запитів GET. Axios це клієнтська бібліотека HTTP на основі обіцянок, яка спрощує надсилання асинхронних запитів HTTP до кінцевих точок REST.

Якщо ми хочемо використовувати Axios, яка є зовнішньою бібліотекою, ми повинні спочатку встановити її в нашому проекті, виконавши таку команду в каталозі нашого проекту:

$ npm install axios

Після успішного встановлення Axios ми можемо продовжити виконання запиту GET:

import { useState, useEffect } from 'react';
import axios from 'axios';

const App = () => {
   const [posts, setPosts] = useState([]);

   useEffect(() => {
      axios
         .get('https://jsonplaceholder.typicode.com/posts?_limit=10')
         .then((response) => {
            setPosts(response.data);
         })
         .catch((err) => {
            console.log(err);
         });
   }, []);

   return (
      
   );
};

Це виглядає набагато чистіше, ніж Fetch API! Поглянувши на код вище, ми почали з імпорту Axios, оскільки це була зовнішня бібліотека, яку ми встановили:

import axios from 'axios';

Потім ми виконали запит GET у межах useEffect() hook, як ми робили для Fetch API, але цього разу синтаксис дещо інший:

useEffect(() => {
   axios
      .get('https://jsonplaceholder.typicode.com/posts?_limit=10')
      .then((response) => {
         setPosts(response.data);
      })
      .catch((err) => {
         console.log(err);
      });
}, []);

На відміну від методу Fetch API, для оголошення методу не потрібні параметри. Ми просто приєднуємо метод до екземпляра та запитуємо його, також немає потреби перетворювати дані, оскільки вони повертаються як JSON.

Як виконати GET HTTP-запит у компоненті класу React

Компонент класу — це клас ES6, який повертає JSX і вимагає використання розширень React. До появи хуків це був найпоширеніший метод (тобто попередні версії 16.8), оскільки стан не можна було використовувати у функціональних компонентах.

Незважаючи на наявність хуків, багато людей продовжують використовувати компоненти класу. Давайте подивимося, як ми можемо використовувати constructor() державна власність методу та ComponentDidMount() метод життєвого циклу для виконання запитів GET HTTP в React з компонентами класу.

Як виконати GET HTTP-запит у компонентах класу React за допомогою Fetch API

Це дуже схоже на те, як ми виконували GET запит у функціональних компонентах. Різниця лише в тому, що ми тепер будемо використовувати державне майно в constructor() метод, а не useState() гачок. Крім того, ми будемо займатися нашими GET запит у ComponentDidMount() життєвий цикл, а не useEffect() гачок, щоб цей запит запускався, коли наша програма монтується:

import React, { Component } from 'react';

class App extends Component {
   constructor(props) {
      super(props);
      this.state = {
         posts: [],
      };
   }

   componentDidMount() {
      fetch('https://jsonplaceholder.typicode.com/posts')
         .then((response) => response.json())
         .then((data) => this.setState({ posts: data }))
         .catch((error) => console.log(error));
   }

   render() {
      const { posts } = this.state;

      return (
         
      );
   }
}

У наведеному вище коді ми використали метод конструктора для ініціалізації стану об’єкта для зберігання ресурсів/даних, які ми отримаємо з нашого сервера/API:

constructor(props) {
   super(props);
   this.state = {
      posts: [],
   };
}

Потім ми виконали наш запит GET у componentDidMount() метод життєвого циклу, щоб він запускався після монтування програми:

componentDidMount() {
   fetch('https://jsonplaceholder.typicode.com/posts')
      .then((response) => response.json())
      .then((data) => this.setState({ posts: data }))
      .catch((error) => console.log(error));
}

state є об’єктом, який містить багато станів, ми спочатку деструктуруємо його, щоб отримати posts стан, який пізніше можна використовувати:

render() {
   const { posts } = this.state;

   return (
      
   );
}

Як виконати GET HTTP-запит у компонентах класу React за допомогою Axios

Як ми бачили з функціональними компонентами, ми можемо відправити GET запити з Axios. Залишається лише виконати GET запит в межах ComponentDidMount() життєвого циклу та для імпорту Axios:

import React, { Component } from 'react';
import axios from 'axios';

class App extends Component {
   constructor(props) {
      super(props);
      this.state = {
         posts: [],
      };
   }

   componentDidMount() {
      axios
         .get('https://jsonplaceholder.typicode.com/posts')
         .then((response) => {
            this.setState({ posts: response.data });
         })
         .catch((error) => {
            console.log(error);
         });
   }

   render() {
      const { posts } = this.state;
      return (
         
      );
   }
}

Висновок

У цій статті ми дізналися, як виконувати HTTP-запити GET як із функціональними компонентами, так і з компонентами класу, використовуючи два найпоширеніші методи – Fetch API і Axios.

Використання конкретного методу залежить виключно від вас.