С легкостью выполняйте асинхронные HTTP-запросы с помощью Axios

Статья Легко выполнять асинхронные HTTP-запросы с помощью Axios была первоначально опубликована в среду, 4 января 2023 г., в Блоге технических разработчиков. Для получения новейшего актуального контента, только что из печи, посетите https://techdevblog.io и подпишитесь на нашу рассылку!

Axios — это популярная библиотека JavaScript для создания HTTP-запросов. Он основан на промисах и упрощает работу с асинхронными запросами в ваших приложениях. В этом руководстве мы рассмотрим некоторые из лучших практик использования Axios для выполнения HTTP-запросов.

Установка Аксиос

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

нпм

Чтобы установить Axios с помощью npm, выполните в терминале следующую команду:

npm install axios

пряжа

Чтобы установить Axios с помощью пряжи, выполните в терминале следующую команду:

yarn add axios

Делать запросы

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

axios.get('/api/users')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

В этом примере мы делаем запрос GET к конечной точке /api/users. Если запрос выполнен успешно, данные ответа будут записаны в консоль. Если есть ошибка, она будет обнаружена и зарегистрирована в консоли.

Вы также можете делать POST-запросы с помощью Axios. Вот пример POST-запроса:

axios.post('/api/users', {
  name: 'John Smith',
  email: '[email protected]'
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

В этом примере мы отправляем запрос POST к конечной точке /api/users с полезными данными, содержащими имя и адрес электронной почты.

Настройка запросов

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

axios.get('/api/users', {
  headers: {
    'Authorization': 'Bearer abc123'
  },
  params: {
    page: 2
  }
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

В этом примере мы передаем заголовок Authorization с токеном носителя и параметр page со значением 2.

Работа с обещаниями

Axios использует промисы для обработки асинхронных запросов. Это означает, что вы можете использовать методы then и catch для обработки случаев успеха и ошибок.

axios.get('/api/users')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

В этом примере мы делаем запрос GET к конечной точке /api/users. Если запрос выполнен успешно, данные ответа будут записаны в консоль. Если есть ошибка, она также будет зарегистрирована в консоли.

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

Важно правильно обрабатывать ошибки в запросах Axios. Вы можете сделать это с помощью метода catch, как показано в предыдущих примерах. Вы также можете использовать метод catch для обработки определенных ошибок. Например, вы можете захотеть обработать ошибку 404 иначе, чем ошибку 500.

axios.get('/api/users')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (error.response) {
      // The request was made and the server responded with a status code
      // that falls out of the range of 2xx
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // The request was made but no response was received
      // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
      // http.ClientRequest in node.js
      console.log(error.request);
    } else {
      // Something happened in setting up the request that triggered an Error
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

В этом примере мы используем объект error.response для регистрации данных, кода состояния и заголовков ответа. Мы также регистрируем объект error.request, который является сделанным запросом. Наконец, мы регистрируем объект error.config, который содержит конфигурацию, которая использовалась для выполнения запроса.

Настройка параметров по умолчанию

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

const axios = require('axios');

const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
  headers: {
    'Authorization': 'Bearer abc123'
  }
});

instance.get('/users')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

В этом примере мы создаем экземпляр Axios с базовым URL-адресом https://api.example.com, временем ожидания 1000 миллисекунд и заголовком Authorization с токеном-носителем. К любым запросам, сделанным с помощью этого экземпляра, будут применены эти параметры по умолчанию.

Отмена запросов

Вы можете отменить запрос Axios, используя объект CancelToken. Это полезно, если вам нужно отменить запрос, который занимает слишком много времени, или если вам больше не нужен ответ на запрос.

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/api/users', {
  cancelToken: source.token
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (axios.isCancel(error)) {
      console.log('Request cancelled', error.message);
    } else {
      console.log(error);
    }
  });

// cancel the request (the message parameter is optional)
source.cancel('Operation cancelled by the user.');

В этом примере мы создаем объект CancelToken и объект source. Затем мы передаем source.token в параметр cancelToken запроса Axios. Чтобы отменить запрос, мы вызываем метод cancel для объекта source. Метод isCancel используется для проверки того, является ли ошибка ошибкой отмены.

Использование Axios с Async/Await

Вы можете использовать Axios с async/await, чтобы сделать ваш код более читабельным и с ним было проще работать. Вот пример асинхронной функции, которая делает запрос Axios:

async function getUsers() {
  try {
    const response = await axios.get('/api/users');
    console.log(response.data);
  } catch (error) {
    console.log(error);
  }
}

getUsers();

В этом примере мы используем ключевое слово await для ожидания разрешения запроса Axios перед записью данных ответа в консоль. Если есть ошибка, она будет обнаружена и зарегистрирована в консоли.

Заключение

В этом руководстве мы рассмотрели некоторые из лучших практик использования Axios для выполнения HTTP-запросов. Мы рассмотрели, как установить Axios, делать запросы, настраивать запросы, обрабатывать ошибки, устанавливать параметры по умолчанию, отменять запросы и использовать async/await. Обладая этими навыками, вы должны быть на пути к эффективному использованию Axios в своих проектах.