Vue Academy · Ders

Axios ile HTTP İstekleri

Axios ile API'lere GET ve POST istekleri gönderin.

Axios ile HTTP İstekleri, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 3 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 3 dersten oluşur.

API'lerle İletişim

Gerçek uygulamaların çoğu verileri HTTP üzerinden bir arka uçtan yükler. Tarayıcıda yerleşik bir fetch bulunsa da birçok Vue projesi, daha kullanışlı bir API, otomatik JSON ayrıştırma ve güçlü yapılandırma seçenekleri sunan, popüler ve vaat tabanlı bir HTTP istemcisi olan Axios'u kullanır.

Axios'u Yükleme

Paketi yöneticinizi kullanarak Axios'u projenize ekleyin, ardından ihtiyaç duyduğunuz yerde içe aktarın.

npm install axios

Axios'u İçe Aktarma

İstek oluşturmaya başlamak için varsayılan dışa aktarımı içe aktarın.

import axios from "axios"

GET İsteği

Veri almak için axios.get kullanın. Bu işlem, bir yanıt nesnesiyle sonuçlanan bir vaat döndürür; gövde, JSON'dan zaten ayrıştırılmış olarak response.data içinde bulunur.

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

POST İsteği

Veri göndermek için axios.post kullanın. İkinci bağımsız değişken istek gövdesidir; Axios bunu otomatik olarak JSON biçimine dönüştürür.

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

async/await Kullanımı

Vaatler async/await ile daha anlaşılır hâle gelir. İşlevi async olarak işaretleyin ve isteğin tamamlanmasını bekleyin.

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

Bir Vue Yönteminin İçinde

Yaygın bir yaklaşım, Axios'u bir bileşen yönteminden çağırmak ve sonucu reaktif verilere kaydetmektir.

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

İstek Yapılandırması: Sorgu Parametreleri

Sorgu dizesi parametreleri eklemek için bir params nesnesi aktarın. Axios, URL'yi sizin için oluşturur.

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

İstek Yapılandırması: Üst Bilgiler

Yetkilendirme belirteci gibi özel üst bilgileri yapılandırma nesnesi üzerinden gönderin.

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

Temel URL Yapılandırması

Tam URL'yi her yerde tekrarlamak hataya açıktır. Bir baseURL ve ortak varsayılanlar içeren bir Axios örneği oluşturun, ardından bu örneği uygulamanızın her yerinde kullanın.

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

Diğer HTTP Yöntemleri

Axios, yaygın HTTP fiillerini yansıtır: get, post, put, patch ve delete. Gerçekleştirmek istediğiniz işleme uygun olanı kullanın.

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

Kısa Kontrol

Axios istekleri hakkındaki bilginizi sınayın.

Özet

Axios, vaat tabanlı bir HTTP istemcisidir. get, post, put, patch ve delete kullanın; params ile headers değerlerini yapılandırma nesnesi üzerinden aktarın ve okunabilirlik için async/await kullanımını tercih edin. axios.create aracılığıyla oluşturulan ve baseURL kullanan ortak bir örnek, isteklerin tekrarlanmasını önler. Sırada bir bileşenin yaşam döngüsünde verileri doğru zamanda alacaksınız.

Sıkça Sorulan Sorular

“Axios ile HTTP İstekleri” dersi ücretsiz mi?

Evet — “Axios ile HTTP İstekleri” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 3 dersten oluşur.

“Axios ile HTTP İstekleri” dersinde ne öğreneceğim?

Axios ile API'lere GET ve POST istekleri gönderin. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 3 dersinin 1. dersidir.

“Axios ile HTTP İstekleri” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Vue Academy Sayfasına Dön