GET HTTP-запрос в React

Введение

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

Пять распространенных методов HTTP-запроса: GET, PUT, POST, PATCHи DELETE. Эти методы позволяют нам выполнять стандартные операции CRUD.

В этой статье мы узнаем, как сделать HTTP-запрос GET в React с помощью Axios или Fetch API, а также как это сделать как в классе, так и в функциональных компонентах.

Что такое GET-запрос?

GET — это метод HTTP-запроса, который используется для получения ресурсов с серверов.

Вардар и Fetch API являются двумя основными методами выполнения HTTP-запросов.

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

В этой статье мы рассмотрим, как выполнять запросы GET в функциональных компонентах React с помощью Fetch API и методов Axios, а затем как сделать то же самое в компонентах на основе классов.

Как выполнить HTTP-запрос GET в функциональных компонентах React

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

Мы будем использовать useState() и useEffect() крючки. Поскольку useEffect() хук отображается сразу же после монтирования приложения, мы всегда выполняем внутри него GET-запросы и используем метод useState() крючок для хранения наших данных/ответа.

Как выполнить HTTP-запрос GET в функциональном компоненте React с помощью Fetch API

Ассоциация fetch() метод принимает один обязательный аргумент — URL-адрес ресурса, который мы хотим получить, а также необязательный аргумент, указывающий метод запроса. Значение по умолчанию для этого необязательного аргумента: GET, поэтому нет необходимости устанавливать его при выполнении запроса GET.

Затем Fetch API возвращает 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() hook и передал 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.

Как выполнить HTTP-запрос GET в функциональном компоненте React с помощью Axios

Помимо Fetch API, мы также можем использовать Axios для отправки запросов GET. Вардар — это клиентская библиотека 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() ловушка, как мы это делали для 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.

Как выполнить HTTP-запрос GET в компоненте класса React

Компонент класса — это класс ES6, который возвращает JSX и требует использования расширений React. До введения хуков это был наиболее часто используемый метод (т.е. более ранние версии 16.8), потому что состояние нельзя было использовать в функциональных компонентах.

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

Как выполнить HTTP-запрос GET в компонентах класса 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 (
      
   );
}

Как выполнить HTTP-запрос GET в компонентах класса 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.

Использование конкретного метода полностью зависит от вас.