[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-baslangic-icin-fetch-api-mini-ornekleri-ile-javascript-dersleri":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},12171,"Başlangıç İçin Fetch API Mini Örnekleri ile JavaScript Dersleri","Bu yazıda, \u003Cstrong>Fetch API\u003C/strong> kullanarak \u003Cstrong>JavaScript dersleri\u003C/strong> kapsamında \u003Cstrong>basit örnekler\u003C/strong> ile \u003Cstrong>API kullanımı\u003C/strong> ve \u003Cstrong>Kod snippet\u003C/strong> örnekleri sunulmaktadır. Başlangıç seviyesindeki geliştiriciler için ideal bir rehber.","\u003Ch1>Başlangıç İçin Fetch API Mini Örnekleri\u003C/h1>\u003Cp>\u003Cstrong>Fetch API\u003C/strong>, modern web geliştirme dünyasında veri çekme işlemlerini kolaylaştıran güçlü bir JavaScript arayüzüdür. Özellikle \u003Cstrong>JavaScript dersleri\u003C/strong> alanında, \u003Cstrong>API kullanımı\u003C/strong> öğrenmek isteyenler için \u003Cstrong>basit örnekler\u003C/strong> sunarak kavramları pekiştirmek oldukça faydalıdır. Bu yazıda, \u003Cstrong>Kod snippet\u003C/strong> şeklinde hazırlanmış mini örneklerle Fetch API'nin temel kullanımını öğreneceksiniz.\u003C/p>\u003Ch2>Fetch API Nedir?\u003C/h2>\u003Cp>Fetch API, web tarayıcılarında HTTP istekleri yapmanızı sağlayan modern bir JavaScript API'sidir. XMLHttpRequest'in yerine geçerek daha okunabilir ve kullanımı kolay bir yapı sunar. Veri çekme, gönderme ve sunucudan gelen yanıtları işleme gibi işlemleri asenkron olarak yapmanızı sağlar.\u003C/p>\u003Ch2>Basit Fetch API Örneği\u003C/h2>\u003Cp>Aşağıdaki \u003Cstrong>Kod snippet\u003C/strong> örneği, bir API'den JSON formatında veri çekmeyi ve konsola yazdırmayı 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>Bu örnekte, \u003Cstrong>fetch\u003C/strong> fonksiyonu belirtilen URL'ye bir GET isteği gönderir. Gelen yanıt \u003Cstrong>response.json()\u003C/strong> ile JSON formatına dönüştürülür ve ardından veri konsola yazdırılır. Hata durumunda ise catch bloğu devreye girer.\u003C/p>\u003Ch2>Fetch API ile Veri 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. Aşağıdaki örnek, POST yöntemiyle JSON verisi göndermeyi gösterir:\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>Burada, \u003Cstrong>method\u003C/strong> olarak 'POST' seçilmiştir ve \u003Cstrong>headers\u003C/strong> ile gönderilen verinin JSON olduğu belirtilmiştir. \u003Cstrong>body\u003C/strong> kısmında ise gönderilecek veri JSON.stringify ile stringe çevrilmiştir.\u003C/p>\u003Ch2>Async/Await ile Fetch Kullanımı\u003C/h2>\u003Cp>Modern JavaScript'te asenkron işlemleri daha okunabilir hale getirmek için \u003Cstrong>async/await\u003C/strong> yapısı kullanılır. Aşağıda aynı GET isteğinin async/await ile nasıl yapılacağı gösterilmiştir:\u003C/p>\u003Cpre>\u003Ccode>async function fetchData() {\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\nfetchData();\u003C/code>\u003C/pre>\u003Cp>Bu yöntem, then/catch zincirine göre daha temiz ve anlaşılırdır. \u003Cstrong>fetchData\u003C/strong> fonksiyonu async olarak tanımlanır ve fetch ile gelen yanıt await ile beklenir.\u003C/p>\u003Ch2>Başlangıç Seviyesi İçin İpuçları\u003C/h2>\u003Cul>\u003Cli>\u003Cstrong>Fetch API\u003C/strong> kullanırken her zaman yanıtın başarılı olup olmadığını kontrol edin. Örneğin, \u003Ccode>response.ok\u003C/code> ile durum kodunu kontrol etmek faydalıdır.\u003C/li>\u003Cli>Hataları yakalamak için \u003Ccode>catch\u003C/code> bloğunu veya try/catch yapısını kullanın.\u003C/li>\u003Cli>Veri formatına dikkat edin; çoğunlukla JSON kullanılır ancak farklı formatlar da olabilir.\u003C/li>\u003Cli>API dökümantasyonunu iyi inceleyin, istek yaparken gerekli parametreleri doğru gönderin.\u003C/li>\u003C/ul>\u003Ch2>Örnek: Basit JSON Veri Çekme\u003C/h2>\u003Cp>Aşağıdaki örnek, basit bir JSON veri çekme işlemini göstermektedir:\u003C/p>\u003Cpre>\u003Ccode>fetch('https://api.example.com/data')\n  .then(response => {\n    if (!response.ok) {\n      throw new Error('Ağ yanıtı başarısız oldu');\n    }\n    return response.json();\n  })\n  .then(data => {\n    console.log('Veri:', data);\n  })\n  .catch(error => {\n    console.error('Fetch hatası:', error);\n  });\u003C/code>\u003C/pre>\u003Ch2>Sonuç\u003C/h2>\u003Cp>\u003Cstrong>Fetch API\u003C/strong>, modern web uygulamalarında veri alışverişini kolaylaştıran, öğrenmesi ve kullanması keyifli bir araçtır. \u003Cstrong>JavaScript dersleri\u003C/strong> kapsamında \u003Cstrong>API kullanımı\u003C/strong> öğrenmek isteyenler için bu \u003Cstrong>basit örnekler\u003C/strong> ve \u003Cstrong>Kod snippet\u003C/strong>ler başlangıç seviyesinde sağlam bir temel oluşturur. Daha karmaşık uygulamalarda da bu temeller üzerine inşa ederek güçlü ve etkili web uygulamaları geliştirebilirsiniz.\u003C/p>\u003Cp>Başlangıç seviyesinde kod öğrenmek isteyenler için \u003Cstrong>Başlangıç Seviyesi Kod & Snippet Rehberi\u003C/strong> kaynaklarına göz atmak, pratik yapmak ve farklı örneklerle kendinizi geliştirmek açısından oldukça faydalı olacaktır.\u003C/p>","Adım Adım Yazılım Öğrenme Rehberi – Kodlama Yapısı ve Basit Kod Örnekleri","Fetch API ile basit örnekler ve kod snippetleriyle JavaScript dersleri kapsamında API kullanımı öğrenin. Başlangıç seviyesine uygun mini örnekler burada.","Fetch API, JavaScript dersleri, API kullanimi, Kod snippet, Basit ornekler","baslangic-icin-fetch-api-mini-ornekleri-ile-javascript-dersleri","2026-01-27T11:48:39.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/e8957b1fe9fa80a1042484638e4abb4f.jpg","/media/blog/e8957b1fe9fa80a1042484638e4abb4f_thumb.jpg","/media/blog/e8957b1fe9fa80a1042484638e4abb4f.webp","/media/blog/e8957b1fe9fa80a1042484638e4abb4f_thumb.webp",null,{"minutes":30,"wordCount":31,"imageCount":32,"formatted":33},3,514,0,"3 dk okuma süresi","/blog/js-fetch-api-mini-ornekleri/baslangic-icin-fetch-api-mini-ornekleri-ile-javascript-dersleri",[],["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/e8957b1fe9fa80a1042484638e4abb4f.jpg",{"hid":64,"property":64,"content":65},"og:url","https://kodogreniyorum.com/blog/js-fetch-api-mini-ornekleri/baslangic-icin-fetch-api-mini-ornekleri-ile-javascript-dersleri",{"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/baslangic-icin-fetch-api-mini-ornekleri-ile-javascript-dersleri",["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]