React + Axios: все, что вам нужно знать (2021 г.)

React + Axios: все, что вам нужно знать (2021 г.)

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

Вы увидите, почему вам следует использовать Axios в качестве библиотеки для выборки данных, как настроить ее с помощью React и выполнять с ней все типы HTTP-запросов.

Затем мы коснемся более продвинутых функций, таких как создание экземпляра Axios для повторного использования, использование async-await с Axios для простоты и то, как использовать Axios в качестве настраиваемой ловушки.

Давайте нырнем!

Хотите свою копию? 📄

Щелкните здесь, чтобы загрузить шпаргалку в формате PDF (это займет 5 секунд).

Здесь вся необходимая информация представлена ​​в виде удобного руководства в формате PDF.

Оглавление

• Что такое Axios?
• Зачем использовать Axios в React?
• Как настроить Axios с помощью React
• Как сделать запрос GET (получить данные)
• Как сделать запрос POST (создать данные)
• Как сделать запрос PUT (обновить данные)
• Как сделать запрос DELETE (удалить данные)
• Как обрабатывать ошибки с помощью Axios
• Как создать экземпляр Axios
• Как использовать синтаксис Async-Await с Axios
• Как создать собственный useAxios крючок

Что такое Axios?

Axios - это клиентская библиотека HTTP, которая позволяет делать запросы к заданной конечной точке:

Например, это может быть внешний API или ваш собственный сервер Node.js.

Отправляя запрос, вы ожидаете, что ваш API выполнит операцию в соответствии с сделанным вами запросом.

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

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

Существует ряд различных библиотек, которые вы можете использовать для выполнения этих запросов, так почему же стоит выбирать Axios?

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

1. У него хорошие настройки по умолчанию для работы с данными JSON. В отличие от альтернатив, таких как Fetch API, вам часто не нужно устанавливать заголовки. Или выполняйте утомительные задачи, такие как преобразование тела запроса в строку JSON.
2. Axios имеет имена функций, которые соответствуют любым HTTP-методам. Чтобы выполнить запрос GET, вы используете метод .get().
3. Axios делает больше с меньшим количеством кода. В отличие от Fetch API, вам нужен только один .then() обратный вызов для доступа к запрошенным данным JSON.
4. Axios лучше обрабатывает ошибки. Axios выдает за вас ошибки диапазона 400 и 500. В отличие от Fetch API, где вам нужно проверить код состояния и самостоятельно выдать ошибку.
5. Axios можно использовать как на сервере, так и на клиенте. Если вы пишете приложение Node.js, имейте в виду, что Axios также можно использовать в среде, отдельной от браузера.

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

Использование Axios с React - очень простой процесс. Вам понадобятся три вещи:

1. Существующий проект React
2. Чтобы установить Axios с помощью npm / yarn
3. Конечная точка API для выполнения запросов

Самый быстрый способ создать новое приложение React - перейти на сайт react.new.

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

npm install axios

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

Вот список всех различных маршрутов, по которым вы можете делать запросы, а также соответствующий HTTP-метод для каждого из них:

Вот краткий пример всех операций, которые вы будете выполнять с Axios и конечной точкой API - получение, создание, обновление и удаление сообщений:

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

Чтобы получить данные или получить их, сделайте запрос GET.

Сначала вы собираетесь запросить отдельные сообщения. Если вы посмотрите на конечную точку, вы получите первое сообщение от конечной точки /posts:

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>
  );
}

Чтобы выполнить этот запрос при монтировании компонента, вы используете ловушку useEffect. Это включает в себя импорт Axios, использование метода .get() для выполнения запроса GET к вашей конечной точке и использование обратного вызова .then() для возврата всех данных ответа.

Axios возвращает ответ в виде объекта. Данные (в данном случае это сообщение со свойствами id, title и body) помещаются в часть состояния с именем post, которая отображается в компоненте.

Обратите внимание, что вы всегда можете найти запрошенные данные из свойства .data в ответе.

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

Чтобы создать новые данные, сделайте запрос POST.

Согласно API, это необходимо выполнить на /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."
      })
      .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>
  );
}

При нажатии на кнопку вызывается функция createPost.

Чтобы сделать этот запрос POST с помощью Axios, вы используете метод .post(). В качестве второго аргумента вы включаете свойство объекта, которое указывает, каким должен быть новый пост.

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

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

Как сделать запрос 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 от Axios. Как и в случае с методом POST, вы включаете в обновленный ресурс свойства, которые хотите видеть.

Опять же, используя обратный вызов .then(), вы обновляете JSX возвращаемыми данными.

Как сделать запрос на удаление

Наконец, чтобы удалить ресурс, используйте метод 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

А как насчет обработки ошибок с помощью Axios?

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

Чтобы смоделировать ошибку, вы отправите запрос на несуществующую конечную точку 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».

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

Если вы посмотрите на предыдущие примеры, вы увидите, что есть baseURL, который вы используете как часть конечной точки для Axios для выполнения этих запросов.

Однако становится немного утомительно писать это baseURL для каждого отдельного запроса. Разве у вас не может быть 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 и так далее.

Как использовать синтаксис Async-Await с Axios

Большим преимуществом использования обещаний в JavaScript (включая приложения React) является синтаксис async-await.

Async-await позволяет писать более чистый код без then и catch функций обратного вызова. Кроме того, код с async-await очень похож на синхронный код и его легче понять.

Но как использовать синтаксис async-await с Axios?

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

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(() => {
    async function getPost() {
      const response = await client.get("/1");
      setPost(response.data);
    }
    getPost();
  }, []);

  async function deletePost() {
    await client.delete("/1");
    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>
  );
}

Однако в useEffect есть async функция с именем getPost.

Создание этого async позволяет вам использовать await keword для разрешения запроса GET и установить эти данные в состояние в следующей строке без обратного вызова .then().

Обратите внимание, что функция getPost вызывается сразу после создания.

Кроме того, функция deletePost теперь async, что является требованием для использования ключевого слова await, которое разрешает возвращаемое им обещание (каждый метод Axios возвращает обещание для разрешения).

После использования ключевого слова await с запросом DELETE пользователь получает предупреждение о том, что сообщение было удалено, и для сообщения устанавливается значение null.

Как видите, async-await значительно очищает код, и вы можете очень легко использовать его с Axios.

Как создать собственный useAxios хук

Async-await - отличный способ упростить код, но вы можете сделать еще один шаг вперед.

Вместо использования useEffect для извлечения данных при монтировании компонента вы можете создать свой собственный перехватчик с Axios для выполнения той же операции, что и функция многократного использования.

Хотя вы можете сделать этот собственный хук самостоятельно, существует очень хорошая библиотека, которая предоставляет вам пользовательский useAxios хук под названием use-axios-client.

Сначала установите пакет:

npm install use-axios-client

Чтобы использовать сам ловушку, импортируйте useAxios из use-axios-client в верхней части компонента.

Поскольку вам больше не нужен useEffect, вы можете удалить импорт React:

import { useAxios } from "use-axios-client";

export default function App() {
  const { data, error, loading } = useAxios({
    url: "https://jsonplaceholder.typicode.com/posts/1"
  });

  if (loading || !data) return "Loading...";
  if (error) return "Error!";

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

Теперь вы можете вызвать useAxios в верхней части компонента приложения, передать URL-адрес, к которому вы хотите отправить запрос, и ловушка вернет объект со всеми значениями, которые вам нужны для обработки различных состояний: loading, error и разрешенный data .

В процессе выполнения этого запроса значение loading будет истинным. Если возникла ошибка, вы захотите отобразить это состояние ошибки. В противном случае, если у вас есть возвращенные данные, вы можете отобразить их в пользовательском интерфейсе.

Преимущество таких настраиваемых хуков состоит в том, что они действительно сокращают код и упрощают его в целом.

Если вы ищете еще более простой способ получения данных с помощью Axios, попробуйте собственный useAxios хук, подобный этому.

Что дальше?

Поздравляю! Теперь вы знаете, как использовать одну из самых мощных клиентских библиотек HTTP для работы ваших приложений React.

Надеюсь, вы получили много полезного из этого руководства.

Помните, что вы можете загрузить это руководство в виде шпаргалки в формате PDF для использования в будущем.

Хотите еще большего? Присоединяйтесь к React Bootcamp

React Bootcamp объединяет все, что вы должны знать об изучении React, в один комплексный пакет, включая видео, шпаргалки и специальные бонусы.

Получите инсайдерскую информацию, которую сотни разработчиков уже использовали, чтобы стать профессионалом в области React, найти работу своей мечты и взять под контроль свое будущее:

Нажмите здесь, чтобы получить уведомление, когда оно откроется