Vue.js ile Web API Çağrıları ve Veri Yönetimi (1 Görüntüleyici)

export default { // Bir Vue bileşeni tanımı (SFC mantığıyla düşünelim)
  data() {
    return {
      // API'den gelecek veriyi saklayacak liste/dizi
      urunler: [],
      // Yüklenme durumunu gösterecek boolean
      yukleniyor: true,
      // Hata durumunu saklayacak değişken
      hata: null
    };
  },

  // Bileşen DOM'a eklendikten sonra çalışacak yaşam döngüsü kancası
  mounted() {
    console.log('Bileşen DOM\'a eklendi, API çağrısı yapılıyor...');
    // API çağrısı burada yapılır
    this.fetchProducts(); // API çağrısı yapan bir metot çağırıyoruz
  },

  methods: {
    // API'den veri çekme metotu
    async fetchProducts() { // Asenkron bir metot
      this.yukleniyor = true; // Yükleniyor durumunu başlat
      this.hata = null; // Önceki hataları temizle

      try {
        // API adresiniz (örneğin kendi Flask API'nizin adresi)
        const apiUrl = 'http://127.0.0.1:5000/products';
        // API Güvenliği için başlıklar (API Key gibi) gerekiyorsa ekleyin (Konu 24)
        const headers = { 'X-API-Key': 'admin_super_key' }; // Örnek key

        // Fetch API kullanarak GET isteği gönderme
        const response = await fetch(apiUrl, { headers: headers }); // await ile Promise'i bekle

        if (!response.ok) {
           // Hata durumunda (400, 401, 403, 404, 500 vb.)
           const errorData = await response.json(); // Hata body'sini de oku
           throw new Error(`API Hatası! Status: ${response.status}, Mesaj: ${errorData.message || response.statusText}`);
        }

        // Yanıt body'sini JSON olarak oku ve Promise'i bekle
        const data = await response.json(); // await ile Promise'i bekle

        // Gelen veriyi bileşenin data'sına ata
        this.urunler = data; // Gelen data'nın doğrudan ürün listesi olduğunu varsayalım
        console.log('Ürünler başarıyla çekildi:', this.urunler);

      } catch (error) {
        console.error('API çağrısı sırasında hata oluştu:', error);
        this.hata = error; // Hata durumunu kaydet
      } finally {
        this.yukleniyor = false; // Yüklenme durumunu sonlandır
        console.log('API çağrısı tamamlandı.');
      }
    }
  },

  // ... Diğer metotlar, computed, watchers vb. buraya gelir
};

npm install axios
# veya
yarn add axios
# veya
pnpm add axios

import axios from 'axios'; // Axios kütüphanesini içe aktar

export default { // Bir Vue bileşeni tanımı
  data() {
    return {
      urunler: [],
      yukleniyor: true,
      hata: null
    };
  },

  mounted() {
    console.log('Bileşen DOM\'a eklendi, API çağrısı yapılıyor (Axios)...');
    this.fetchProductsWithAxios();
  },

  methods: {
    async fetchProductsWithAxios() { // Asenkron bir metot
      this.yukleniyor = true;
      this.hata = null;

      try {
        const apiUrl = 'http://127.0.0.1:5000/products';
        const apiKey = 'admin_super_key'; // API Key

        // Axios ile GET isteği gönderme (async/await)
        // headers ve diğer ayarlar config objesinde belirtilir
        const response = await axios.get(apiUrl, {
          headers: {
            'X-API-Key': apiKey // Başlıkları ekle
          },
          // baseURL: API_URL, // Axios'un varsayılan URL'sini ayarlayabilirsiniz
          // timeout: 5000, // İstek zaman aşımı (milisaniye)
        });

        // Axios yanıtı otomatik olarak JSON'a çevirir ve response.data objesine koyar
        this.urunler = response.data; // Doğrudan response.data'yı kullan
        console.log('Ürünler başarıyla çekildi (Axios):', this.urunler);

      } catch (error) { // Axios hata olursa Promise'i reject eder, burada yakalanır
        console.error('API çağrısı sırasında hata oluştu (Axios):', error);

        // Axios hata objesinden detayları alabilirsiniz
        if (error.response) { // HTTP yanıtı alındı ama status kodu 2xx değil (401, 403, 404, 500 vb.)
            console.error('Hata Yanıtı Data:', error.response.data);
            console.error('Hata Yanıtı Status:', error.response.status);
            console.error('Hata Yanıtı Headers:', error.response.headers);
            this.hata = new Error(`API Hatası! Status: ${error.response.status}, Mesaj: ${error.response.data.message || error.message}`);
        } else if (error.request) { // İstek yapıldı ama yanıt alınamadı (örn: ağ hatası)
             console.error('Hata İstek:', error.request);
             this.hata = new Error('API isteği gönderilemedi veya yanıt alınamadı.');
        } else { // Diğer hatalar (kod hatası vb.)
             console.error('Hata Mesajı:', error.message);
             this.hata = new Error('İstek oluşturulurken bir hata oluştu: ' + error.message);
        }

      } finally {
        this.yukleniyor = false;
        console.log('API çağrısı tamamlandı (Axios).');
      }
    }
  },
};

<template> {# SFC template kısmı #}
  <div class="product-list-container">
    <h2>Ürün Listesi</h2>

    {# Yüklenme durumu #}
    <p v-if="yukleniyor">Ürünler yükleniyor...</p>

    {# Hata durumu #}
    <p v-else-if="hata" class="error-message">{{ hata.message }}</p>

    {# Veri başarıyla yüklendiğinde ve hata olmadığında #}
    <ul v-else-if="urunler && urunler.length > 0"> {# urunler doluysa #}
      <li v-for="urun in urunler" :key="urun.id">
        {{ urun.ad }} - {{ urun.fiyat }} TL
      </li>
    </ul>

    {# Yükleme bitti, hata yok ama ürün de yoksa #}
     <p v-else>Henüz görüntülenecek ürün bulunamadı.</p>

  </div>
</template>

<script> {# SFC script kısmı #}
// Yukarıdaki Fetch veya Axios kullanan component export default objesi buraya gelecek
// import axios from 'axios'; // Eğer axios kullanıyorsanız
// export default { data() {...}, mounted() {...}, methods: {...} };
</script>

<style scoped> {# SFC style kısmı #}
.error-message { color: red; }
/* Diğer stiller */
</style>