Как получать и отправлять данные на сервер с помощью Fetch API

Fetch API — это мощный инструмент для получения и отправки данных на сервер в ReactJS. Он позволяет делать AJAX-запросы без использования сторонних библиотек, таких как jQuery.

В этой статье мы рассмотрим, как использовать Fetch API для получения и отправки данных на сервер в ReactJS.

Получение данных с сервера

Для получения данных с сервера мы можем использовать метод fetch(). Этот метод возвращает Promise, который разрешается, когда данные будут получены.

Пример:

fetch('https://example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error))


В этом примере мы отправляем GET-запрос на https://example.com/data, который возвращает данные в формате JSON. Мы используем метод .json() для преобразования ответа в объект JavaScript.

Если запрос не удался, мы получим ошибку в блоке .catch().

Отправка данных на сервер

Для отправки данных на сервер мы также можем использовать метод fetch(). Но в этом случае мы должны использовать другой метод запроса, например, POST.

Пример:

fetch('https://example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: 'John', age: 30 })
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error))


В этом примере мы отправляем POST-запрос на https://example.com/data, передавая данные в формате JSON в теле запроса. Мы также указываем заголовок Content-Type: application/json, чтобы сервер знал, в каком формате мы отправляем данные.

Если запрос не удался, мы получим ошибку в блоке .catch().

Использование Fetch API в ReactJS

Для использования Fetch API в ReactJS мы можем использовать его в методе componentDidMount(), который вызывается после того, как компонент был отрендерен.

Пример:

import React, { Component } from 'react';

class MyComponent extends Component {
  componentDidMount() {
    fetch('https://example.com/data')
      .then(response => response.json())
      .then(data => console.log(data))
      .catch(error => console.error(error))
  }

  render() {
    return (
      <div>My Component</div>
    );
  }
}

export default MyComponent;


В этом примере мы отправляем GET-запрос на https://example.com/data в методе componentDidMount(). Если запрос выполнится успешно, мы выведем полученные данные в консоль.

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

Заключение

Fetch API — это очень удобный инструмент для получения и отправки данных на сервер в ReactJS. Он позволяет делать AJAX-запросы без использования сторонних библиотек.

В этой статье мы рассмотрели, как использовать Fetch API для получения и отправки данных на сервер, а также привели примеры использования в ReactJS.