[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-fetch-api-ile-kolay-veri-cekme-javascriptte-basit-veri-cekme-ornekleri":3},{"dataItem":4,"heading":36,"metaData":38,"schema":81},["Reactive",5],{"id":6,"title":7,"summary":8,"content":9,"seo_title":10,"seo_description":11,"seo_keywords":12,"slug":13,"createdAt":14,"updatedAt":14,"blog_categories":15,"authors":19,"image":24,"thumb":25,"image_webp":26,"thumb_webp":27,"rating":28,"heading_title":7,"heading_sub_title":17,"readingTime":29,"url":34,"comments":35,"meta_cover":24},23019,"Fetch API ile Kolay Veri Çekme: JavaScript'te Basit Veri Çekme Örnekleri","Bu yazıda, JavaScript'in Fetch API'si kullanılarak nasıl kolayca veri çekileceği anlatılmaktadır. Basit örneklerle Fetch API'nin temel kullanımı ve avantajları açıklanmaktadır.","\u003Ch1>Fetch API ile Kolay Veri Çekme\u003C/h1>\u003Cp>Günümüzde web uygulamalarında dış kaynaklardan veri çekmek, dinamik içerik oluşturmak için en önemli ihtiyaçlardan biridir. \u003Cstrong>JavaScript\u003C/strong> dünyasında bu işlemi gerçekleştirmek için çeşitli yöntemler bulunur ancak modern ve kullanımı kolay bir yöntem arıyorsanız, \u003Cstrong>Fetch API\u003C/strong> tam size göre. Bu yazımızda, \u003Cstrong>Fetch API\u003C/strong> ile basit \u003Cstrong>veri çekme\u003C/strong> işlemlerini nasıl yapabileceğinizi örneklerle anlatacağız.\u003C/p>\u003Ch2>Fetch API Nedir?\u003C/h2>\u003Cp>\u003Cstrong>Fetch API\u003C/strong>, web tarayıcılarında HTTP istekleri yapmak için kullanılan modern bir arayüzdür. Önceleri XMLHttpRequest (XHR) ile yapılan veri çekme işlemleri, Fetch API sayesinde daha okunabilir ve yönetilebilir hale gelmiştir. Promise tabanlı yapısı sayesinde asenkron işlemleri kolayca yönetmenize olanak tanır.\u003C/p>\u003Ch2>Fetch API'nin Avantajları\u003C/h2>\u003Cul>\u003Cli>\u003Cstrong>Kolay Kullanım:\u003C/strong> Basit ve anlaşılır sözdizimi ile hızlıca veri çekebilirsiniz.\u003C/li>\u003Cli>\u003Cstrong>Promise Tabanlı:\u003C/strong> Asenkron işlemleri yönetmek için callback karmaşasına gerek kalmaz.\u003C/li>\u003Cli>\u003Cstrong>Esneklik:\u003C/strong> GET, POST, PUT, DELETE gibi farklı HTTP metodlarını destekler.\u003C/li>\u003Cli>\u003Cstrong>Modern Tarayıcı Desteği:\u003C/strong> Güncel tarayıcıların çoğu tarafından desteklenir.\u003C/li>\u003C/ul>\u003Ch2>Basit Bir Fetch API Örneği\u003C/h2>\u003Cp>Örneğin, bir JSON dosyasından veri çekmek istediğinizi düşünelim. Aşağıdaki örnek, \u003Cstrong>Fetch API\u003C/strong> kullanarak nasıl veri çekebileceğinizi gösterir:\u003C/p>\u003Cpre>\u003Ccode>fetch('https://jsonplaceholder.typicode.com/posts/1')\n  .then(response => response.json())\n  .then(data => console.log(data))\n  .catch(error => console.error('Hata:', error));\u003C/code>\u003C/pre>\u003Cp>Burada, belirtilen URL'den veri çekiliyor, JSON formatına dönüştürülüyor ve konsola yazdırılıyor. Eğer bir hata oluşursa, catch bloğu ile yakalanıyor.\u003C/p>\u003Ch2>Adım Adım Fetch API Kullanımı\u003C/h2>\u003Col>\u003Cli>\u003Cstrong>fetch() Fonksiyonunu Çağırma:\u003C/strong> Veri çekmek istediğiniz URL'yi parametre olarak verirsiniz.\u003C/li>\u003Cli>\u003Cstrong>Response Nesnesini İşleme:\u003C/strong> fetch() fonksiyonu bir Promise döner. Bu Promise, HTTP cevabını içerir.\u003C/li>\u003Cli>\u003Cstrong>Veriyi JSON'a Dönüştürme:\u003C/strong> response.json() metodu da Promise döner ve veriyi JSON formatına çevirir.\u003C/li>\u003Cli>\u003Cstrong>Veriyi Kullanma:\u003C/strong> JSON verisini aldıktan sonra istediğiniz işlemi yapabilirsiniz.\u003C/li>\u003Cli>\u003Cstrong>Hata Yönetimi:\u003C/strong> catch bloğu ile ağ hataları veya diğer sorunları yakalayabilirsiniz.\u003C/li>\u003C/ol>\u003Ch2>Fetch API ile POST İsteği Gönderme\u003C/h2>\u003Cp>Fetch API sadece veri çekmek için değil, aynı zamanda veri göndermek için de kullanılır. Örneğin, bir form verisini sunucuya göndermek için POST isteği yapabilirsiniz:\u003C/p>\u003Cpre>\u003Ccode>fetch('https://jsonplaceholder.typicode.com/posts', {\n  method: 'POST',\n  headers: {\n    'Content-Type': 'application/json'\n  },\n  body: JSON.stringify({\n    title: 'foo',\n    body: 'bar',\n    userId: 1\n  })\n})\n.then(response => response.json())\n.then(data => console.log(data))\n.catch(error => console.error('Hata:', error));\u003C/code>\u003C/pre>\u003Cp>Bu örnekte, JSON formatında veri gönderiliyor ve sunucudan gelen yanıt işleniyor.\u003C/p>\u003Ch2>Fetch API ile Çalışırken Dikkat Edilmesi Gerekenler\u003C/h2>\u003Cul>\u003Cli>\u003Cstrong>CORS Politikası:\u003C/strong> Fetch API, tarayıcıların CORS (Cross-Origin Resource Sharing) politikalarına tabidir. Başka bir domain'den veri çekmek istediğinizde sunucunun CORS izinlerini doğru ayarlaması gerekir.\u003C/li>\u003Cli>\u003Cstrong>Hata Yönetimi:\u003C/strong> HTTP hataları (örneğin 404, 500) fetch() tarafından otomatik olarak hata olarak algılanmaz. Bu nedenle response.ok kontrolü yaparak hataları yönetmek önemlidir.\u003C/li>\u003Cli>\u003Cstrong>Tarayıcı Desteği:\u003C/strong> Eski tarayıcılarda Fetch API desteklenmeyebilir. Bu durumda polyfill kullanmak gerekebilir.\u003C/li>\u003C/ul>\u003Ch2>Örnek: Hata Yönetimi ile Fetch API Kullanımı\u003C/h2>\u003Cpre>\u003Ccode>fetch('https://jsonplaceholder.typicode.com/posts/1000')\n  .then(response => {\n    if (!response.ok) {\n      throw new Error('HTTP hata! Durum: ' + response.status);\n    }\n    return response.json();\n  })\n  .then(data => console.log(data))\n  .catch(error => console.error('Hata:', error));\u003C/code>\u003C/pre>\u003Cp>Bu örnekte, eğer istek başarılı değilse hata fırlatılıyor ve catch bloğunda yakalanıyor.\u003C/p>\u003Ch2>Başlangıç Seviyesi Kod & Snippet Rehberi ile Daha Fazlasını Öğrenin\u003C/h2>\u003Cp>Eğer \u003Cstrong>JavaScript\u003C/strong> ve \u003Cstrong>Fetch API\u003C/strong> gibi konularda daha fazla bilgi edinmek, farklı \u003Cstrong>veri çekme\u003C/strong> örnekleri görmek isterseniz, Başlangıç Seviyesi Kod & Snippet Rehberi'nin sunduğu rehberlere göz atabilirsiniz. Bu platform, yeni başlayanlar için sade ve anlaşılır kod snippetleri ile öğrenmeyi kolaylaştırır.\u003C/p>\u003Ch2>Sonuç\u003C/h2>\u003Cp>\u003Cstrong>Fetch API\u003C/strong>, modern \u003Cstrong>JavaScript\u003C/strong> uygulamalarında veri çekme ve gönderme işlemlerini basitleştiren güçlü bir araçtır. Promise tabanlı yapısı sayesinde asenkron işlemleri kolayca yönetebilir, temiz ve okunabilir kod yazabilirsiniz. Yukarıdaki örnekler ve açıklamalar, Fetch API'yi kullanmaya başlamanız için temel bilgileri sağlamaktadır. Uygulamalarınızda \u003Cstrong>Fetch API\u003C/strong> kullanarak dinamik ve etkileşimli web sayfaları oluşturabilirsiniz.\u003C/p>","Yazılım Öğrenme Rehberi – Yeni Başlayanlar İçin JavaScript Başlangıç Kodları","Fetch API kullanarak JavaScript ile kolay veri çekme yöntemlerini öğrenin. Basit örneklerle Fetch API'nin avantajları ve kullanımı hakkında detaylar.","Fetch API, JavaScript, veri cekme, basit veri cekme, fetch ornekleri, asenkron veri cekme","fetch-api-ile-kolay-veri-cekme-javascriptte-basit-veri-cekme-ornekleri","2026-03-22T19:15:55.000Z",{"id":16,"title":17,"slug":18},217,"JS Fetch API Mini Örnekleri","js-fetch-api-mini-ornekleri",{"id":20,"name":21,"nickname":22,"slug":23},94,"Caner Şimşek","CodeSprout","caner-simsek","/media/blog/7a9d0f676f31cb0eadec9781b127ed71.jpg","/media/blog/7a9d0f676f31cb0eadec9781b127ed71_thumb.jpg","/media/blog/7a9d0f676f31cb0eadec9781b127ed71.webp","/media/blog/7a9d0f676f31cb0eadec9781b127ed71_thumb.webp",null,{"minutes":30,"wordCount":31,"imageCount":32,"formatted":33},3,568,0,"3 dk okuma süresi","/blog/js-fetch-api-mini-ornekleri/fetch-api-ile-kolay-veri-cekme-javascriptte-basit-veri-cekme-ornekleri",[],["Reactive",37],{"title":7,"subTitle":17,"image":24},["Reactive",39],{"title":10,"meta":40,"link":75},[41,43,45,48,51,54,57,60,63,66,69,71,73],{"hid":42,"name":42,"content":11},"description",{"hid":44,"name":44,"content":12},"keywords",{"hid":46,"name":46,"content":47},"author","Başlangıç Seviyesi Kod & Snippet Rehberi",{"hid":49,"name":49,"content":50},"robots","index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1",{"hid":52,"property":52,"content":53},"og:type","website",{"hid":55,"property":55,"content":56},"og:title","Başlangıç Kod & Snippet Rehberi | KodÖğreniyorum",{"hid":58,"property":58,"content":59},"og:description","Yeni başlayanlara yönelik kısa kod örnekleri, snippet'ler ve adım adım alıştırmalar. Hızlı uygulamalarla temel programlama mantığını pekiştir.",{"hid":61,"property":61,"content":62},"og:image","https://kodogreniyorum.com/media/blog/7a9d0f676f31cb0eadec9781b127ed71.jpg",{"hid":64,"property":64,"content":65},"og:url","https://kodogreniyorum.com/blog/js-fetch-api-mini-ornekleri/fetch-api-ile-kolay-veri-cekme-javascriptte-basit-veri-cekme-ornekleri",{"hid":67,"name":67,"content":68},"twitter:card","summary_large_image",{"hid":70,"name":70,"content":56},"twitter:title",{"hid":72,"name":72,"content":59},"twitter:description",{"hid":74,"name":74,"content":62},"twitter:image",[76,78],{"rel":77,"href":65},"canonical",{"rel":79,"href":80},"amphtml","https://amp.kodogreniyorum.com/blog/js-fetch-api-mini-ornekleri/fetch-api-ile-kolay-veri-cekme-javascriptte-basit-veri-cekme-ornekleri",["Reactive",82],{"@context":83,"@graph":84},"https://schema.org",[85,98],{"@type":86,"headline":10,"image":62,"author":87,"publisher":90,"datePublished":14,"dateModified":14,"mainEntityOfPage":96,"description":11},"BlogPosting",{"@type":88,"name":21,"url":89},"Person","https://kodogreniyorum.com/yazarlar/caner-simsek",{"@type":91,"name":47,"logo":92},"Organization",{"@type":93,"url":94,"width":95,"height":95},"ImageObject","https://kodogreniyorum.com/img/icons/favicon.png",32,{"@type":97,"@id":65},"WebPage",{"@type":99,"itemListElement":100},"BreadcrumbList",[101,106,110,112],{"@type":102,"position":103,"name":104,"item":105},"ListItem",1,"Ana Sayfa","https://kodogreniyorum.com",{"@type":102,"position":107,"name":108,"item":109},2,"Blog","https://kodogreniyorum.com/blog",{"@type":102,"position":30,"name":17,"item":111},"https://kodogreniyorum.com/blog/js-fetch-api-mini-ornekleri",{"@type":102,"position":113,"name":7,"item":65},4]