Vue Academy · Lekcja

Żądania HTTP z Axios

Wykonają Państwo żądania GET i POST do API za pomocą Axios.

Lekcja 1 z 313 kroki

Żądania HTTP z Axios to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 1 z 3. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 3 lekcji w sumie.

Komunikacja z API

Większość rzeczywistych aplikacji ładuje dane z backendu przez HTTP. Przeglądarka ma wbudowany mechanizm fetch, ale wiele projektów Vue korzysta z biblioteki Axios — popularnego klienta HTTP opartego na obietnicach, z wygodniejszym interfejsem API, automatycznym parsowaniem JSON i rozbudowanymi opcjami konfiguracji.

Instalowanie Axios

Dodaj Axios do projektu za pomocą menedżera pakietów, a następnie zaimportuj go w miejscu, w którym będzie potrzebny.

npm install axios

Importowanie Axios

Zaimportuj eksport domyślny, aby rozpocząć wysyłanie żądań.

import axios from "axios"

Żądanie GET

Użyj axios.get, aby pobrać dane. Zwraca on obietnicę, która rozwiązuje się do obiektu odpowiedzi; treść odpowiedzi znajduje się w response.data i jest już sparsowana z JSON.

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

Żądanie POST

Użyj axios.post, aby wysłać dane. Drugi argument to treść żądania, którą Axios automatycznie serializuje do JSON.

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

Używanie async/await

Obietnice są czytelniejsze z użyciem async/await. Oznacz funkcję jako asynchroniczną i użyj await przy żądaniu.

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

Wewnątrz metody Vue

Popularny wzorzec polega na wywoływaniu Axios z metody komponentu i zapisywaniu wyniku w danych reaktywnych.

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

Konfiguracja żądania: parametry zapytania

Przekaż obiekt params, aby dodać parametry zapytania. Axios zbuduje adres URL za Ciebie.

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

Konfiguracja żądania: nagłówki

Przesyłaj niestandardowe nagłówki, takie jak token autoryzacyjny, za pośrednictwem obiektu konfiguracji.

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

Konfiguracja bazowego adresu URL

Powtarzanie pełnego adresu URL w wielu miejscach sprzyja błędom. Utwórz instancję Axios z ustawieniem baseURL i wspólnymi wartościami domyślnymi, a następnie używaj jej w całej aplikacji.

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")

Inne metody HTTP

Axios odwzorowuje popularne czasowniki HTTP: get, post, put, patch i delete. Użyj tego, który odpowiada wykonywanej operacji.

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

Szybkie sprawdzenie

Sprawdź swoją wiedzę na temat żądań Axios.

Odpowiedz w interaktywnej lekcji

Podsumowanie

Axios to klient HTTP oparty na obietnicach. Używaj metod get, post, put, patch i delete, przekazuj params i headers przez obiekt konfiguracji oraz wybieraj async/await dla większej czytelności. Wspólna instancja utworzona za pomocą axios.create z ustawieniem baseURL pozwala uniknąć powtarzania kodu w żądaniach. Następnie pobierzesz dane w odpowiednim momencie cyklu życia komponentu.

Bezpłatny start

Ucz się HTML dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 42
Lekcje: 156

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Żądania HTTP z Axios” jest bezpłatna?

Tak — pełny tekst „Żądania HTTP z Axios” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 3 lekcji w sumie.

Co nauczysz się w „Żądania HTTP z Axios”?

Wykonają Państwo żądania GET i POST do API za pomocą Axios. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 3.

Ile czasu zajmuje lekcja „Żądania HTTP z Axios”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Vue Academy