Как использовать Axios в React

Axios — клиентская библиотека HTTP, которая позволяет отправлять запросы (реквесты) к заданной конечной точке. Это может быть, например, внешний API сервиса, который размещен на Timeweb Cloud, или ваш внутренний сервер Node.js.

Зачем использовать Axios в React:

• Он предоставляет хорошие настройки по умолчанию для работы с JSON. 
• Имена функций соответствуют HTTP. Например, для запроса GET вы используете метод .get().
• Библиотека выдаёт ошибки диапазона 400 и 500. Вам не нужно самостоятельно проверять код состояния и выдавать ошибку.
• Можно использовать как на сервере, так и на клиенте.

Как настроить Axios с помощью React

Если у вас уже есть проект, установите React Axios с помощью npm или любого другого менеджера пакетов:

npm install axios

В этом руководстве вы будете использовать JSON Placeholder API для получения и изменения сведений о публикации.

Как сделать запрос GET

GET позволяет получить данные ресурса. 

Например, перед вами стоит задача забрать последнюю публикацию и отобразить её в пользовательском интерфейсе. Читателям нужен заголовок поста и его тело вместе со всеми элементами: текстом, видео, картинками. Всё это позволяет сделать GET.

В качестве практики получим публикации по отдельности и отобразим их в интерфейсе:

import axios from "axios";
import React from "react";

const baseURL = "https://jsonplaceholder.typicode.com/posts/1";

export default function App() {
  const [post, setPost] = React.useState(null);

  React.useEffect(() => {
    axios.get(baseURL).then((response) => {
      setPost(response.data);
    });
  }, []);

  if (!post) return null;

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
}

Первый шаг — добавление Axios в проект.  Затем используется хук useEffect. Он включает применение метода .get() для выполнения GET к конечной точке и использование .then() для возвращения ответа.

Ответ возвращается в виде объекта. Сведения представляют собой сообщение со свойствами id, title и body. Они помещаются в часть состояния с именем post, которое отображается в компоненте. 

Это базовый пример использования Axios в проекте. Давайте посмотрим и другие популярные методы. 

Как сделать POST-запрос

Следующая задача — научиться создавать ресурсы. Например, администратору сайта нужно добавить новый пост про облачные серверы. Внешне реализация будет стандартной — в интерфейсе отобразится кнопка, при нажатии на которую создаётся публикация. Вам нужно реализовать логику.

Добавить в ресурс новую информацию позволяет POST. Он должен быть выполнен на конечной точке /posts. В примере кода также появилась кнопка для создания сообщения:

import axios from "axios";
import React from "react";

const baseURL = "https://jsonplaceholder.typicode.com/posts";

export default function App() {
  const [post, setPost] = React.useState(null);

  React.useEffect(() => {
    axios.get(`${baseURL}/1`).then((response) => {
      setPost(response.data);
    });
  }, []);

  function createPost() {
    axios
      .post(baseURL, {
        title: "Hello World!",
        body: "This is a new post about Timeweb Cloud."
      })
      .then((response) => {
        setPost(response.data);
      });
  }

  if (!post) return "No post!"

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
      <button onClick={createPost}>Create Post</button>
    </div>
  );
}

Это очень похоже на метод .get(), но новый ресурс, который вы хотите создать, предоставляется в качестве второго аргумента после конечной точки API.

Нажатие на кнопку вызывает функцию createPost. Чтобы сделать POST, вы используете метод .post(). В качестве второго аргумента передаётся свойство объекта, которое указывает, каким должен быть новый пост.

Еще раз используйте .then(), чтобы вернуть ответ и заменить первое сообщение, что вы получили, новым сообщением, которое вы запросили.

Как сделать запрос PUT

PUT нужен для обновления ресурса.

В этом примере вы обновите первый пост. Для этого вы снова создадите кнопку. Но на этот раз она вызовет функцию для обновления поста:

import axios from "axios";
import React from "react";

const baseURL = "https://jsonplaceholder.typicode.com/posts";

export default function App() {
  const [post, setPost] = React.useState(null);

  React.useEffect(() => {
    axios.get(`${baseURL}/1`).then((response) => {
      setPost(response.data);
    });
  }, []);

  function updatePost() {
    axios
      .put(`${baseURL}/1`, {
        title: "Hello World!",
        body: "This is an updated post."
      })
      .then((response) => {
        setPost(response.data);
      });
  }

  if (!post) return "No post!"

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
      <button onClick={updatePost}>Update Post</button>
    </div>
  );
}

В приведенном выше коде вы применяете метод .put(). Как и в случае с методом .post(), вы указываете свойства, которые должны быть в обновленном ресурсе. Возвращаемые данные добавляются в JSX с помощью .then().

Как сделать запрос DELETE

Наконец, используем Axios, чтобы удалить ресурс. Для этого есть метод DELETE. 

В качестве примера удалите первый пост. Обратите внимание, что вам не нужен второй аргумент для выполнения этого реквеста:

import axios from "axios";
import React from "react";

const baseURL = "https://jsonplaceholder.typicode.com/posts";

export default function App() {
  const [post, setPost] = React.useState(null);

  React.useEffect(() => {
    axios.get(`${baseURL}/1`).then((response) => {
      setPost(response.data);
    });
  }, []);

  function deletePost() {
    axios
      .delete(`${baseURL}/1`)
      .then(() => {
        alert("Post deleted!");
        setPost(null)
      });
  }

  if (!post) return "No post!"

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
      <button onClick={deletePost}>Delete Post</button>
    </div>
  );
}

В большинстве случаев вам не нужны сведения, возвращаемые методом .delete(). Но в приведенном выше коде .then() по-прежнему применяется. Пользователь получает предупреждение о том, что пост успешно удален. Затем данные поста удаляются из состояния. Для них устанавливается начальное значение null.

Как создать экземпляр с помощью Axios

В примерах кода реализован элемент baseURL, который вы используете как часть конечной точки. Каждый раз писать его заново немного утомительно. Решение — создать экземпляр с помощью метода .create(). Axios запомнит baseURL, а также другие значения, которые вы, возможно, захотите указать для каждого реквеста, включая заголовки:

import axios from "axios";
import React from "react";

const client = axios.create({
  baseURL: "https://jsonplaceholder.typicode.com/posts" 
});

export default function App() {
  const [post, setPost] = React.useState(null);

  React.useEffect(() => {
    client.get("/1").then((response) => {
      setPost(response.data);
    });
  }, []);

  function deletePost() {
    client
      .delete("/1")
      .then(() => {
        alert("Post deleted!");
        setPost(null)
      });
  }

  if (!post) return "No post!"

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
      <button onClick={deletePost}>Delete Post</button>
    </div>
  );
}

Одно свойство в объекте конфигурации выше — это baseURL, которому вы передаете конечную точку. Функция .create() возвращает только что созданный экземпляр, который в нашем случае называется client.

В дальнейшем вы можете применять все те же методы, что и раньше, но вам больше не нужно включать baseURL в качестве первого аргумента. Вам просто нужно указать конкретный маршрут, который вы хотите, например, ‘/’, ‘/1’ и так далее. Такой подход помогает создать компактный клиент HTTP.

Как обрабатывать ошибки

Что делать, если при создании запроса возникла ошибка? Например, вы можете передать неправильные данные, обратиться к неправильной конечной точке или получить сетевую ошибку.

Чтобы имитировать ошибку, обратитесь к несуществующей конечной точке API /posts/asdf. В результате должен вернуться код состояния 404:

import axios from "axios";
import React from "react";

const baseURL = "https://jsonplaceholder.typicode.com/posts";

export default function App() {
  const [post, setPost] = React.useState(null);
  const [error, setError] = React.useState(null);

  React.useEffect(() => {
    // invalid url will trigger an 404 error
    axios.get(`${baseURL}/asdf`).then((response) => {
      setPost(response.data);
    }).catch(error => {
      setError(error);
    });
  }, []);

  if (error) return `Error: ${error.message}`;
  if (!post) return "No post!"

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
}

В этом случае вместо выполнения .then() Axios выдаст ошибку и запустит функцию обратного вызова .catch(). В этой функции мы берём сведения об ошибке и помещаем их в состояние, чтобы предупредить пользователя о проблеме. Когда вы запустите этот пример кода, то увидите текст «Ошибка: запрос не выполнен с кодом состояния 404».

Заключение

Мы рассмотрели несколько операций, которые можно выполнить в React-приложении с помощью Axios. Это лишь основы, но даже на их примере заметны простота и удобство библиотеки.

Больше информации об использовании библиотеки в связке с React смотрите в официальной документации.