[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-basit-fetch-api-kullanim-rehberi-javascript-ile-veri-alma-ve-http-istekleri":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},4545,"Basit Fetch API Kullanım Rehberi: JavaScript ile Veri Alma ve HTTP İstekleri","Bu rehberde, JavaScript Başlangıç seviyesinde Fetch API kullanarak nasıl veri alınacağını ve HTTP isteklerinin nasıl yapılacağını basit örneklerle öğreneceksiniz.","\u003Ch1>Basit Fetch API Kullanım Rehberi\u003C/h1>\u003Cp>Günümüzde web uygulamalarında dış kaynaklardan veri almak ve bu verileri dinamik olarak göstermek oldukça yaygın bir ihtiyaçtır. \u003Cstrong>JavaScript Başlangıç\u003C/strong> seviyesinde öğrenenler için, \u003Cstrong>Fetch API\u003C/strong> bu işlemi kolay ve etkili bir şekilde yapmanızı sağlar. Bu rehberde, \u003Cstrong>Fetch API\u003C/strong> kullanarak \u003Cstrong>HTTP İstekleri\u003C/strong> nasıl yapılır, veriler nasıl alınır ve basit \u003Cstrong>Kod Snippet\u003C/strong> örnekleriyle adım adım anlatacağız.\u003C/p>\u003Ch2>Fetch API Nedir?\u003C/h2>\u003Cp>\u003Cstrong>Fetch API\u003C/strong>, modern tarayıcılarda bulunan ve web üzerinde HTTP istekleri yapmayı sağlayan bir JavaScript arayüzüdür. XMLHttpRequest'e göre daha sade ve okunabilir bir sözdizimi sunar. Özellikle RESTful servislerden JSON, XML veya diğer formatlarda veri çekmek için idealdir.\u003C/p>\u003Ch2>Fetch API'nin Temel Kullanımı\u003C/h2>\u003Cp>Fetch API, \u003Ccode>fetch()\u003C/code> fonksiyonu ile kullanılır. Bu fonksiyon, bir URL alır ve bu URL'ye HTTP isteği gönderir. Dönen sonuç ise bir Promise olarak geri döner. Örnek basit bir GET isteği şu şekildedir:\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, gelen cevap JSON formatına dönüştürülüyor ve sonuç konsola yazdırılıyor.\u003C/p>\u003Ch2>Adım Adım Fetch API ile Veri Alma\u003C/h2>\u003Col>\u003Cli>\u003Cstrong>fetch()\u003C/strong> fonksiyonu ile istek gönderilir.\u003C/li>\u003Cli>İstek başarılı ise \u003Ccode>response\u003C/code> nesnesi alınır.\u003C/li>\u003Cli>\u003Ccode>response.json()\u003C/code> metodu ile veri JSON formatına çevrilir.\u003C/li>\u003Cli>Veri işlenir ve kullanıcıya gösterilir.\u003C/li>\u003Cli>Hata durumları \u003Ccode>catch\u003C/code> bloğunda yakalanır.\u003C/li>\u003C/ol>\u003Ch2>Basit Bir Örnek: Kullanıcı Verisi Çekme\u003C/h2>\u003Cp>Aşağıdaki örnekte, bir kullanıcı bilgisi JSONPlaceholder API'den çekilip ekrana yazdırılmaktadır:\u003C/p>\u003Cpre>\u003Ccode>fetch('https://jsonplaceholder.typicode.com/users/1')\n  .then(response => {\n    if (!response.ok) {\n      throw new Error('Ağ yanıtı sorunlu');\n    }\n    return response.json();\n  })\n  .then(user => {\n    console.log('Kullanıcı Adı:', user.name);\n    console.log('Email:', user.email);\n  })\n  .catch(error => console.error('Fetch hatası:', error));\u003C/code>\u003C/pre>\u003Ch2>Fetch API ile POST İsteği Gönderme\u003C/h2>\u003Cp>Fetch sadece veri almak için değil, aynı zamanda veri göndermek için de kullanılır. POST isteği yapmak için \u003Ccode>fetch()\u003C/code> 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: 'Başlık',\n    body: 'İçerik',\n    userId: 1\n  })\n})\n.then(response => response.json())\n.then(data => console.log('Gönderilen veri:', data))\n.catch(error => console.error('POST hatası:', error));\u003C/code>\u003C/pre>\u003Ch2>Fetch API Kullanırken Dikkat Edilmesi Gerekenler\u003C/h2>\u003Cul>\u003Cli>\u003Cstrong>Promise yapısı:\u003C/strong> Fetch API async yapıya sahiptir, bu yüzden .then ve .catch blokları veya async/await kullanılmalıdır.\u003C/li>\u003Cli>\u003Cstrong>CORS Politikası:\u003C/strong> Farklı domainlerden veri çekmek için sunucunun CORS izinlerinin açık olması gerekir.\u003C/li>\u003Cli>\u003Cstrong>Hata yönetimi:\u003C/strong> HTTP hataları otomatik yakalanmaz, response.ok kontrolü yapılmalıdır.\u003C/li>\u003C/ul>\u003Ch2>Başlangıç Seviyesi Kod & Snippet Rehberi ile Daha Fazlasını Öğrenin\u003C/h2>\u003Cp>Bu rehberde \u003Cstrong>Fetch API\u003C/strong> ile \u003Cstrong>Veri Alma\u003C/strong> ve \u003Cstrong>HTTP İstekleri\u003C/strong> konusuna basit örneklerle değindik. Eğer JavaScript öğrenmeye yeni başladıysanız ve daha fazla \u003Cstrong>Kod Snippet\u003C/strong> ile pratik yapmak istiyorsanız, \u003Cstrong>Başlangıç Seviyesi Kod & Snippet Rehberi\u003C/strong> size kapsamlı ve anlaşılır içerikler sunmaktadır. Kod örnekleri ve açıklamalarla dolu rehberler sayesinde, web geliştirme yolculuğunuzda sağlam adımlar atabilirsiniz.\u003C/p>\u003Ch2>Sonuç\u003C/h2>\u003Cp>\u003Cstrong>Fetch API\u003C/strong>, modern web uygulamalarında veri alışverişi için güçlü ve kullanımı kolay bir araçtır. \u003Cstrong>JavaScript Başlangıç\u003C/strong> seviyesinde öğrenenler için anlaşılır yapısı ve basit sözdizimi ile ideal bir seçimdir. Bu rehberde öğrendiğiniz temel bilgilerle kendi projelerinizde kolayca veri çekebilir ve HTTP istekleri yapabilirsiniz. Unutmayın, pratik yapmak öğrenmenin en etkili yoludur!\u003C/p>","Basit Fetch API Kullanım Rehberi - JavaScript Başlangıç","JavaScript Başlangıç seviyesinde Fetch API ile veri alma ve HTTP istekleri yapmayı basit örneklerle öğrenin.","Fetch API, JavaScript, Veri Alma, HTTP istekleri, Kod Snippet, JavaScript Fetch, Web Geliirme","basit-fetch-api-kullanim-rehberi-javascript-ile-veri-alma-ve-http-istekleri","2025-11-28T05:30:01.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/0dc28c0f861cbe8a1e30013de1aa6a6f.jpg","/media/blog/0dc28c0f861cbe8a1e30013de1aa6a6f_thumb.jpg","/media/blog/0dc28c0f861cbe8a1e30013de1aa6a6f.webp","/media/blog/0dc28c0f861cbe8a1e30013de1aa6a6f_thumb.webp",null,{"minutes":30,"wordCount":31,"imageCount":32,"formatted":33},3,499,0,"3 dk okuma süresi","/blog/js-fetch-api-mini-ornekleri/basit-fetch-api-kullanim-rehberi-javascript-ile-veri-alma-ve-http-istekleri",[],["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/0dc28c0f861cbe8a1e30013de1aa6a6f.jpg",{"hid":64,"property":64,"content":65},"og:url","https://kodogreniyorum.com/blog/js-fetch-api-mini-ornekleri/basit-fetch-api-kullanim-rehberi-javascript-ile-veri-alma-ve-http-istekleri",{"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/basit-fetch-api-kullanim-rehberi-javascript-ile-veri-alma-ve-http-istekleri",["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]