{"id":926,"date":"2021-01-19T21:14:56","date_gmt":"2021-01-19T18:14:56","guid":{"rendered":"https:\/\/www.etemkeskin.com\/?p=926"},"modified":"2021-01-19T21:18:16","modified_gmt":"2021-01-19T18:18:16","slug":"javascript-fetch-api-kullanimi-2","status":"publish","type":"post","link":"https:\/\/www.etemkeskin.com\/index.php\/tr\/2021\/01\/19\/javascript-fetch-api-kullanimi-2\/","title":{"rendered":"Javascript Fetch Api Kullan\u0131m\u0131"},"content":{"rendered":"\n

Fetch API<\/strong> window objesinde bulunan web istekleri yapabilece\u011fimiz ve cevaplar\u0131n\u0131 kolayl\u0131kla i\u015fleyebilece\u011fimiz asenkron \u00e7al\u0131\u015fan bir metoddur. <\/p>\n\n\n\n

Fetch API’ nin yerine jQuery.ajax()<\/code><\/strong> ve XMLHttpRequest<\/strong><\/code> kullan\u0131labilinir.. Fakat fetch api hem kullan\u0131m\u0131 daha kolay hem de window objesi ile birlikte geliyor. E\u011fer window objesini console’ da yazd\u0131r\u0131rsak bu window objesinin alt\u0131nda fetch metodunu g\u00f6rebilirsiniz.<\/p>\n\n\n\n

\/\/ window objesinin i\u00e7inde bir metoddur.\nconsole.log(this);<\/pre><\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
TEMEL Kullan\u0131m<\/h4>\n\n\n\n
FETCH API’ yi kullanmak i\u00e7in fetch metoduna istek yapaca\u011f\u0131m\u0131z url’ i parametre olarak vermek gerekiyor.<\/p>\n\n\n\n
fetch(url)<\/pre><\/div>\n\n\n\n
fetch()<\/code> metodundan sonra, metodun sonuna then()<\/code> promise metodunu ekleriz:<\/p>\n\n\n\n
.then(function() {\n\n})<\/pre><\/div>\n\n\n\n
\u00d6RNEK:<\/strong> “https:\/\/jsonplaceholder.typicode.com\/todos” adresine get iste\u011finde bulunal\u0131m.<\/p>\n\n\n\n
\/\/\/\/ GET \u0130ste\u011fi\nfetch("https:\/\/jsonplaceholder.typicode.com\/todos")\n  .then(response => response.json())\/\/parse json data\n  .then(function(todos){\n    todos.forEach(todo => {\n        console.log(todo.title);\/\/Ba\u015fl\u0131klar\u0131 console' a yazd\u0131rma\n    });\n})<\/pre><\/div>\n\n\n\n
POST \u0130ste\u011fi Yapma<\/h4>\n\n\n\n
Rest servisine post iste\u011fi yapal\u0131m.<\/p>\n\n\n\n
\/\/ POST iste\u011fi ile verimizi servera g\u00f6nderelim  \nlet payload = {\n    title: "Blog Title",\n    body: "lorem ipsum", \n    userId:1\n  }\n  \n  fetch('https:\/\/jsonplaceholder.typicode.com\/posts', {\n    method: "POST",\n    body: JSON.stringify(payload),\n    headers: {"Content-type": "application\/json; charset=UTF-8"}\n  })\n  .then(response => response.json()) \n  .then(json => console.log(json))\n  .catch(err => console.log(err));<\/pre><\/div>\n\n\n\n
META Data Kullan\u0131m\u0131<\/h4>\n\n\n\n
Fetch API ile istek yapt\u0131\u011f\u0131m\u0131zda istek yap\u0131lan adres bize META datalar g\u00f6nderir. Bu META datalar\u0131 console’ a a\u015fa\u011f\u0131daki gibi yazd\u0131rabiliriz.<\/p>\n\n\n\n
\/\/META VER\u0130LER\nfetch('https:\/\/jsonplaceholder.typicode.com\/posts\/1').then(function(response) {  \n    console.log(response.headers.get('Content-Type'));  \n    console.log(response.headers.get('Date'));\n    console.log(response.status);  \n    console.log(response.statusText);  \n    console.log(response.type);  \n    console.log(response.url);  \n});<\/pre><\/div>\n\n\n\n
Sizde Fetch API kullanarak https:\/\/jsonplaceholder.typicode.com\/<\/a> sitesine REST istekleri yapabilirsiniz.<\/p>\n","protected":false},"excerpt":{"rendered":"
Fetch API window objesinde bulunan web istekleri yapabilece\u011fimiz ve cevaplar\u0131n\u0131 kolayl\u0131kla i\u015fleyebilece\u011fimiz asenkron \u00e7al\u0131\u015fan bir metoddur. Fetch API’ nin yerine jQuery.ajax() ve XMLHttpRequest kullan\u0131labilinir.. Fakat fetch api hem kullan\u0131m\u0131 daha kolay hem de window objesi ile birlikte geliyor. E\u011fer window objesini console’ da yazd\u0131r\u0131rsak bu window objesinin alt\u0131nda fetch metodunu g\u00f6rebilirsiniz. TEMEL Kullan\u0131m FETCH API’ […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[18,52],"tags":[],"yoast_head":"\nJavascript Fetch Api Kullan\u0131m\u0131 - blog website<\/title>\n<meta name=\"description\" content=\"Fetch API window objesinde bulunan web istekleri yapabilece\u011fimiz ve cevaplar\u0131n\u0131 kolayl\u0131kla i\u015fleyebilece\u011fimiz asenkron \u00e7al\u0131\u015fan bir metoddur. Fetch API' nin yerine jQuery.ajax() ve XMLHttpRequest kullan\u0131labilinir.. Fakat fetch api hem kullan\u0131m\u0131 daha kolay hem de window objesi ile birlikte geliyor. E\u011fer window objesini console' da yazd\u0131r\u0131rsak bu window objesinin alt\u0131nda fetch metodunu g\u00f6rebilirsiniz.\" \/>\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.etemkeskin.com\/index.php\/tr\/2021\/01\/19\/javascript-fetch-api-kullanimi-2\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Javascript Fetch Api Kullan\u0131m\u0131 - blog website\" \/>\n<meta property=\"og:description\" content=\"Fetch API window objesinde bulunan web istekleri yapabilece\u011fimiz ve cevaplar\u0131n\u0131 kolayl\u0131kla i\u015fleyebilece\u011fimiz asenkron \u00e7al\u0131\u015fan bir metoddur. Fetch API' nin yerine jQuery.ajax() ve XMLHttpRequest kullan\u0131labilinir.. Fakat fetch api hem kullan\u0131m\u0131 daha kolay hem de window objesi ile birlikte geliyor. E\u011fer window objesini console' da yazd\u0131r\u0131rsak bu window objesinin alt\u0131nda fetch metodunu g\u00f6rebilirsiniz.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2021\/01\/19\/javascript-fetch-api-kullanimi-2\/\" \/>\n<meta property=\"og:site_name\" content=\"blog website\" \/>\n<meta property=\"article:published_time\" content=\"2021-01-19T18:14:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-01-19T18:18:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.etemkeskin.com\/wp-content\/uploads\/2021\/01\/image-4.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.etemkeskin.com\/#website\",\"url\":\"https:\/\/www.etemkeskin.com\/\",\"name\":\"blog website\",\"description\":\"Etem KESK\\u0130N\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.etemkeskin.com\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"tr\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2021\/01\/19\/javascript-fetch-api-kullanimi-2\/#primaryimage\",\"inLanguage\":\"tr\",\"url\":\"https:\/\/www.etemkeskin.com\/wp-content\/uploads\/2021\/01\/image-4.png\",\"contentUrl\":\"https:\/\/www.etemkeskin.com\/wp-content\/uploads\/2021\/01\/image-4.png\",\"width\":512,\"height\":689},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2021\/01\/19\/javascript-fetch-api-kullanimi-2\/#webpage\",\"url\":\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2021\/01\/19\/javascript-fetch-api-kullanimi-2\/\",\"name\":\"Javascript Fetch Api Kullan\\u0131m\\u0131 - blog website\",\"isPartOf\":{\"@id\":\"https:\/\/www.etemkeskin.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2021\/01\/19\/javascript-fetch-api-kullanimi-2\/#primaryimage\"},\"datePublished\":\"2021-01-19T18:14:56+00:00\",\"dateModified\":\"2021-01-19T18:18:16+00:00\",\"author\":{\"@id\":\"https:\/\/www.etemkeskin.com\/#\/schema\/person\/dcbc30282861ce578b96a79ce8789629\"},\"description\":\"Fetch API window objesinde bulunan web istekleri yapabilece\\u011fimiz ve cevaplar\\u0131n\\u0131 kolayl\\u0131kla i\\u015fleyebilece\\u011fimiz asenkron \\u00e7al\\u0131\\u015fan bir metoddur. Fetch API' nin yerine jQuery.ajax() ve XMLHttpRequest kullan\\u0131labilinir.. Fakat fetch api hem kullan\\u0131m\\u0131 daha kolay hem de window objesi ile birlikte geliyor. E\\u011fer window objesini console' da yazd\\u0131r\\u0131rsak bu window objesinin alt\\u0131nda fetch metodunu g\\u00f6rebilirsiniz.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2021\/01\/19\/javascript-fetch-api-kullanimi-2\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2021\/01\/19\/javascript-fetch-api-kullanimi-2\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2021\/01\/19\/javascript-fetch-api-kullanimi-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Ana sayfa\",\"item\":\"https:\/\/www.etemkeskin.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Javascript Fetch Api Kullan\\u0131m\\u0131\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.etemkeskin.com\/#\/schema\/person\/dcbc30282861ce578b96a79ce8789629\",\"name\":\"etemkeskin\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.etemkeskin.com\/#personlogo\",\"inLanguage\":\"tr\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6af0148b790691ed24ae245fb3dc773b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6af0148b790691ed24ae245fb3dc773b?s=96&d=mm&r=g\",\"caption\":\"etemkeskin\"},\"url\":\"https:\/\/www.etemkeskin.com\/index.php\/author\/etemkeskinyahoo-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/926"}],"collection":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/comments?post=926"}],"version-history":[{"count":4,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/926\/revisions"}],"predecessor-version":[{"id":930,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/926\/revisions\/930"}],"wp:attachment":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/media?parent=926"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/categories?post=926"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/tags?post=926"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}