{"id":417,"date":"2024-02-21T19:45:38","date_gmt":"2024-02-21T16:45:38","guid":{"rendered":"https:\/\/mudosdigital.com\/tr\/?p=417"},"modified":"2024-02-21T19:46:32","modified_gmt":"2024-02-21T16:46:32","slug":"javascript-ile-fetch-istekleri-nasil-yapilir","status":"publish","type":"post","link":"https:\/\/mudosdigital.com\/tr\/javascript-ile-fetch-istekleri-nasil-yapilir\/","title":{"rendered":"JavaScript ile fetch istekleri nas\u0131l yap\u0131l\u0131r?"},"content":{"rendered":"\n<p>Web teknolojileri aras\u0131nda, JavaScript ile ger\u00e7ekle\u015ftirilen fetch istekleri, profesyoneller ve geli\u015ftiriciler taraf\u0131ndan \u00f6zellikle \u00f6nemsenen bir konsepttir. Bu istekler, genel olarak &#8220;request&#8221; olarak da an\u0131l\u0131r ve web uygulamalar\u0131n\u0131n dinamik ve interaktif \u00f6zellikler kazanmas\u0131nda kritik bir role sahiptir. Peki JavaScript ile fetch istekleri nas\u0131l yap\u0131l\u0131r? JavaScript Fetch API nas\u0131l kullan\u0131l\u0131r? JavaScript ile fetch istekleri yap\u0131l\u0131rken muhtemel senaryolar nelerdir?<\/p>\n\n\n\n<p>Bu s\u00fcre\u00e7, belirli bir web kayna\u011f\u0131ndan veri almak veya veri g\u00f6ndermek amac\u0131yla ger\u00e7ekle\u015ftirilir ve modern web geli\u015ftirmenin temel yap\u0131 ta\u015flar\u0131ndan birini olu\u015fturur. Fetch API, JavaScript&#8217;in bu g\u00fc\u00e7l\u00fc yetene\u011fini kullan\u0131c\u0131lara sunar ve web uygulamalar\u0131n\u0131n, kullan\u0131c\u0131lar\u0131n ihtiya\u00e7 ve beklentilerine h\u0131zl\u0131 ve etkin bir \u015fekilde yan\u0131t vermesini sa\u011flar. Bu ba\u011flamda, fetch istekleri, web uygulamalar\u0131n\u0131n performans\u0131n\u0131 ve kullan\u0131c\u0131 deneyimini do\u011frudan etkileyen, dolay\u0131s\u0131yla geli\u015ftiriciler i\u00e7in vazge\u00e7ilmez bir ara\u00e7 haline gelmi\u015ftir.<\/p>\n\n\n\n<p>JavaScript, modern web uygulamalar\u0131n\u0131n vazge\u00e7ilmez bir par\u00e7as\u0131d\u0131r ve fetch API&#8217;si ile birlikte, veri al\u0131\u015fveri\u015fi konusunda s\u0131n\u0131rlar\u0131 zorlamam\u0131za olanak tan\u0131r. Peki, bu teknolojiyle neler yapabiliriz?<\/p>\n\n\n\n<p>\u00d6rne\u011fin, g\u00fcn\u00fcm\u00fcz web d\u00fcnyas\u0131nda hava durumu uygulamalar\u0131ndan sosyal medya feed&#8217;lerine, e-ticaret sitelerinden haber portallar\u0131na kadar hemen her yerde dinamik i\u00e7eriklerle kar\u015f\u0131la\u015f\u0131yoruz. \u0130\u015fte t\u00fcm bunlar, bir yerlerden veri \u00e7ekilerek ve bu verilerin kullan\u0131c\u0131ya sunulmas\u0131yla m\u00fcmk\u00fcn oluyor.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Fetch API nedir?<\/h2>\n\n\n\n<p>Fetch API, modern JavaScript&#8217;in en g\u00fc\u00e7l\u00fc \u00f6zelliklerinden biri olarak \u00f6ne \u00e7\u0131k\u0131yor. Esnekli\u011fi ve kolay kullan\u0131m\u0131 sayesinde, \u00e7e\u015fitli kaynaklardan veri \u00e7ekmek i\u00e7in ideal bir y\u00f6ntem sunuyor. Bu API, RESTful servisler, GraphQL endpoint&#8217;leri ve hatta di\u011fer web sayfalar\u0131ndan veri \u00e7ekme gibi geni\u015f bir yelpazede kullan\u0131labilir.<\/p>\n\n\n\n<p>Ayr\u0131ca, kullan\u0131c\u0131 kimlik do\u011frulama bilgileri, dosya y\u00fcklemeleri ve hatta ger\u00e7ek zamanl\u0131 veri ak\u0131\u015flar\u0131 gibi daha karma\u015f\u0131k senaryolarda da bize e\u015flik eder.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Kullan\u0131m Alanlar\u0131<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Sosyal Medya Uygulamalar\u0131:<\/strong> Sosyal medya platformlar\u0131, kullan\u0131c\u0131lar\u0131n g\u00f6nderilerini, yorumlar\u0131n\u0131 ve be\u011fenilerini ger\u00e7ek zamanl\u0131 olarak g\u00fcncelleyen dinamik uygulamalard\u0131r. Fetch API, bu verileri sunucudan \u00e7ekmek ve kullan\u0131c\u0131 aray\u00fcz\u00fcnde g\u00f6stermek i\u00e7in kullan\u0131l\u0131r.<\/li>\n\n\n\n<li><strong>Hava Durumu Uygulamalar\u0131:<\/strong> Hava durumu uygulamalar\u0131, \u00e7e\u015fitli hava durumu API&#8217;lerinden g\u00fcncel hava durumu verilerini \u00e7eker. Bu veriler, kullan\u0131c\u0131n\u0131n konumuna ba\u011fl\u0131 olarak dinamik olarak g\u00fcncellenir ve fetch istekleri ile elde edilir.<\/li>\n\n\n\n<li><strong>E-Ticaret Siteleri:<\/strong> \u00dcr\u00fcn bilgileri, stok durumlar\u0131 ve fiyatlar gibi dinamik verilerin s\u00fcrekli g\u00fcncellenmesi gereken e-ticaret siteleri, veri \u00e7ekmek i\u00e7in s\u0131k s\u0131k fetch API&#8217;sini kullan\u0131r.<\/li>\n\n\n\n<li><strong>Haber Portallar\u0131:<\/strong> G\u00fcncel haberler, makaleler ve k\u00f6\u015fe yaz\u0131lar\u0131 gibi i\u00e7erikleri sunan haber siteleri, farkl\u0131 kaynaklardan s\u00fcrekli olarak yeni i\u00e7erik \u00e7eker. Bu i\u015flem fetch istekleri arac\u0131l\u0131\u011f\u0131yla ger\u00e7ekle\u015ftirilir.<\/li>\n<\/ol>\n\n\n\n<p>Bu geni\u015f kullan\u0131m alanlar\u0131 g\u00f6z \u00f6n\u00fcne al\u0131nd\u0131\u011f\u0131nda, JavaScript ile fetch API&#8217;sini kullanman\u0131n g\u00fcc\u00fcn\u00fc ve esnekli\u011fini anlamak, modern web geli\u015ftirmenin temel ta\u015flar\u0131ndan biri haline gelmi\u015ftir. \u015eimdi, bu g\u00fc\u00e7l\u00fc arac\u0131 nas\u0131l kullanaca\u011f\u0131n\u0131za daha yak\u0131ndan bakal\u0131m ve web uygulamalar\u0131n\u0131za nas\u0131l entegre edebilece\u011finizi ke\u015ffedelim.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Fetch istekleri yap\u0131l\u0131rken kullan\u0131lan yayg\u0131n senaryolar<\/h2>\n\n\n\n<p>Fetch API kullanarak yap\u0131lacak istekler, \u00e7e\u015fitli web kaynaklar\u0131na ve API&#8217;lere y\u00f6nelik olabilir. \u0130\u015fte baz\u0131 yayg\u0131n senaryolar ve bunlara y\u00f6nelik basit fetch istekleri \u00f6rnekleri:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u00d6\u011frenmeye devam edin<\/strong>: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/fetch\">fetch() global function &#8211; Web APIs | MDN (mozilla.org)<\/a><\/li>\n\n\n\n<li><strong>Farkl\u0131 kaynaklara m\u00fcracaat edin<\/strong>: <a href=\"https:\/\/www.geeksforgeeks.org\/javascript-fetch-method\/\">JavaScript fetch() Method &#8211; GeeksforGeeks<\/a><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Basit Bir Web API&#8217;sine GET \u0130ste\u011fi<\/h3>\n\n\n\n<p>Bir REST API&#8217;den veri almak i\u00e7in en yayg\u0131n y\u00f6ntemlerden biri GET iste\u011fidir. \u00d6rne\u011fin, a\u00e7\u0131k bir hava durumu API&#8217;sinden belirli bir konum i\u00e7in hava durumu bilgisi almak:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>fetch('https:\/\/api.openweathermap.org\/data\/2.5\/weather?q=Istanbul&amp;appid=YOUR_API_KEY')\n  .then(response =&gt; response.json())\n  .then(data =&gt; console.log(data))\n  .catch(error =&gt; console.error('Hata:', error));<\/code><\/pre>\n\n\n\n<p>Bu \u00f6rnekte, <code>fetch()<\/code> fonksiyonu bir URL&#8217;ye GET iste\u011fi yapar. \u0130stek ba\u015far\u0131l\u0131 oldu\u011funda, yan\u0131t bir JSON olarak d\u00f6ner ve <code>data<\/code> i\u00e7erisinde i\u015flenebilir.<\/p>\n\n\n<ul class=\"wp-block-latest-posts__list wp-block-latest-posts\"><li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/mudosdigital.com\/tr\/wordpress-yerel-gelistirme-ortami-docker-ile-adim-adim-rehber\/\">WordPress Yerel Geli\u015ftirme Ortam\u0131 \u2013 Docker ile Ad\u0131m Ad\u0131m Rehber<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/mudosdigital.com\/tr\/looker-studio-ile-tekil-sayfa-performans-grafigi-olusturma\/\">Looker Studio ile Tekil Sayfa Performans Grafi\u011fi Olu\u015fturma<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/mudosdigital.com\/tr\/seoda-vektor-nedir-semantik-arama-ve-siralamadaki-rolu\/\">SEO\u2019da Anahtar Kelime Vekt\u00f6rleri ve Semantik Aramadaki Rol\u00fc<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/mudosdigital.com\/tr\/tiklama-orani-to-nedir-anahtar-kelime-to-artirma-yollari\/\">T\u0131klama Oran\u0131 (TO) Nedir? Anahtar Kelime TO Art\u0131rma Yollar\u0131<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/mudosdigital.com\/tr\/googlebot-rehberi-nedir-nasil-calisir-ve-sitenizi-nasil-etkiler\/\">Googlebot Rehberi: Nedir, Nas\u0131l \u00c7al\u0131\u015f\u0131r ve Sitenizi Nas\u0131l Etkiler?<\/a><\/li>\n<\/ul>\n\n\n<h3 class=\"wp-block-heading\">POST \u0130ste\u011fi ile Veri G\u00f6nderme<\/h3>\n\n\n\n<p>Bir sunucuya veri g\u00f6ndermek i\u00e7in POST iste\u011fi kullan\u0131l\u0131r. \u00d6rne\u011fin, bir kullan\u0131c\u0131 kay\u0131t formundan gelen bilgileri bir API&#8217;ye g\u00f6nderme:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>fetch('https:\/\/example.com\/api\/users', {\n  method: 'POST', \/\/ \u0130stek metodu\n  headers: {\n    'Content-Type': 'application\/json', \/\/ G\u00f6nderilen verinin i\u00e7eri\u011fi\n  },\n  body: JSON.stringify({\n    name: 'John Doe',\n    email: 'john.doe@example.com'\n  }) \/\/ G\u00f6nderilecek veri\n})\n.then(response =&gt; response.json())\n.then(data =&gt; console.log('Ba\u015far\u0131l\u0131:', data))\n.catch(error =&gt; console.error('Hata:', error));<\/code><\/pre>\n\n\n\n<p>Bu \u00f6rnekte, <code>fetch()<\/code> fonksiyonu ikinci bir arg\u00fcman al\u0131r; bu, iste\u011fin metodunu, ba\u015fl\u0131klar\u0131n\u0131 ve g\u00f6vdesini tan\u0131mlar.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Ba\u015fka Bir Web Sayfas\u0131ndan Veri \u00c7ekme<\/h3>\n\n\n\n<p>Fetch API, ayn\u0131 kaynak politikalar\u0131na (same-origin policy) tabi oldu\u011fundan, CORS (Cross-Origin Resource Sharing) politikalar\u0131na izin veren di\u011fer sitelerden veri \u00e7ekmek i\u00e7in de kullan\u0131labilir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>fetch('https:\/\/example.com\/page')\n  .then(response =&gt; response.text()) \/\/ Yan\u0131t\u0131 d\u00fcz metin olarak al\n  .then(html =&gt; console.log(html))\n  .catch(error =&gt; console.error('Hata:', error));<\/code><\/pre>\n\n\n\n<p>Bu \u00f6rnekte, <code>response.text()<\/code> kullan\u0131larak yan\u0131ttan elde edilen i\u00e7erik d\u00fcz metin olarak i\u015flenir. Bu, genellikle web scraping gibi senaryolarda kullan\u0131l\u0131r.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">GraphQL Sorgular\u0131 G\u00f6nderme<\/h3>\n\n\n\n<p>Fetch API, GraphQL sorgular\u0131 g\u00f6ndermek i\u00e7in de kullan\u0131labilir. Bu, daha karma\u015f\u0131k veri sorgulama ve manip\u00fclasyon i\u015flemleri i\u00e7in uygundur:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>fetch('https:\/\/your-graphql-endpoint.com\/graphql', {\n  method: 'POST',\n  headers: {\n    'Content-Type': 'application\/json',\n    'Authorization': 'Bearer YOUR_ACCESS_TOKEN'\n  },\n  body: JSON.stringify({\n    query: `\n      query {\n        user(id: \"1\") {\n          name\n          email\n          posts {\n            title\n          }\n        }\n      }\n    `\n  })\n})\n.then(response =&gt; response.json())\n.then(data =&gt; console.log(data))\n.catch(error =&gt; console.error('Hata:', error));<\/code><\/pre>\n\n\n\n<p>Bu \u00f6rnekte, GraphQL sorgusu <code>body<\/code> i\u00e7erisinde JSON olarak g\u00f6nderilir ve sunucu taraf\u0131ndan i\u015flenir.<\/p>\n\n\n\n<p>Bu \u00f6rnekler, JavaScript ile fetch API kullan\u0131m\u0131n\u0131n \u00e7e\u015fitlili\u011fini ve g\u00fcc\u00fcn\u00fc g\u00f6stermektedir. Fetch ile, web uygulamalar\u0131n\u0131z\u0131 zenginle\u015ftirecek dinamik ve etkile\u015fimli \u00f6zellikler ekleyebilirsiniz.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Web teknolojileri aras\u0131nda, JavaScript ile ger\u00e7ekle\u015ftirilen fetch istekleri, profesyoneller ve geli\u015ftiriciler taraf\u0131ndan \u00f6zellikle \u00f6nemsenen bir konsepttir. Bu istekler, genel olarak &#8220;request&#8221; olarak da an\u0131l\u0131r ve web uygulamalar\u0131n\u0131n dinamik ve interaktif \u00f6zellikler kazanmas\u0131nda kritik bir role sahiptir. Peki JavaScript ile fetch istekleri nas\u0131l yap\u0131l\u0131r? JavaScript Fetch API nas\u0131l kullan\u0131l\u0131r? JavaScript ile fetch istekleri yap\u0131l\u0131rken muhtemel senaryolar [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22],"tags":[32,31],"class_list":["post-417","post","type-post","status-publish","format-standard","hentry","category-blog","tag-fetch-api","tag-javascript"],"_links":{"self":[{"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/posts\/417","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/comments?post=417"}],"version-history":[{"count":2,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/posts\/417\/revisions"}],"predecessor-version":[{"id":419,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/posts\/417\/revisions\/419"}],"wp:attachment":[{"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/media?parent=417"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/categories?post=417"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/tags?post=417"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}