JavaScript ile fetch istekleri nasıl yapılır?

Web teknolojileri arasında, JavaScript ile gerçekleştirilen fetch istekleri, profesyoneller ve geliştiriciler tarafından özellikle önemsenen bir konsepttir. Bu istekler, genel olarak “request” olarak da anılır ve web uygulamalarının dinamik ve interaktif özellikler kazanmasında kritik bir role sahiptir. Peki JavaScript ile fetch istekleri nasıl yapılır? JavaScript Fetch API nasıl kullanılır? JavaScript ile fetch istekleri yapılırken muhtemel senaryolar nelerdir?

Bu süreç, belirli bir web kaynağından veri almak veya veri göndermek amacıyla gerçekleştirilir ve modern web geliştirmenin temel yapı taşlarından birini oluşturur. Fetch API, JavaScript’in bu güçlü yeteneğini kullanıcılara sunar ve web uygulamalarının, kullanıcıların ihtiyaç ve beklentilerine hızlı ve etkin bir şekilde yanıt vermesini sağlar. Bu bağlamda, fetch istekleri, web uygulamalarının performansını ve kullanıcı deneyimini doğrudan etkileyen, dolayısıyla geliştiriciler için vazgeçilmez bir araç haline gelmiştir.

JavaScript, modern web uygulamalarının vazgeçilmez bir parçasıdır ve fetch API’si ile birlikte, veri alışverişi konusunda sınırları zorlamamıza olanak tanır. Peki, bu teknolojiyle neler yapabiliriz?

Örneğin, günümüz web dünyasında hava durumu uygulamalarından sosyal medya feed’lerine, e-ticaret sitelerinden haber portallarına kadar hemen her yerde dinamik içeriklerle karşılaşıyoruz. İşte tüm bunlar, bir yerlerden veri çekilerek ve bu verilerin kullanıcıya sunulmasıyla mümkün oluyor.

Fetch API nedir?

Fetch API, modern JavaScript’in en güçlü özelliklerinden biri olarak öne çıkıyor. Esnekliği ve kolay kullanımı sayesinde, çeşitli kaynaklardan veri çekmek için ideal bir yöntem sunuyor. Bu API, RESTful servisler, GraphQL endpoint’leri ve hatta diğer web sayfalarından veri çekme gibi geniş bir yelpazede kullanılabilir.

Ayrıca, kullanıcı kimlik doğrulama bilgileri, dosya yüklemeleri ve hatta gerçek zamanlı veri akışları gibi daha karmaşık senaryolarda da bize eşlik eder.

Kullanım Alanları

1. Sosyal Medya Uygulamaları: Sosyal medya platformları, kullanıcıların gönderilerini, yorumlarını ve beğenilerini gerçek zamanlı olarak güncelleyen dinamik uygulamalardır. Fetch API, bu verileri sunucudan çekmek ve kullanıcı arayüzünde göstermek için kullanılır.
2. Hava Durumu Uygulamaları: Hava durumu uygulamaları, çeşitli hava durumu API’lerinden güncel hava durumu verilerini çeker. Bu veriler, kullanıcının konumuna bağlı olarak dinamik olarak güncellenir ve fetch istekleri ile elde edilir.
3. E-Ticaret Siteleri: Ürün bilgileri, stok durumları ve fiyatlar gibi dinamik verilerin sürekli güncellenmesi gereken e-ticaret siteleri, veri çekmek için sık sık fetch API’sini kullanır.
4. Haber Portalları: Güncel haberler, makaleler ve köşe yazıları gibi içerikleri sunan haber siteleri, farklı kaynaklardan sürekli olarak yeni içerik çeker. Bu işlem fetch istekleri aracılığıyla gerçekleştirilir.

Bu geniş kullanım alanları göz önüne alındığında, JavaScript ile fetch API’sini kullanmanın gücünü ve esnekliğini anlamak, modern web geliştirmenin temel taşlarından biri haline gelmiştir. Şimdi, bu güçlü aracı nasıl kullanacağınıza daha yakından bakalım ve web uygulamalarınıza nasıl entegre edebileceğinizi keşfedelim.

Fetch istekleri yapılırken kullanılan yaygın senaryolar

Fetch API kullanarak yapılacak istekler, çeşitli web kaynaklarına ve API’lere yönelik olabilir. İşte bazı yaygın senaryolar ve bunlara yönelik basit fetch istekleri örnekleri:

• Öğrenmeye devam edin: fetch() global function – Web APIs | MDN (mozilla.org)
• Farklı kaynaklara müracaat edin: JavaScript fetch() Method – GeeksforGeeks

Basit Bir Web API’sine GET İsteği

Bir REST API’den veri almak için en yaygın yöntemlerden biri GET isteğidir. Örneğin, açık bir hava durumu API’sinden belirli bir konum için hava durumu bilgisi almak:

fetch('https://api.openweathermap.org/data/2.5/weather?q=Istanbul&appid=YOUR_API_KEY')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Hata:', error));

Bu örnekte, fetch() fonksiyonu bir URL’ye GET isteği yapar. İstek başarılı olduğunda, yanıt bir JSON olarak döner ve data içerisinde işlenebilir.

• WordPress Yerel Geliştirme Ortamı – Docker ile Adım Adım Rehber
• Looker Studio ile Tekil Sayfa Performans Grafiği Oluşturma
• SEO’da Anahtar Kelime Vektörleri ve Semantik Aramadaki Rolü
• Tıklama Oranı (TO) Nedir? Anahtar Kelime TO Artırma Yolları
• Googlebot Rehberi: Nedir, Nasıl Çalışır ve Sitenizi Nasıl Etkiler?

POST İsteği ile Veri Gönderme

Bir sunucuya veri göndermek için POST isteği kullanılır. Örneğin, bir kullanıcı kayıt formundan gelen bilgileri bir API’ye gönderme:

fetch('https://example.com/api/users', {
  method: 'POST', // İstek metodu
  headers: {
    'Content-Type': 'application/json', // Gönderilen verinin içeriği
  },
  body: JSON.stringify({
    name: 'John Doe',
    email: '[email protected]'
  }) // Gönderilecek veri
})
.then(response => response.json())
.then(data => console.log('Başarılı:', data))
.catch(error => console.error('Hata:', error));

Bu örnekte, fetch() fonksiyonu ikinci bir argüman alır; bu, isteğin metodunu, başlıklarını ve gövdesini tanımlar.

Başka Bir Web Sayfasından Veri Çekme

Fetch API, aynı kaynak politikalarına (same-origin policy) tabi olduğundan, CORS (Cross-Origin Resource Sharing) politikalarına izin veren diğer sitelerden veri çekmek için de kullanılabilir:

fetch('https://example.com/page')
  .then(response => response.text()) // Yanıtı düz metin olarak al
  .then(html => console.log(html))
  .catch(error => console.error('Hata:', error));

Bu örnekte, response.text() kullanılarak yanıttan elde edilen içerik düz metin olarak işlenir. Bu, genellikle web scraping gibi senaryolarda kullanılır.

GraphQL Sorguları Gönderme

Fetch API, GraphQL sorguları göndermek için de kullanılabilir. Bu, daha karmaşık veri sorgulama ve manipülasyon işlemleri için uygundur:

fetch('https://your-graphql-endpoint.com/graphql', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_ACCESS_TOKEN'
  },
  body: JSON.stringify({
    query: `
      query {
        user(id: "1") {
          name
          email
          posts {
            title
          }
        }
      }
    `
  })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Hata:', error));

Bu örnekte, GraphQL sorgusu body içerisinde JSON olarak gönderilir ve sunucu tarafından işlenir.

Bu örnekler, JavaScript ile fetch API kullanımının çeşitliliğini ve gücünü göstermektedir. Fetch ile, web uygulamalarınızı zenginleştirecek dinamik ve etkileşimli özellikler ekleyebilirsiniz.