PricingLoginStart free
Vue Academy · Урок

HTTP-запросы с Axios

Отправляйте запросы GET и POST к API с помощью Axios

Урок 1 из 313 шагов

«HTTP-запросы с Axios» — бесплатный урок Vue Academy на CoddyKit. Это урок 1 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 3 уроков всего.

Взаимодействие с API

Большинство реальных приложений загружает данные с сервера по протоколу HTTP. Хотя в браузере есть встроенная функция fetch, многие проекты Vue используют Axios — популярный HTTP-клиент на основе промисов с более удобным API, автоматическим разбором JSON и широкими возможностями настройки.

Установка Axios

Добавьте Axios в проект с помощью менеджера пакетов, а затем импортируйте его там, где он нужен.

npm install axios

Импорт Axios

Импортируйте экспорт по умолчанию, чтобы начать отправлять запросы.

import axios from "axios"

GET-запрос

Используйте axios.get для получения данных. Функция возвращает промис, который разрешается объектом ответа; тело ответа находится в response.data и уже разобрано из JSON.

axios.get("https://api.example.com/users")
  .then(response => {
    console.log(response.data)
  })

POST-запрос

Используйте axios.post для отправки данных. Второй аргумент — тело запроса, которое Axios автоматически сериализует в JSON.

axios.post("https://api.example.com/users", {
  name: "Grace",
  email: "grace@example.com"
})

Использование async/await

Синтаксис async/await делает работу с промисами более понятной. Объявите функцию асинхронной и дождитесь выполнения запроса с помощью await.

async function loadUsers() {
  const response = await axios.get("/api/users")
  return response.data
}

Внутри метода Vue

Распространённый подход — вызывать Axios из метода компонента и сохранять результат в реактивных данных.

export default {
  data() {
    return { users: [] }
  },
  methods: {
    async fetchUsers() {
      const res = await axios.get("/api/users")
      this.users = res.data
    }
  }
}

Настройка запроса: параметры строки запроса

Передайте объект params, чтобы добавить параметры строки запроса. Axios построит URL за Вас.

axios.get("/api/users", {
  params: { page: 2, limit: 10 }
})
// requests /api/users?page=2&limit=10

Настройка запроса: заголовки

Передавайте пользовательские заголовки, например токен авторизации, через объект конфигурации.

axios.get("/api/profile", {
  headers: {
    Authorization: "Bearer " + token
  }
})

Настройка базового URL

Повторять полный URL в каждом месте рискованно. Создайте экземпляр Axios с baseURL и общими значениями по умолчанию, а затем используйте его во всём приложении.

import axios from "axios"

export const api = axios.create({
  baseURL: "https://api.example.com",
  timeout: 5000,
  headers: { "Content-Type": "application/json" }
})

// elsewhere: api.get("/users")

Другие методы HTTP

Axios поддерживает распространённые методы HTTP: get, post, put, patch и delete. Используйте метод, соответствующий требуемому действию.

api.put("/users/1", { name: "Updated" })
api.patch("/users/1", { name: "Patched" })
api.delete("/users/1")

Быстрая проверка

Проверьте свои знания о запросах Axios.

Ответь в интерактивном уроке

Повторение

Axios — HTTP-клиент на основе промисов. Используйте get, post, put, patch и delete, передавайте params и headers через объект конфигурации и выбирайте async/await для большей понятности. Общий экземпляр, созданный с помощью axios.create и настроенный через baseURL, позволяет не дублировать код. Далее Вы загрузите данные в подходящий момент жизненного цикла компонента.

Можно начать бесплатно

Изучай HTML с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы
42
Уроки
156
Начать учиться бесплатноПосмотреть полный курс

Часто задаваемые вопросы

Урок «HTTP-запросы с Axios» бесплатный?

Да — полный текст урока «HTTP-запросы с Axios» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 3 уроков всего.

Чему я научусь в уроке «HTTP-запросы с Axios»?

Отправляйте запросы GET и POST к API с помощью Axios Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 3.

Сколько времени занимает урок «HTTP-запросы с Axios»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. HTTP-запросы с Axios
  2. Хуки жизненного цикла и получение данных
  3. Обработка ошибок и глобальные перехватчики
← Назад к Vue Academy