[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-js-fetch-api-ile-veri-cekme-teknikleri-baslangic-seviyesi-ornekler":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},4544,"JS Fetch API İle Veri Çekme Teknikleri: Başlangıç Seviyesi Örnekler","JavaScript'in Fetch API'si ile asenkron veri çekme tekniklerini öğrenin. Basit örneklerle Fetch API kullanımı ve veri işleme yöntemleri hakkında detaylı bilgiler.","\u003Ch1>JS Fetch API İle Veri Çekme Teknikleri\u003C/h1>\u003Cp>\u003Cstrong>JavaScript\u003C/strong> dünyasında veri çekme işlemleri, modern web uygulamalarının temel taşlarından biridir. Özellikle \u003Cstrong>Fetch API\u003C/strong>, asenkron işlemler yaparak sunucudan veri almak için kullanılan güçlü ve esnek bir yöntemdir. Bu yazıda, \u003Cstrong>Fetch API\u003C/strong> ile \u003Cstrong>veri çekme\u003C/strong> tekniklerini, basit ve anlaşılır \u003Cstrong>örnekler\u003C/strong> üzerinden inceleyeceğiz.\u003C/p>\u003Ch2>Fetch API Nedir?\u003C/h2>\u003Cp>\u003Cstrong>Fetch API\u003C/strong>, web tarayıcılarında yerleşik olarak bulunan ve HTTP istekleri yapmayı kolaylaştıran modern bir JavaScript arayüzüdür. Önceleri XMLHttpRequest ile yapılan veri çekme işlemleri, Fetch API sayesinde daha okunabilir ve yönetilebilir hale gelmiştir. Fetch API, Promise tabanlı yapısı sayesinde \u003Cstrong>asenkron işlemler\u003C/strong> gerçekleştirmeyi kolaylaştırır.\u003C/p>\u003Ch2>Fetch API Temel Kullanımı\u003C/h2>\u003Cp>Fetch API kullanarak veri çekmek oldukça basittir. Temel olarak, fetch fonksiyonuna URL adresi verilir ve bu fonksiyon bir Promise döner. Bu Promise, sunucudan gelen cevabı içerir. Örnek olarak, basit bir GET isteği yapalım:\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>Yukarıdaki örnekte, \u003Cstrong>fetch\u003C/strong> fonksiyonu belirtilen URL'ye istek gönderir. Gelen yanıt \u003Cstrong>response.json()\u003C/strong> ile JSON formatına çevrilir ve sonuç \u003Cstrong>data\u003C/strong> değişkeninde tutulur. Böylece veriyi kolayca kullanabiliriz.\u003C/p>\u003Ch2>Asenkron/Await Kullanımı ile Fetch API\u003C/h2>\u003Cp>Fetch API, Promise tabanlı olduğu için \u003Cstrong>async/await\u003C/strong> yapısı ile daha okunabilir hale getirilebilir. Aşağıda aynı işlemi async/await ile gerçekleştiren bir örnek bulunmaktadır:\u003C/p>\u003Cpre>\u003Ccode>async function veriCek() {\n  try {\n    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');\n    const data = await response.json();\n    console.log(data);\n  } catch (error) {\n    console.error('Hata:', error);\n  }\n}\n\nveriCek();\u003C/code>\u003C/pre>\u003Cp>Bu yöntem, kodun daha senkron bir şekilde yazılmasını sağlar ve hata yönetimini kolaylaştırır.\u003C/p>\u003Ch2>Fetch API ile POST İsteği Gönderme\u003C/h2>\u003Cp>Fetch API sadece veri çekmek için değil, aynı zamanda sunucuya veri göndermek için de kullanılabilir. POST isteği yapmak için fetch fonksiyonuna ikinci parametre olarak bir nesne verilir. Örnek:\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 sunucuya gönderilir ve sunucudan gelen yanıt işlenir.\u003C/p>\u003Ch2>Fetch API ile Hata Yönetimi\u003C/h2>\u003Cp>Fetch API kullanırken, ağ hataları veya sunucu hataları ile karşılaşabilirsiniz. Hata yönetimi için \u003Cstrong>catch\u003C/strong> bloğu kullanılır. Ancak, fetch sadece ağ hatalarında catch bloğunu tetikler. Sunucu tarafı hataları için response nesnesinin durum kodu kontrol edilmelidir:\u003C/p>\u003Cpre>\u003Ccode>fetch('https://jsonplaceholder.typicode.com/posts/1000')\n  .then(response => {\n    if (!response.ok) {\n      throw new Error('Sunucu hatası: ' + 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 şekilde, sunucudan gelen hatalar da yakalanabilir ve uygun şekilde işlenebilir.\u003C/p>\u003Ch2>Başlangıç Seviyesi Kod & Snippet Rehberi ile Daha Fazlasını Öğrenin\u003C/h2>\u003Cp>\u003Cstrong>JavaScript\u003C/strong> ve \u003Cstrong>Fetch API\u003C/strong> konularında başlangıç seviyesindeyseniz, \u003Cstrong>Başlangıç Seviyesi Kod & Snippet Rehberi\u003C/strong> size birçok faydalı kod snippetleri ve rehberler sunar. Özellikle \u003Cstrong>asenkron işlemler\u003C/strong> ve veri çekme teknikleri hakkında detaylı örneklerle öğrenmenizi kolaylaştırır.\u003C/p>\u003Ch2>Sonuç\u003C/h2>\u003Cp>\u003Cstrong>Fetch API\u003C/strong>, modern web geliştirme süreçlerinde veri çekme ve gönderme işlemlerini kolaylaştıran, esnek ve güçlü bir araçtır. \u003Cstrong>JavaScript\u003C/strong> kullanarak asenkron veri çekme işlemlerini yönetmek için ideal bir yöntemdir. Bu yazıda paylaşılan basit \u003Cstrong>örnekler\u003C/strong> ile Fetch API'nin temel kullanımını öğrenebilir, kendi projelerinizde rahatlıkla uygulayabilirsiniz.\u003C/p>\u003Cp>Unutmayın, pratik yapmak ve farklı senaryoları denemek, Fetch API konusunda uzmanlaşmanın en etkili yoludur.\u003C/p>","JS Fetch API İle Veri Çekme Teknikleri - Basit Örnekler","JavaScript Fetch API kullanarak asenkron veri çekme tekniklerini basit örneklerle öğrenin. Fetch API ile veri çekme ve gönderme yöntemleri burada.","JavaScript, Fetch API, Veri Cekme, Asenkron Islemler, Ornekler","js-fetch-api-ile-veri-cekme-teknikleri-baslangic-seviyesi-ornekler","2025-11-27T05:04:24.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/696e90ec9de0a565240684d4ad0d88d2.jpg","/media/blog/696e90ec9de0a565240684d4ad0d88d2_thumb.jpg","/media/blog/696e90ec9de0a565240684d4ad0d88d2.webp","/media/blog/696e90ec9de0a565240684d4ad0d88d2_thumb.webp",null,{"minutes":30,"wordCount":31,"imageCount":32,"formatted":33},3,518,0,"3 dk okuma süresi","/blog/js-fetch-api-mini-ornekleri/js-fetch-api-ile-veri-cekme-teknikleri-baslangic-seviyesi-ornekler",[],["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/696e90ec9de0a565240684d4ad0d88d2.jpg",{"hid":64,"property":64,"content":65},"og:url","https://kodogreniyorum.com/blog/js-fetch-api-mini-ornekleri/js-fetch-api-ile-veri-cekme-teknikleri-baslangic-seviyesi-ornekler",{"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/js-fetch-api-ile-veri-cekme-teknikleri-baslangic-seviyesi-ornekler",["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]