06.02.2023 в 21:42

Axios для использования REST API в React

Сегодня большинство приложений используют данные из API. Эти ориентированные на API приложения имеют различные способы и технологии, используемые для выполнения запросов к API. Как вы используете API в своем приложении? Какие технологии вы используете?

В этой статье мы рассмотрим Axios, стороннюю библиотеку HTTP-клиента на основе обещаний для node.js и браузера. Мы рассмотрим, как использовать Axios для выполнения HTTP-запросов к API. Мы также рассмотрим, как обрабатывать ошибки при выполнении HTTP-запросов.

Axios

Axios - это сторонняя клиентская библиотека HTTP на основе promise для node.js и браузер. Он изоморфен (= он может запускаться в браузере и nodejs с одной и той же кодовой базой). На стороне сервера он использует собственный node.js http-модуль, в то время как клиент (браузер) использует XMLHttpRequests.

Вы можете добавить в свой проект либо через сеть распространения контента, либо через CDN, либо установить его с помощью менеджера пакетов, такого как npm или yarn. Аксиомы могут запускаться в браузере или node.js окружающая среда.

Это очень популярная библиотека для выполнения HTTP-запросов. Он очень прост в использовании и обладает множеством функций.

Он также очень популярен в сообществе React. Он используется во многих проектах React. Лично мы приведем несколько существенных преимуществ Axios по сравнению с традиционным API выборки.

При отправке запросов Axios автоматически указывает данные, но Fetch API требует, чтобы вы делали это вручную.
Axios обладает лучшей обработкой ошибок, чем Fetch API. Обработка ошибок с помощью Axios лучше, потому что неправильные ответы (такие как 404 или 500) в конечном итоге приведут к отклонению обещания путем создания исключения. Он может выдавать ошибки в диапазоне от 400 до 500. Эти ошибки можно легко обработать с помощью блока try-catch.
Axios позволяет отменять запросы и устанавливать тайм-ауты запросов. У него есть токен отмены, который можно использовать для отмены запроса.

Начало

Чтобы начать, вам необходимо установить Axios в свой проект. Вы можете сделать это, выполнив следующую команду в вашем проекте.

npm install axios

Как только это будет сделано, вы сможете импортировать Axios в свой проект и начать делать запросы.

import axios from 'axios';

axios.get('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.log(error);
  });

В приведенном выше коде мы делаем запрос GET к API. Мы используем метод get объекта axios для выполнения запроса. Метод get принимает URL API в качестве первого аргумента. Второй аргумент - это объект, содержащий конфигурацию запроса. Третий аргумент - это функция обратного вызова, которая вызывается при успешном выполнении запроса. Четвертый аргумент - это функция обратного вызова, которая вызывается при сбое запроса. Функции обратного вызова являются необязательными. Вы также можете использовать методы then и catch для обработки ответа и ошибок соответственно.

Для удобства использования мы всегда создаем экземпляр Axios и используем его для отправки запросов. Это потому, что мы можем установить baseUrl API и заголовки для всех запросов. Это упрощает отправку запросов к API. Ниже приведен пример того, как создать экземпляр Axios.

Создайте файл в каталоге SRC вашего проекта react и назовите его client.js. Этот файл будет содержать экземпляр Axios.
Используйте метод .create() объекта Axios для создания экземпляра Axios. Метод .create() принимает объект в качестве аргумента. Объект содержит конфигурацию для экземпляра Axios. Объект конфигурации может содержать следующие свойства.
Свойство baseURL — это базовый URL-адрес API. Это URL-адрес, который будет использоваться для всех запросов. Свойство headers — это объект, содержащий заголовки для всех запросов. Объект headers может содержать любое количество заголовков. Объект headers является необязательным. Вы также можете установить заголовки для каждого запроса.


// src/client.js
import axios from 'axios';

const Client = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com', // base URL of the API
  headers: {
    'Content-Type': 'application/json',
  },
});

export default Client;

Оформление запроса

Чтобы сделать запрос, вам необходимо импортировать экземпляр Axios и использовать его для выполнения запроса. Ниже приведен пример того, как сделать запрос с помощью экземпляра Axios.

import Client from './client';

const App = () => {
  const [todos, setTodos] = useState([]);

  useEffect( async () => {
    const {data} = await Client.get('/todos');
    setTodos(data);
  }, []);

  return (
    <div>
      <h1>Todos</h1>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>{todo.title}</li>
        ))}
      </ul>
    </div>
  );
};

В приведенном выше коде мы делаем запрос GET к API. Мы используем метод get экземпляра Axios для выполнения запроса. Здесь в качестве URL-адреса используется конечная точка /todos, поскольку для экземпляра уже установлен базовый URL-адрес.

Обработка ошибок

Обычно рекомендуется управлять ошибками при использовании данных из API, чтобы помочь определить тип ошибки, которую мы получаем. Эти сбои могут быть результатом отправки неточных данных, отправки запроса по неправильному API или возникновения проблемы с сетью.

Мы можем обрабатывать ошибки в Axios с помощью методов .then() и .catch() или с помощью блока try...catch для асинхронных/ожидающих запросов Axios.

Ниже приведен пример обработки ошибок с помощью блока try и catch.

import Client from './client';

const App = () => {
    const [todos, setTodos] = useState([]);
    const [error, setError] = useState(null);

    useEffect( async () => {
    try {
        const {data} = await Client.get('/todos');
        setTodos(data);
    } catch (error) {
        setError(error);
    }
    }, []);

};

Вывод

В этой статье мы рассмотрели Axios, стороннюю библиотеку HTTP-клиента на основе обещаний для node.js и браузера. Мы рассмотрели, как использовать Axios для выполнения HTTP-запросов к API. Мы также рассмотрели, как обрабатывать ошибки при выполнении HTTP-запросов.

#JavaScript #React

775