POST HTTP-запит у React

Вступ

Працюючи з API, ми часто хочемо надсилати дані на сервер для обробки. Наприклад, якщо ми маємо список справ і хочемо додати до нього, можливо, через надсилання форми, ми використовуємо HTTP-запити POST, щоб надіслати запит із корисним навантаженням для обробки та потенційного збереження.

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

За допомогою Fetch API надіслати запит POST HTTP за допомогою React так само просто:

fetch('/myserver.endpoint', {
  method: 'POST',
  body: JSON.stringify({
    
  })
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
})
   .then((response) => response.json())
   .then((data) => {
      console.log(data);
      
   })
   .catch((err) => {
      console.log(err.message);
   });

Axios пропонує нам елегантну альтернативу надсилання запитів HTTP POST:

axios.post('/myserver.endpoint', {
    
  })
  .then((response) => {
    console.log(response.data);
      
  })
  .catch((error) => {
    console.log(error);
  })

Якщо ви хочете дізнатися більше про ці підходи та як вони працюють – прочитайте решту посібника!

Що таке HTTP-запит POST?

Як випливає з назви, запити POST використовуються для надсилання даних до кінцевої точки, яка потім зазвичай обробляє їх і зберігає в базі даних. Ці дані можуть надходити з форми, зберігатися в об’єкті чи бути отримані іншим способом, але зазвичай вони перетворюються на представлення JSON для REST API.

Надсилання HTTP-запитів із будь-яким дієсловом спрощується за допомогою Fetch API (вбудовані) та бібліотеки, такі як Axios. Fetch API — це вбудований метод браузера для виконання HTTP-запитів, тоді як Axios — це зовнішній пакет, який ми повинні встановити в нашому проекті перед використанням.

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

Обидва методи мають переваги та недоліки, але важливо зазначити, що вони можуть обробляти стандартні дієслова HTTP – POST, GET, PUT, PATCH, DELETE.

У нашому випадку ми створимо список публікацій, які ми вже отримали з фіктивного API. Ми створимо форму, яка бере заголовок і тіло нової публікації, а після надсилання надсилає запит POST на макетний сервер для обробки:

import { useState, useEffect } from 'react';

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

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

   return (
      <>
         <div className="add-post-container">
            <form>
               <input type="text" className="form-control" />
               <textarea className="form-control" cols="10" rows="8"></textarea>
               <button type="submit">Add Post</button>
            </form>
         </div>
         <div className="posts-container">
            {posts.map((post) => {
               return (
                  <div className="post-card" key={post.id}>
                     <h2 className="post-title">{post.title}</h2>
                     <p className="post-body">{post.body}</p>
                     <div className="button">
                        <div className="delete-btn">Delete</div>
                     </div>
                  </div>
               );
            })}
         </div>
      </>
   );
};

export default App;

Давайте тепер зробимо форму функціональною, щоб ми могли додавати дані до списків публікацій на нашому веб-сайті після надсилання форми.

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

Тепер ми можемо виконувати HTTP-запити у функціональних компонентах завдяки введенню хуків у React. Раніше функціональні компоненти використовувалися лише для відтворення інтерфейсу користувача.

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

Замість використання об’єкта стану в методі конструктора, як у випадку з компонентами на основі класу, ми тепер використовуємо хуки React, такі як useState() зберігати наші дані перед передачею їх у вихідні дані.

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

Оскільки API Fetch — це вбудований метод браузера, який повертає a Promise, ми використовуємо .then() та .catch() методи боротьби з успіхом і невдачею. Він також приймає обов’язковий аргумент, який є URL-адресою ресурсу/API, у який ми хочемо розмістити дані, а також аргумент, що вказує на запит HTTP, який у нашому випадку є POST:

import { useState, useEffect } from 'react';

const App = () => {
   const [posts, setPosts] = useState([]);
   const [title, setTitle] = useState('');
   const [body, setBody] = useState('');
   
   
   
   
   const handleSubmit = (e) => {
      e.preventDefault();
      fetch('https://jsonplaceholder.typicode.com/posts', {
         method: 'POST',
         body: JSON.stringify({
            title: title,
            body: body,
            userId: Math.random().toString(36).slice(2),
         }),
         headers: {
            'Content-type': 'application/json; charset=UTF-8',
         },
      })
         .then((res) => res.json())
         .then((post) => {
            setPosts((posts) => [post, ...posts]);
            setTitle('');
            setBody('');
         })
         .catch((err) => {
            console.log(err.message);
         });
   };

   return (
      
   );
};

export default App;

У наведеному вище коді ми створили метод, який зв’яжемо з формою, щоб він запускався, коли натиснуто кнопку відправлення у формі. Ми почали з використання e.preventDefault() щоб запобігти перезавантаженню сторінки під час надсилання форми, яка є зазвичай що ви хочете, щоб сталося, але не працює добре для нашої демонстрації:

const handleSubmit = (e) => {
   e.preventDefault();
};

Дивлячись на fetch() виклику, ми додали URL як перший обов’язковий параметр, а другий параметр приймає метод запиту (POST), body, А header:

• body – містить дані, які ми хочемо надіслати до кінцевої точки API, що ми повинні строфіфікувати, перетворивши його на текстове представлення JSON.
• header – визначає тип вмісту, який у нашому випадку є application/json, оскільки наше корисне навантаження представлено у вигляді рядка JSON:

const handleSubmit = (e) => {
   e.preventDefault();
   fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      body: JSON.stringify({
         title: title,
         body: body,
         userId: Math.random().toString(36).slice(2),
      }),
      headers: {
         'Content-type': 'application/json; charset=UTF-8',
      },
   })
};

Нарешті, оскільки цей метод повертає a Promise, ми витягнемо з нього вміст JSON (відповідь сервера), оновлено posts включити нові дані.

Для обробки помилок ми також використовували .catch() метод:

const handleSubmit = (e) => {
   e.preventDefault();
   fetch({...})
      .then((res) => res.json())
      .then((post) => {
         setPosts((posts) => [post, ...posts]);
         setTitle('');
         setBody('');
      })
      .catch((err) => {
         console.log(err.message);
      });
};

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

У попередньому розділі ми пояснили, як виконувати запити POST за допомогою Fetch API. Тепер давайте змінимо handleSubmit() і замість цього виконувати запити POST за допомогою Axios.

Axios — це клієнтська бібліотека HTTP, яка використовує обіцянки для полегшення надсилання асинхронні HTTP-запити до кінцевих точок REST. Оскільки це зовнішня бібліотека, ми повинні спочатку встановити її в нашому проекті, виконавши таку команду в каталозі нашого проекту:

$ npm install axios

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

const handleSubmit = (e) => {
   e.preventDefault();
   axios
      .post('https://jsonplaceholder.typicode.com/posts', {
         title: title,
         body: body,
      })
      .then((res) => {
         setPosts((posts) => [res.data, ...posts]);
         setTitle('');
         setBody('');
      })
      .catch((err) => {
         console.log(err.message);
      });
};

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

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

Запити POST у компонентах класу обробляються інакше, ніж у функціональних компонентах, оскільки ми більше не використовуємо хуки React, а замість цього використовуємо state об'єкт

Компонент класу — це клас ES6, який повертає JSX і вимагає розширень React.

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

Запит дуже схожий на запит функціональних компонентів. Єдині аспекти, у яких ми можемо виявити деякі відмінності, – це зберігання даних state і при використанні state значення, оскільки ми більше не використовуємо useState() гачок:

import React, { Component } from 'react';

class App extends Component {

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

   handleSubmit = (e) => {
      e.preventDefault();
      fetch('https://jsonplaceholder.typicode.com/posts', {
         method: 'POST',
         body: JSON.stringify({
            title: this.state.title,
            body: this.state.body,
            userId: Math.random().toString(36).slice(2),
         }),
         headers: {
            'Content-type': 'application/json; charset=UTF-8',
         },
      })
         .then((response) => response.json())
         .then((data) => {
            this.setState({ posts: [data, ...this.state.posts] });
            this.setState({ title: '' });
            this.setState({ body: '' });
         })
         .catch((err) => {
            console.log(err.message);
         });
   };

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

export default App;

Цього разу ми більше не оголошуємо методи з const ключове слово. Натомість додайте до них префікс this. Цей метод буде запущено, коли натиснуто кнопку відправки у формі. Оскільки це форма, ми почали з використання e.preventDefault() щоб запобігти перезавантаженню сторінки під час надсилання форми:

handleSubmit = (e) => {
   e.preventDefault();
};

Як ми дізналися раніше, Fetch API приймає два параметри. Один – це URL-адреса, а другий містить такі параметри, як метод запиту (POST), body, яка є інформацією, яку ми публікуємо (має бути у вигляді рядків), а потім headers:

handleSubmit = (e) => {
   e.preventDefault();
   fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      body: JSON.stringify({
         title: this.state.title,
         body: this.state.body,
         userId: Math.random().toString(36).slice(2),
      }),
      headers: {
         'Content-type': 'application/json; charset=UTF-8',
      },
   })
};

Знаючи, що це обіцянка, тепер ми можемо приєднати .then() метод боротьби з успіхом і .catch() метод обробки ситуації, якщо є помилка або збій у запиті HTTP.

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

Ми бачили, як треба виступати POST HTTP-запити в компонентах на основі класів. Це дуже схоже на Axios, оскільки все, що нам потрібно зробити, це встановити Axios, а потім замінити handleSubmit() тому тепер ми використовуємо Axios, а не Fetch API:

handleSubmit = (e) => {
   e.preventDefault();
   axios
      .post('https://jsonplaceholder.typicode.com/posts', {
         title: this.state.title,
         body: this.state.body,
         userId: 1,
      })
      .then((response) => {
         this.setState({ posts: [response.data, ...this.state.posts] });
         this.setState({ title: '' });
         this.setState({ body: '' });
      })
      .catch((error) => console.log(error));
};

Висновок

У цьому посібнику ми дізналися, як використовувати два основні методи в React для виконання HTTP-запитів POST. Ми також побачили, як це можна зробити як у функціональних компонентах, так і в компонентах на основі класів, тож ця стаття може стати нам у пригоді незалежно від того, що використовується в нашому проекті.