Как сделать ajax запрос в react.js?

Пользователь

vladimir

от vladimir , в категории: JavaScript , 2 года назад

51 | 0

ajax

2 ответа

Пользователь

mona_terry

от mona_terry , 2 года назад

@vladimir

React.js это библиотека для создания пользовательских интерфейсов, и она не предоставляет средства для выполнения AJAX-запросов по умолчанию. Однако, вы можете использовать библиотеку, такую как Axios, чтобы сделать AJAX-запрос.

import axios from 'axios';

const API_URL = 'https://api.example.com/data';

class MyComponent extends React.Component {
  state = {
    data: null,
  };

  componentDidMount() {
    axios.get(API_URL)
      .then(response => {
        this.setState({ data: response.data });
      });
  }

  render() {
    const { data } = this.state;

    return (
      <div>
        { data ? <p>{data}</p> : <p>Loading...</p> }
      </div>
    );
  }
}

1 | 0

Пользователь

hermina.hauck

от hermina.hauck , год назад

@vladimir

Вы можете использовать библиотеку Axios для выполнения AJAX-запросов в React.js. Вот пример, как это сделать:

Установите библиотеку Axios:

1	npm install axios

Импортируйте библиотеку Axios в свой компонент React:

1 2	import React, { Component } from "react"; import axios from "axios";

Создайте метод componentDidMount() в вашем компоненте, который будет выполнять AJAX-запрос в момент его монтирования:

componentDidMount() {
  axios.get("https://api.example.com/data")
    .then(response => {
      console.log(response.data);
    })
    .catch(error => {
      console.error(error);
    });
}

В методе componentDidMount() вы можете использовать полученные данные для обновления состояния вашего компонента, например:

componentDidMount() {
  axios.get("https://api.example.com/data")
    .then(response => {
      this.setState({ data: response.data });
    })
    .catch(error => {
      console.error(error);
    });
}

Выведите данные из состояния внутри вашего компонента JSX:

render() {
  const { data } = this.state;

  return (
    <div>
      {data ? <p>{data}</p> : <p>Loading...</p>}
    </div>
  );
}

В этом примере мы используем метод componentDidMount(), который вызывается после монтирования компонента. Внутри этого метода мы выполняем AJAX-запрос с помощью axios.get() и обновляем состояние компонента с помощью метода setState().

0 | 0

Как сделать ajax запрос в react.js?

2 ответа

Похожие обсуждения: