React AJAX

В приложениях React AJAX-запросы можно реализовать с помощью fetch API или сторонних библиотек, таких как axios, jQuery и других, для сетевых запросов.

Ниже приведено базовое объяснение использования этих двух методов:

Использование fetch API для AJAX-запросов

fetch— это встроенный API в браузере для выполнения сетевых запросов. Далее используетсяfetchОсновные шаги для выполнения AJAX-запроса в компоненте React:

  • Импорт fetch- Если вы используете современный браузер, обычно его не нужно импортировать.fetch. Однако, если вам нужно поддерживать старые браузеры, вы можете использоватьunfetchтакой полифилл.

  • Использование хука useEffect- ИспользуйтеuseEffectхук для обработки побочных эффектов, таких как выполнение сетевых запросов.

  • Выполнение запроса- Используйтеfetchчтобы выполнять GET- или POST-запросы.

  • Обработка ответа- Используйте.then()чтобы обработать данные ответа.

  • Обработка ошибок- Используйте.catch()чтобы перехватывать и обрабатывать ошибки.

  • Обновление состояния- ИспользуйтеuseStateхук для сохранения запрошенных данных и обновления состояния после успешного выполнения запроса.

Пример

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

const MyComponent = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        const result = await response.json();
        setData(result);
        setLoading(false);
      } catch (error) {
        console.error('Ошибка при получении данных:', error);
      }
    };

    fetchData();
  }, []);

  if (loading) {
    return <div>Загрузка...</div>;
  }

  return (
    <div>
      <h1>Данные из API:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

export default MyComponent;

Пояснение:

  • useState and useEffect: ИспользуйтеuseStateдля хранения данных, возвращённых AJAX-запросомdata) и состояние загрузкиloading), и используйтеuseEffectчтобы выполнить AJAX-запрос после загрузки компонента.

  • fetch: Используйтеfetchчтобы выполнить GET-запрос, и используйтеresponse.json()чтобы преобразовать возвращённые данные JSON в объекты JavaScript.

  • Асинхронная обработка: Используйтеasync/awaitдля обработки асинхронных операций, гарантируя, что состояние обновляется после завершения запроса.

  • Обработка ошибок: Вfetchзапросе, используйтеtry/catchчтобы перехватывать и обрабатывать ошибки, которые могут возникнуть.

Использование axios

axios — это основанный на Promise HTTP-клиент для браузеров и Node.js.

Ниже приведены основные шаги по использованию axios:

  1. Установка axios- Установите axios через npm или yarn.

    npm install axios

  2. Импорт axios- Импортируйте axios в компоненте.

  3. Выполнение запроса- Используйте axios для выполнения GET- или POST-запросов.

  4. Обработка ответов и ошибок- Используйте.then()и.catch()чтобы обрабатывать ответы и перехватывать ошибки.

  5. Обновление состояния- Подобно использованиюfetchаналогично используйтеuseStateдля обновления состояния.

Пример

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

const MyComponent = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('https://api.example.com/data');
        setData(response.data);
        setLoading(false);
      } catch (error) {
        console.error('Ошибка при получении данных:', error);
      }
    };

    fetchData();
  }, []);

  if (loading) {
    return <div>Загрузка...</div>;
  }

  return (
    <div>
      <h1>Данные из API:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

export default MyComponent;

Онлайн-тест по использованию jQuery

Следующий пример демонстрирует получение последнего описания общего gist пользователя GitHub:

Данные в компонентах React можно получать через Ajax в методе componentDidMount. Когда данные получены с сервера, их можно сохранить в состоянии, а затем интерфейс можно повторно отрисовать с помощью метода this.setState.

При асинхронной загрузке данных используйте componentWillUnmount, чтобы отменить незавершённые запросы до размонтирования компонента.

Пример React

class UserGist extends React.Component { constructor(props) { super(props); this.state = {username: '', lastGistUrl: ''}; } componentDidMount() { this.serverRequest = $.get(this.props.source, function (result) { var lastGist = result[0]; this.setState({ username: lastGist.owner.login, lastGistUrl: lastGist.html_url }); }.bind(this)); } componentWillUnmount() { this.serverRequest.abort(); } render() { return ( <div> {this.state.username}Общий адрес последнегоGistпользователя:a href={this.state.lastGistUrl}>{this.state.lastGistUrl}</a> </div> ); } } const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <UserGist source="https://api.github.com/users/octocat/gists" /> );

Попробуйте »

Приведённый выше код использует jQuery для выполнения Ajax-запроса.

Другие расширения