Вступ
Працюючи з 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
.
Примітка: Як було сказано раніше, ми навчимося виконувати POST
запити з функціональними компонентами за допомогою Fetch API і методів Axios, а потім у компонентах на основі класу за допомогою JSON Placeholder Free Fake Posts API REST.
У нашому випадку ми створимо список публікацій, які ми вже отримали з фіктивного 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()
метод:
Ознайомтеся з нашим практичним практичним посібником із вивчення Git з передовими методами, прийнятими в галузі стандартами та включеною шпаргалкою. Припиніть гуглити команди Git і фактично вчитися це!
const handleSubmit = (e) => {
e.preventDefault();
fetch({...})
.then((res) => res.json())
.then((post) => {
setPosts((posts) => [post, ...posts]);
setTitle('');
setBody('');
})
.catch((err) => {
console.log(err.message);
});
};
Увага! Як правило, ти не буде зберігати й обробляти дані на передньому кінці як і ми, але оскільки фальшивий API, з яким ми працюємо, фактично не зберігає та не повертає новий допис – ми штучно додаємо його до списку, який він повертає після першого запиту GET. Після того, як публікація буде збережена в базі даних, ми можемо зробити ще один запит до серверної частини, щоб надати відповідь для показу користувачеві. Ось чому типовою поведінкою надсилання форми є перезавантаження сторінки, що ініціює початкове fetch()
ОТРИМУЙТЕ запит і автоматично відображайте нову публікацію поруч зі старими.
Як виконати 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. Ми також побачили, як це можна зробити як у функціональних компонентах, так і в компонентах на основі класів, тож ця стаття може стати нам у пригоді незалежно від того, що використовується в нашому проекті.