Как использовать axios в React.js?

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

raina

от raina , в категории: JavaScript , 3 года назад

52 | 0

2 ответа

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

dmitrypro77

от dmitrypro77 , 3 года назад

@raina Для начала Вам нужно импортировать библиотеку axios в Ваш проект и затем Вы можете начать использовать ее в React.js, посмотрите ниже пример использования библиотеки axios с React.js чтобы получить последние темы:

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import axios from "axios";

const Main = () => {
  const [threads, setThreads] = useState();

  // Получить последние записи
  const getLatestThreads = async () => {
    const res = await axios("https://dropcode.ru/api/thread/latest").then(
      (res) => res.data
    );

    setThreads(res.threads);
  };

  useEffect(() => {
    getLatestThreads();
  }, []);

  return (
    <div>
      {threads &&
        threads.map((thread) => (
          <div className="item">
            <a
              target="_blank"
              rel="noreferrer"
              href={`https://dropcode.ru.ru/thread/${thread.slug}`}
              key={thread.id}
            >
              {thread.name}
            </a>
          </div>
        ))}
    </div>
  );
};

class App extends React.Component {
  render() {
    return <Main />;
  }
}

ReactDOM.render(<App />, document.getElementById("container"));

4 | 0

Всегда открыт для интересных проектов. Ссылки на мои соц. сети в профиле.

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

quinton.prosacco

от quinton.prosacco , 2 года назад

@raina

Axios - это библиотека JavaScript для выполнения запросов HTTP в браузере и на сервере. Она может быть использована в React.js для взаимодействия с внешними API или для отправки запросов к серверу.

Чтобы использовать Axios в React.js, сначала необходимо установить библиотеку с помощью npm. Это можно сделать, запустив следующую команду в терминале:

1	npm install axios

После установки Axios можно импортировать его в компоненты React.js следующим образом:

1	import axios from 'axios';

Затем вы можете использовать Axios для выполнения запросов HTTP, например, для получения данных из API. Например, следующий код отправляет GET-запрос к API и выводит результаты в консоль:

1
2
3

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => console.log(response.data))
  .catch(error => console.log(error));

Вы также можете использовать Axios для отправки POST-запросов, передавая данные в теле запроса:

axios.post('https://jsonplaceholder.typicode.com/posts', {
    title: 'foo',
    body: 'bar',
    userId: 1
  })
  .then(response => console.log(response))
  .catch(error => console.log(error));

Важно отметить, что Axios возвращает Promise, поэтому вы можете использовать методы .then() и .catch() для обработки ответов и ошибок соответственно.

В целом, использование Axios в React.js позволяет легко и удобно выполнять запросы HTTP и взаимодействовать с внешними API.

0 | 0

Как использовать axios в React.js?

2 ответа

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