Vue Academy · Pelajaran

Permintaan HTTP dengan Axios

Buat permintaan GET dan POST ke API dengan Axios.

Permintaan HTTP dengan Axios adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 3. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 3 pelajaran total.

Berinteraksi dengan API

Sebagian besar aplikasi nyata memuat data dari backend melalui HTTP. Meskipun peramban memiliki fetch bawaan, banyak proyek Vue menggunakan Axios, klien HTTP berbasis janji yang populer, dengan API yang lebih mudah digunakan, penguraian JSON otomatis, dan opsi konfigurasi yang kuat.

Memasang Axios

Tambahkan Axios ke proyek Anda dengan pengelola paket, lalu impor di tempat yang memerlukannya.

npm install axios

Mengimpor Axios

Impor ekspor bawaan untuk mulai membuat permintaan.

import axios from "axios"

Permintaan GET

Gunakan axios.get untuk mengambil data. Fungsi ini mengembalikan janji yang menghasilkan objek respons; isi respons berada di response.data dan sudah diuraikan dari JSON.

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

Permintaan POST

Gunakan axios.post untuk mengirim data. Argumen kedua adalah isi permintaan, yang secara otomatis diserialisasikan Axios menjadi JSON.

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

Menggunakan async/await

Janji lebih mudah dibaca dengan async/await. Tandai fungsi sebagai asinkron dan gunakan await pada permintaan.

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

Di Dalam Metode Vue

Pola yang umum adalah memanggil Axios dari metode komponen lalu menyimpan hasilnya dalam data reaktif.

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

Konfigurasi Permintaan: Parameter Kueri

Berikan objek params untuk menambahkan parameter string kueri. Axios akan menyusun URL untuk Anda.

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

Konfigurasi Permintaan: Header

Kirim header khusus, seperti token otorisasi, melalui objek konfigurasi.

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

Konfigurasi URL Dasar

Mengulangi URL lengkap di setiap tempat rentan menimbulkan kesalahan. Buat instans Axios dengan baseURL dan nilai bawaan bersama, lalu gunakan instans tersebut di seluruh aplikasi.

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

Metode HTTP Lainnya

Axios menyediakan verba HTTP umum: get, post, put, patch, dan delete. Gunakan metode yang sesuai dengan tindakan yang ingin Anda lakukan.

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

Pemeriksaan Singkat

Uji pengetahuan Anda tentang permintaan Axios.

Ringkasan

Axios adalah klien HTTP berbasis janji. Gunakan get, post, put, patch, dan delete, teruskan params dan headers melalui objek konfigurasi, serta utamakan async/await agar kode mudah dibaca. Instans bersama melalui axios.create dengan baseURL menjaga permintaan tetap DRY. Selanjutnya, Anda akan mengambil data pada waktu yang tepat dalam siklus hidup komponen.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Permintaan HTTP dengan Axios” gratis?

Ya — teks lengkap “Permintaan HTTP dengan Axios” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 3 pelajaran total.

Apa yang akan aku pelajari di “Permintaan HTTP dengan Axios”?

Buat permintaan GET dan POST ke API dengan Axios. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 3.

Berapa lama pelajaran “Permintaan HTTP dengan Axios” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Permintaan HTTP dengan Axios
Hook Siklus Hidup dan Pengambilan Data
Penanganan Kesalahan dan Interseptor Global

← Kembali ke Vue Academy