Bir zamanlar API istekleri yapmak i\u00e7in XMLHttpRequest kullan\u0131l\u0131yordu. Promise i\u00e7ermiyordu ve temiz JavaScript kodu \u00fcretmiyordu. jQuery ile daha temiz jQuery.ajax() s\u00f6zdizimini kullanabilirsiniz.<\/p>\n
Art\u0131k JavaScript'in API istekleri yapmak i\u00e7in kendine \u00f6zg\u00fc yerle\u015fik bir yolu var. Bu, Promises ile sunucu istekleri yapmak i\u00e7in yeni bir standart olan Fetch API'si, ancak ek \u00f6zellikler de i\u00e7eriyor.<\/p>\n
Bu e\u011fitimde, Fetch API'yi kullanarak hem GET hem de POST istekleri olu\u015fturacaks\u0131n\u0131z.<\/p>\n
Fetch API'sini kullanman\u0131n bir yolu fetch() API URL'sini parametre olarak ge\u00e7irmektir:<\/p>\n
fetch(url)\r\n<\/code><\/pre>\n<\/div>\nfetch() metodu bir Promise d\u00f6nd\u00fcr\u00fcr. fetch() metodundan sonra Promise metodunu then() ekleyin:<\/p>\n
\nfetch(url)\r\n.then(function() {\r\n\/\/ handle the response\r\n})<\/code><\/pre>\n<\/div>\nD\u00f6nd\u00fcr\u00fclen Promise \u00e7\u00f6z\u00fcl\u00fcrse, then() metodunun i\u00e7indeki fonksiyon y\u00fcr\u00fct\u00fcl\u00fcr. Bu fonksiyon, API'den al\u0131nan verileri i\u015flemek i\u00e7in kod i\u00e7erir.<\/p>\n
then() metodundan sonra catch() metodunu ekleyin:<\/p>\n
\nfetch(url)\r\n.then(function() {\r\n\/\/ handle the response\r\n})\r\n.catch(function() {\r\n\/\/ handle the error\r\n});<\/code><\/pre>\n<\/div>\nfetch() kullanarak \u00e7a\u011f\u0131rd\u0131\u011f\u0131n\u0131z API bozulmu\u015f olabilir veya ba\u015fka bir hata olu\u015fabilir. Bu durumda, reddedilen s\u00f6z d\u00f6nd\u00fcr\u00fcl\u00fcr. Reddi i\u015flemek i\u00e7in catch y\u00f6ntemi kullan\u0131l\u0131r. API'niz \u00e7a\u011fr\u0131l\u0131rken bir hata olu\u015fursa, catch() i\u00e7indeki kod \u00e7al\u0131\u015ft\u0131r\u0131l\u0131r.<\/p>\n
Fetch API'sini kullanma s\u00f6zdizimini anlad\u0131ktan sonra art\u0131k ger\u00e7ek bir API'de fetch() kullanmaya ge\u00e7ebilirsiniz.<\/p>\n
Ad\u0131m 2 \u2013 Bir API'den Veri Almak \u0130\u00e7in Fetch'i Kullanma<\/h2>\n
A\u015fa\u011f\u0131daki kod \u00f6rne\u011fi JSONPlaceholder API'sine dayanacakt\u0131r. API'yi kullanarak on kullan\u0131c\u0131 alacak ve bunlar\u0131 JavaScript kullanarak sayfada g\u00f6r\u00fcnt\u00fcleyeceksiniz. Bu e\u011fitim, verileri JSONPlaceholder API'sinden alacak ve yazar listesindeki liste \u00f6\u011felerinde g\u00f6r\u00fcnt\u00fcleyecektir.<\/p>\n
\u00d6ncelikle bir HTML dosyas\u0131 olu\u015fturup, bir ba\u015fl\u0131k ve yazar kimliklerinin bulundu\u011fu s\u0131ras\u0131z bir liste ekleyerek ba\u015flayal\u0131m:<\/p>\n
\n<h1>Authors<\/h1>\r\n<ul id=\"authors\"><\/ul><\/code><\/pre>\n<\/div>\nHTML dosyan\u0131z\u0131n alt\u0131na script etiketleri ekleyin ve ul'yi almak i\u00e7in bir DOM se\u00e7icisi kullan\u0131n. Yazarlarla birlikte getElementById'yi arg\u00fcman olarak kullan\u0131n:<\/p>\n
\n<h1>Authors<\/h1>\r\n<ul id=\"authors\"><\/ul>\r\n<script>\r\nconst ul = document.getElementById('authors');\r\n<\/script><\/code><\/pre>\n<\/div>\nUnutmay\u0131n, yazarlar \u00f6nceki ul id'yi olu\u015fturdular.<\/p>\n
Daha sonra DocumentFragment olan bir liste olu\u015fturun:<\/p>\n
\n<script>\r\n\/\/ ...\r\nconst list = document.createDocumentFragment();\r\n<\/script><\/code><\/pre>\n<\/div>\nEkli t\u00fcm liste \u00f6\u011feleri listeye eklenecektir. DocumentFragment, etkin belge a\u011fa\u00e7 yap\u0131s\u0131n\u0131n bir par\u00e7as\u0131 de\u011fildir. Bu, belge nesne modeli de\u011fi\u015fti\u011finde yeniden \u00e7izimin performans \u00fczerinde bir etkisi olmamas\u0131 avantaj\u0131na sahiptir.<\/p>\n
On rastgele kullan\u0131c\u0131y\u0131 d\u00f6nd\u00fcren API URL'sini tutan url adl\u0131 sabit bir de\u011fi\u015fken olu\u015fturun:<\/p>\n
\n<script>\r\n\/\/ ...\r\nconst url = 'https:\/\/jsonplaceholder.typicode.com\/users';\r\n<\/script><\/code><\/pre>\n<\/div>\n\u015eimdi Fetch API'sini kullanarak fetch() fonksiyonunu kullanarak url'yi arg\u00fcman olarak kullanarak JSONPlaceholder API'sini \u00e7a\u011f\u0131r\u0131n:<\/p>\n
\n<script>\r\n\/\/ ...\r\nfetch(url)\r\n<\/script><\/code><\/pre>\n<\/div>\nFetch API'sini \u00e7a\u011f\u0131r\u0131p URL'yi JSONPlaceholder API'sine iletiyorsunuz. Ard\u0131ndan yan\u0131t al\u0131n\u0131yor. Ancak, ald\u0131\u011f\u0131n\u0131z yan\u0131t JSON de\u011fil, bilgiyle ne yapmak istedi\u011finize ba\u011fl\u0131 olarak kullan\u0131labilecek bir dizi y\u00f6ntem i\u00e7eren bir nesnedir. D\u00f6nd\u00fcr\u00fclen nesneyi JSON'a d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in json() y\u00f6ntemini kullan\u0131n.<\/p>\n
response ad\u0131nda bir parametreye sahip bir fonksiyon i\u00e7eren then() metodunu ekleyin:<\/p>\n
\n<script>\r\n\/\/ ...\r\nfetch(url)\r\n.then((response) => {})\r\n<\/script><\/code><\/pre>\n<\/div>\nYan\u0131t parametresi, fetch(url) komutundan d\u00f6nd\u00fcr\u00fclen nesne de\u011ferini al\u0131r. Yan\u0131t\u0131 JSON verilerine d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in json() y\u00f6ntemini kullan\u0131n:<\/p>\n
\n<script>\r\n\/\/ ...\r\nfetch(url)\r\n.then((response) => {\r\nreturn response.json();\r\n})\r\n<\/script><\/code><\/pre>\n<\/div>\nJSON verilerinin hala i\u015flenmesi gerekiyor. data adl\u0131 bir arg\u00fcman alan bir fonksiyona sahip ba\u015fka bir then() ifadesi ekleyin:<\/p>\n
\n<script>\r\n\/\/ ...\r\nfetch(url)\r\n.then((response) => {\r\nreturn response.json();\r\n})\r\n.then((data) => {})\r\n<\/script><\/code><\/pre>\n<\/div>\nBu fonksiyonda yazar ad\u0131nda, verilere e\u015fitlenmi\u015f bir de\u011fi\u015fken olu\u015fturun:<\/p>\n
\n<script>\r\n\/\/ ...\r\nfetch(url)\r\n.then((response) => {\r\nreturn response.json();\r\n})\r\n.then((data) => {\r\nlet authors = data;\r\n})\r\n<\/script><\/code><\/pre>\n<\/div>\nAuthors'daki her yazar i\u00e7in, ad\u0131n\u0131 g\u00f6steren bir liste \u00f6\u011fesi olu\u015fturmak istersiniz. map() y\u00f6ntemi bu kal\u0131p i\u00e7in uygundur:<\/p>\n
\n<script>\r\n\/\/ ...\r\nfetch(url)\r\n.then((response) => {\r\nreturn response.json();\r\n})\r\n.then((data) => {\r\nlet authors = data;\r\nauthors.map(function(author) {\r\n});\r\n})\r\n<\/script><\/code><\/pre>\n<\/div>\nHarita fonksiyonunuzda, li (HTML \u00f6\u011fesi) arg\u00fcman\u0131 ile createElement de\u011ferine e\u015fitlenmi\u015f li ad\u0131nda bir de\u011fi\u015fken olu\u015fturun. Ayr\u0131ca ad i\u00e7in bir h2 ve e-posta i\u00e7in bir span olu\u015fturun:<\/p>\n
\n<script>\r\n\/\/ ...\r\nfetch(url)\r\n.then((response) => {\r\nreturn response.json();\r\n})\r\n.then((data) => {\r\nlet authors = data;\r\nauthors.map(function(author) {\r\nlet li = document.createElement('li');\r\nlet name = document.createElement('h2');\r\nlet email = document.createElement('span');\r\n});\r\n})\r\n<\/script><\/code><\/pre>\n<\/div>\nh2 \u00f6\u011fesi yazar\u0131n ad\u0131n\u0131, span \u00f6\u011fesi ise yazar\u0131n e-posta adresini i\u00e7erecektir. innerHTML \u00f6zniteli\u011fi ve dize enterpolasyonu bunu yapman\u0131za olanak tan\u0131r:<\/p>\n
\n<script>\r\n\/\/ ...\r\nfetch(url)\r\n.then((response) => {\r\nreturn response.json();\r\n})\r\n.then((data) => {\r\nlet authors = data;\r\nauthors.map(function(author) {\r\nlet li = document.createElement('li');\r\nlet name = document.createElement('h2');\r\nlet email = document.createElement('span');\r\nname.innerHTML = `${author.name}`;\r\nemail.innerHTML = `${author.email}`;\r\n});\r\n})\r\n<\/script><\/code><\/pre>\n<\/div>\nDaha sonra bu DOM elemanlar\u0131n\u0131 appendChild ile ekleyin:<\/p>\n
\n<script>\r\n\/\/ ...\r\nfetch(url)\r\n.then((response) => {\r\nreturn response.json();\r\n})\r\n.then((data) => {\r\nlet authors = data;\r\nauthors.map(function(author) {\r\nlet li = document.createElement('li');\r\nlet name = document.createElement('h2');\r\nlet email = document.createElement('span');\r\nname.innerHTML = `${author.name}`;\r\nemail.innerHTML = `${author.email}`;\r\nli.appendChild(name);\r\nli.appendChild(email);\r\nlist.appendChild(li);\r\n});\r\n})\r\nul.appendChild(list);\r\n<\/script><\/code><\/pre>\n<\/div>\nHer liste \u00f6\u011fesinin DocumentFragment listesine eklendi\u011fini unutmay\u0131n. E\u015fleme tamamland\u0131\u011f\u0131nda, liste ul s\u0131ras\u0131z liste \u00f6\u011fesine eklenir.<\/p>\n
Her iki then() fonksiyonu da tamamland\u0131\u011f\u0131nda, art\u0131k catch() fonksiyonunu ekleyebilirsiniz. Bu fonksiyon, olas\u0131 hatalar\u0131 konsola kaydeder:<\/p>\n
\n<script>\r\n\/\/ ...\r\nfetch(url)\r\n.then((response) => {\r\n\/\/ ...\r\n})\r\n.then((data) => {\r\n\/\/ ...\r\n})\r\n.catch(function(error) {\r\nconsole.log(error);\r\n});\r\n\/\/ ...\r\n<\/script><\/code><\/pre>\n<\/div>\nOlu\u015fturdu\u011funuz istek i\u00e7in tam kod \u015fudur:<\/p>\n
\n<h1>Authors<\/h1>\r\n<ul id=\"authors\"><\/ul>\r\n<script>\r\nconst ul = document.getElementById('authors');\r\nconst list = document.createDocumentFragment();\r\nconst url = 'https:\/\/jsonplaceholder.typicode.com\/users';\r\nfetch(url)\r\n.then((response) => {\r\nreturn response.json();\r\n})\r\n.then((data) => {\r\nlet authors = data;\r\nauthors.map(function(author) {\r\nlet li = document.createElement('li');\r\nlet name = document.createElement('h2');\r\nlet email = document.createElement('span');\r\nname.innerHTML = `${author.name}`;\r\nemail.innerHTML = `${author.email}`;\r\nli.appendChild(name);\r\nli.appendChild(email);\r\nlist.appendChild(li);\r\n});\r\n}).\r\n.catch(function(error) {\r\nconsole.log(error);\r\n});\r\nul.appendChild(list);\r\n<\/script><\/code><\/pre>\n<\/div>\nJSONPlaceholder API ve Fetch API'sini kullanarak ba\u015far\u0131yla bir GET iste\u011fi olu\u015fturdunuz. \u015eimdi POST istekleri olu\u015fturacaks\u0131n\u0131z.<\/p>\n
Ad\u0131m 3 \u2013 POST isteklerinin i\u015flenmesi<\/h2>\n
Fetch, varsay\u0131lan olarak GET isteklerini kullan\u0131r, ancak di\u011fer t\u00fcm istek t\u00fcrlerini kullanabilir, ba\u015fl\u0131klar\u0131 de\u011fi\u015ftirebilir ve veri g\u00f6nderebilirsiniz. Bir POST iste\u011fi olu\u015ftural\u0131m.<\/p>\n
\u0130lk olarak, JSONPlaceholder API'sine ba\u011flant\u0131y\u0131 tutan sabit bir de\u011fi\u015fken ekleyin:<\/p>\n
\nconst url = 'https:\/\/jsonplaceholder.typicode.com\/users';\r\n<\/code><\/pre>\n<\/div>\nArd\u0131ndan, nesnenizi kurman\u0131z ve fetch fonksiyonuna ikinci arg\u00fcman olarak ge\u00e7irmeniz gerekiyor. Bu, Sammy (veya ad\u0131n\u0131z) anahtar ad\u0131na ve \u015fu de\u011fere sahip data adl\u0131 bir nesne olacak:<\/p>\n
\n\/\/ ...\r\nlet data = {\r\nname: 'Sammy'\r\n}<\/code><\/pre>\n<\/div>\nBu bir POST iste\u011fi oldu\u011fundan, bunu a\u00e7\u0131k\u00e7a belirtmeniz gerekir. fetchData ad\u0131nda bir nesne olu\u015fturun:<\/p>\n
\n\/\/ ...\r\nlet fetchData = {\r\n}<\/code><\/pre>\n<\/div>\nBu nesne \u00fc\u00e7 anahtar i\u00e7ermelidir: y\u00f6ntem, g\u00f6vde ve ba\u015fl\u0131k:<\/p>\n
\n\/\/ ...\r\nlet fetchData = {\r\nmethod: 'POST',\r\nbody: JSON.stringify(data),\r\nheaders: new Headers({\r\n'Content-Type': 'application\/json; charset=UTF-8'\r\n})\r\n}<\/code><\/pre>\n<\/div>\nMetot anahtar\u0131 "POST" de\u011ferine sahip olacakt\u0131r. G\u00f6vde, yeni olu\u015fturulan veri nesnesinin JSON.stringify bi\u00e7imine ayarlanacakt\u0131r. Ba\u015fl\u0131klar "Content-Type" de\u011ferine sahip olacakt\u0131r: "application\/json; charset=UTF-8".<\/p>\n
Ba\u015fl\u0131klar aray\u00fcz\u00fc, HTTP istek ve yan\u0131t ba\u015fl\u0131klar\u0131 \u00fczerinde eylemler ger\u00e7ekle\u015ftirmenize olanak tan\u0131yan Fetch API'nin bir \u00f6zelli\u011fidir.<\/p>\n
Bu kodu yerle\u015ftirerek, Fetch API'sini kullanarak bir POST iste\u011fi yap\u0131labilir. Fetch POST iste\u011finize URL'yi, fetchData'y\u0131 ve arg\u00fcmanlar\u0131 eklersiniz:<\/p>\n
\n\/\/ ...\r\nfetch(url, fetchData)<\/code><\/pre>\n<\/div>\nthen() fonksiyonu, JSONPlaceholder API'sinden al\u0131nan yan\u0131t\u0131 i\u015fleyen kodu i\u00e7erir:<\/p>\n
\n\/\/ ...\r\nfetch(url, fetchData)\r\n.then(function() {\r\n\/\/ Handle response you get from the API\r\n});<\/code><\/pre>\n<\/div>\nOlu\u015fturdu\u011funuz istek i\u00e7in tam kod \u015fudur:<\/p>\n
\nconst url = 'https:\/\/jsonplaceholder.typicode.com\/users';\r\nlet data = {\r\nname: 'Sammy'\r\n}\r\nlet fetchData = {\r\nmethod: 'POST',\r\nbody: JSON.stringify(data),\r\nheaders: new Headers({\r\n'Content-Type': 'application\/json; charset=UTF-8'\r\n})\r\n}\r\nfetch(url, fetchData)\r\n.then(function() {\r\n\/\/ Handle response you get from the API\r\n});<\/code><\/pre>\n<\/div>\nAyr\u0131ca fetch() fonksiyonunu bir Request nesnesine de ge\u00e7irebilirsiniz.<\/p>\n
\nconst url = 'https:\/\/jsonplaceholder.typicode.com\/users';\r\nlet data = {\r\nname: 'Sammy'\r\n}\r\nlet request = new Request(url, {\r\nmethod: 'POST',\r\nbody: JSON.stringify(data),\r\nheaders: new Headers({\r\n'Content-Type': 'application\/json; charset=UTF-8'\r\n})\r\n});\r\nfetch(request)\r\n.then(function() {\r\n\/\/ Handle response you get from the API\r\n});<\/code><\/pre>\n<\/div>\nBu yakla\u015f\u0131mla, istek fetch()'e tek arg\u00fcman olarak kullan\u0131labilir ve url ve fetchData'n\u0131n yerini alabilir.<\/p>\n
Art\u0131k Fetch API ile POST istekleri olu\u015fturman\u0131n ve y\u00fcr\u00fctmenin iki yolunu biliyorsunuz.<\/p>\n
Sonu\u00e7<\/h2>\n
Fetch API hen\u00fcz t\u00fcm taray\u0131c\u0131lar taraf\u0131ndan desteklenmese de XMLHttpRequest'e harika bir alternatiftir.<\/p>","protected":false},"excerpt":{"rendered":"Giri\u015f, API istekleri yapmak i\u00e7in XMLHttpRequest kullan\u0131ld\u0131\u011f\u0131nda ortaya \u00e7\u0131kt\u0131. Promises ve... i\u00e7ermiyordu.","protected":false},"author":1,"featured_media":16676,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_yoast_wpseo_focuskw":"\u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Fetch API","_yoast_wpseo_title":"","_yoast_wpseo_metadesc":"","_yoast_wpseo_canonical":"","_yoast_wpseo_opengraph-description":"","_yoast_wpseo_opengraph-image":"","_yoast_wpseo_twitter-description":"","_yoast_wpseo_twitter-image":"","_yoast_wpseo_focuskeywords":"[]","_yoast_wpseo_primary_category":"193","footnotes":""},"categories":[193,363],"tags":[384,435],"class_list":{"0":"post-16673","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-tutorials","8":"category-programming","9":"tag-java-script","10":"tag-programming"},"yoast_head":"\n
\u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 JavaScript Fetch API \u0628\u0631\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u062f\u0627\u062f\u0647 - \u0628\u0644\u0627\u06af ITPiran<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.itpiran.net\/blog\/tr\/tutorials\/how-to-use-the-javascript-fetch-api-to-get-data\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 JavaScript Fetch API \u0628\u0631\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u062f\u0627\u062f\u0647 - \u0628\u0644\u0627\u06af ITPiran\" \/>\n<meta property=\"og:description\" content=\"\u0645\u0642\u062f\u0645\u0647 \u0632\u0645\u0627\u0646\u06cc \u0628\u0648\u062f \u06a9\u0647 \u0627\u0632 XMLHttpRequest \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627\u06cc API \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u062f. \u0634\u0627\u0645\u0644 Promises \u0646\u0628\u0648\u062f \u0648…\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.itpiran.net\/blog\/tr\/tutorials\/how-to-use-the-javascript-fetch-api-to-get-data\/\" \/>\n<meta property=\"og:site_name\" content=\"\u0628\u0644\u0627\u06af ITPiran\" \/>\n<meta property=\"article:published_time\" content=\"2025-01-22T08:01:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.itpiran.net\/2025\/01\/22113024\/FetchApi.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1793\" \/>\n\t<meta property=\"og:image:height\" content=\"1110\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/how-to-use-the-javascript-fetch-api-to-get-data\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/how-to-use-the-javascript-fetch-api-to-get-data\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/person\\\/04ed27b919baca468a2273f8e4318f81\"},\"headline\":\"\u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 JavaScript Fetch API \u0628\u0631\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u062f\u0627\u062f\u0647\",\"datePublished\":\"2025-01-22T08:01:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/how-to-use-the-javascript-fetch-api-to-get-data\\\/\"},\"wordCount\":154,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/how-to-use-the-javascript-fetch-api-to-get-data\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2025\\\/01\\\/22113024\\\/FetchApi.jpg\",\"keywords\":[\"Java Script\",\"programming\"],\"articleSection\":[\"\u0622\u0645\u0648\u0632\u0634\u06cc\",\"\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/how-to-use-the-javascript-fetch-api-to-get-data\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/how-to-use-the-javascript-fetch-api-to-get-data\\\/\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/how-to-use-the-javascript-fetch-api-to-get-data\\\/\",\"name\":\"\u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 JavaScript Fetch API \u0628\u0631\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u062f\u0627\u062f\u0647 - \u0628\u0644\u0627\u06af ITPiran\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/how-to-use-the-javascript-fetch-api-to-get-data\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/how-to-use-the-javascript-fetch-api-to-get-data\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2025\\\/01\\\/22113024\\\/FetchApi.jpg\",\"datePublished\":\"2025-01-22T08:01:39+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/how-to-use-the-javascript-fetch-api-to-get-data\\\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/how-to-use-the-javascript-fetch-api-to-get-data\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/how-to-use-the-javascript-fetch-api-to-get-data\\\/#primaryimage\",\"url\":\"https:\\\/\\\/cdn.itpiran.net\\\/2025\\\/01\\\/22113024\\\/FetchApi.jpg\",\"contentUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2025\\\/01\\\/22113024\\\/FetchApi.jpg\",\"width\":1793,\"height\":1110},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/how-to-use-the-javascript-fetch-api-to-get-data\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u0622\u0645\u0648\u0632\u0634\u06cc\",\"item\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/category\\\/tutorials\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"\u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 JavaScript Fetch API \u0628\u0631\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u062f\u0627\u062f\u0647\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/\",\"name\":\"\u0628\u0644\u0627\u06af ITPiran\",\"description\":\"\u0627\u062e\u0628\u0627\u0631 \u0648 \u0645\u0642\u0627\u0644\u0627\u062a \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#organization\",\"name\":\"\u0628\u0644\u0627\u06af \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646\",\"alternateName\":\"ITPIran Blog\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/cdn.itpiran.net\\\/2023\\\/12\\\/27150508\\\/cropped-ITPIRAN-BLOG-LOGO-2.png\",\"contentUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2023\\\/12\\\/27150508\\\/cropped-ITPIRAN-BLOG-LOGO-2.png\",\"width\":512,\"height\":512,\"caption\":\"\u0628\u0644\u0627\u06af \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646\"},\"image\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/person\\\/04ed27b919baca468a2273f8e4318f81\",\"name\":\"admin\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tr\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript Fetch API'sini kullanarak veri alma - ITPiran Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.itpiran.net\/blog\/tr\/tutorials\/how-to-use-the-javascript-fetch-api-to-get-data\/","og_locale":"tr_TR","og_type":"article","og_title":"\u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 JavaScript Fetch API \u0628\u0631\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u062f\u0627\u062f\u0647 - \u0628\u0644\u0627\u06af ITPiran","og_description":"\u0645\u0642\u062f\u0645\u0647 \u0632\u0645\u0627\u0646\u06cc \u0628\u0648\u062f \u06a9\u0647 \u0627\u0632 XMLHttpRequest \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627\u06cc API \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u062f. \u0634\u0627\u0645\u0644 Promises \u0646\u0628\u0648\u062f \u0648…","og_url":"https:\/\/www.itpiran.net\/blog\/tr\/tutorials\/how-to-use-the-javascript-fetch-api-to-get-data\/","og_site_name":"\u0628\u0644\u0627\u06af ITPiran","article_published_time":"2025-01-22T08:01:39+00:00","og_image":[{"width":1793,"height":1110,"url":"https:\/\/cdn.itpiran.net\/2025\/01\/22113024\/FetchApi.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"admin","Tahmini okuma s\u00fcresi":"9 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/how-to-use-the-javascript-fetch-api-to-get-data\/#article","isPartOf":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/how-to-use-the-javascript-fetch-api-to-get-data\/"},"author":{"name":"admin","@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/person\/04ed27b919baca468a2273f8e4318f81"},"headline":"\u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 JavaScript Fetch API \u0628\u0631\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u062f\u0627\u062f\u0647","datePublished":"2025-01-22T08:01:39+00:00","mainEntityOfPage":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/how-to-use-the-javascript-fetch-api-to-get-data\/"},"wordCount":154,"commentCount":0,"publisher":{"@id":"https:\/\/www.itpiran.net\/blog\/#organization"},"image":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/how-to-use-the-javascript-fetch-api-to-get-data\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.itpiran.net\/2025\/01\/22113024\/FetchApi.jpg","keywords":["Java Script","programming"],"articleSection":["\u0622\u0645\u0648\u0632\u0634\u06cc","\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.itpiran.net\/blog\/tutorials\/how-to-use-the-javascript-fetch-api-to-get-data\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/how-to-use-the-javascript-fetch-api-to-get-data\/","url":"https:\/\/www.itpiran.net\/blog\/tutorials\/how-to-use-the-javascript-fetch-api-to-get-data\/","name":"JavaScript Fetch API'sini kullanarak veri alma - ITPiran Blog","isPartOf":{"@id":"https:\/\/www.itpiran.net\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/how-to-use-the-javascript-fetch-api-to-get-data\/#primaryimage"},"image":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/how-to-use-the-javascript-fetch-api-to-get-data\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.itpiran.net\/2025\/01\/22113024\/FetchApi.jpg","datePublished":"2025-01-22T08:01:39+00:00","breadcrumb":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/how-to-use-the-javascript-fetch-api-to-get-data\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.itpiran.net\/blog\/tutorials\/how-to-use-the-javascript-fetch-api-to-get-data\/"]}]},{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/how-to-use-the-javascript-fetch-api-to-get-data\/#primaryimage","url":"https:\/\/cdn.itpiran.net\/2025\/01\/22113024\/FetchApi.jpg","contentUrl":"https:\/\/cdn.itpiran.net\/2025\/01\/22113024\/FetchApi.jpg","width":1793,"height":1110},{"@type":"BreadcrumbList","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/how-to-use-the-javascript-fetch-api-to-get-data\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.itpiran.net\/blog\/"},{"@type":"ListItem","position":2,"name":"\u0622\u0645\u0648\u0632\u0634\u06cc","item":"https:\/\/www.itpiran.net\/blog\/category\/tutorials\/"},{"@type":"ListItem","position":3,"name":"\u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 JavaScript Fetch API \u0628\u0631\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u062f\u0627\u062f\u0647"}]},{"@type":"WebSite","@id":"https:\/\/www.itpiran.net\/blog\/#website","url":"https:\/\/www.itpiran.net\/blog\/","name":"ITPiran Blog","description":"\u0130ran S\u00fcrd\u00fcr\u00fclebilir Ticaret Haberleri ve Makaleleri","publisher":{"@id":"https:\/\/www.itpiran.net\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.itpiran.net\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":"Organization","@id":"https:\/\/www.itpiran.net\/blog\/#organization","name":"S\u00fcrd\u00fcr\u00fclebilir \u0130ran \u0130\u015fletmeleri Blogu","alternateName":"ITPIran Blog","url":"https:\/\/www.itpiran.net\/blog\/","logo":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdn.itpiran.net\/2023\/12\/27150508\/cropped-ITPIRAN-BLOG-LOGO-2.png","contentUrl":"https:\/\/cdn.itpiran.net\/2023\/12\/27150508\/cropped-ITPIRAN-BLOG-LOGO-2.png","width":512,"height":512,"caption":"\u0628\u0644\u0627\u06af \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646"},"image":{"@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/person\/04ed27b919baca468a2273f8e4318f81","name":"y\u00f6netici","url":"https:\/\/www.itpiran.net\/blog\/tr\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.itpiran.net\/blog\/tr\/wp-json\/wp\/v2\/posts\/16673","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.itpiran.net\/blog\/tr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.itpiran.net\/blog\/tr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/tr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/tr\/wp-json\/wp\/v2\/comments?post=16673"}],"version-history":[{"count":1,"href":"https:\/\/www.itpiran.net\/blog\/tr\/wp-json\/wp\/v2\/posts\/16673\/revisions"}],"predecessor-version":[{"id":16675,"href":"https:\/\/www.itpiran.net\/blog\/tr\/wp-json\/wp\/v2\/posts\/16673\/revisions\/16675"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/tr\/wp-json\/wp\/v2\/media\/16676"}],"wp:attachment":[{"href":"https:\/\/www.itpiran.net\/blog\/tr\/wp-json\/wp\/v2\/media?parent=16673"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/tr\/wp-json\/wp\/v2\/categories?post=16673"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/tr\/wp-json\/wp\/v2\/tags?post=16673"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}