{"id":847,"date":"2021-01-19T16:27:26","date_gmt":"2021-01-19T13:27:26","guid":{"rendered":"https:\/\/www.etemkeskin.com\/?p=847"},"modified":"2021-01-19T21:42:58","modified_gmt":"2021-01-19T18:42:58","slug":"fetch-api-usage-in-javascript","status":"publish","type":"post","link":"https:\/\/www.etemkeskin.com\/index.php\/2021\/01\/19\/fetch-api-usage-in-javascript\/","title":{"rendered":"Fetch Api Usage in Javascript"},"content":{"rendered":"\n

The\u00a0Fetch API<\/strong>\u00a0interface allows web browser to make HTTP requests to web servers. It works asynchronously.<\/p>\n\n\n\n

JQuery.ajax()<\/strong> and XMLHttpRequest<\/strong> can be used instead of the Fetch API<\/strong>. But fetch api is both easier to use and comes with window object. If we print the window object in console, you can see the fetch method under this window object.<\/p>\n\n\n\n

\/\/ It is a method inside the window object.\nconsole.log(this);<\/pre><\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
BASIC Usage<\/h4>\n\n\n\n
To use the FETCH API, it is necessary to give the url<\/strong> parameter to fetch() method. <\/p>\n\n\n\n
fetch(url)<\/pre><\/div>\n\n\n\n
Then, we chain the then()<\/strong> promise method to the end of the method:<\/p>\n\n\n\n
.then(function() {\n\n})<\/pre><\/div>\n\n\n\n
EXAMPLE:<\/strong> <\/p>\n\n\n\n
Make Get request to “https:\/\/jsonplaceholder.typicode.com\/todos” address.<\/p>\n\n\n\n
\/\/\/\/ GET request\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);\/\/print titles in console\n    });\n})<\/pre><\/div>\n\n\n\n
POST Request<\/h4>\n\n\n\n
Let’s make a Post request to the rest service.<\/p>\n\n\n\n
\/\/ Let's send our data to the server with POST request  \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 Usage<\/h4>\n\n\n\n
When we make a request with the Fetch API, the address from which the request is made sends META data to browser. We can print these META data to the console as follows.<\/p>\n\n\n\n
\/\/META DATAS\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
You can make REST requests to https:\/\/jsonplaceholder.typicode.com\/<\/a> using the Fetch API.<\/p>\n","protected":false},"excerpt":{"rendered":"
The\u00a0Fetch API\u00a0interface allows web browser to make HTTP requests to web servers. It works asynchronously. JQuery.ajax() and XMLHttpRequest can be used instead of the Fetch API. But fetch api is both easier to use and comes with window object. If we print the window object in console, you can see the fetch method under this […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1,50],"tags":[],"yoast_head":"\nFetch Api Usage in Javascript - blog website<\/title>\n<meta name=\"description\" content=\"The Fetch API interface allows web browser to make HTTP requests to web servers. It works asynchronously. JQuery.ajax() and XMLHttpRequest can be used instead of the Fetch API. But fetch api is both easier to use and comes with window object. If we print the window object in console, you can see the fetch method under this window object.\" \/>\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\/2021\/01\/19\/fetch-api-usage-in-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Fetch Api Usage in Javascript - blog website\" \/>\n<meta property=\"og:description\" content=\"The Fetch API interface allows web browser to make HTTP requests to web servers. It works asynchronously. JQuery.ajax() and XMLHttpRequest can be used instead of the Fetch API. But fetch api is both easier to use and comes with window object. If we print the window object in console, you can see the fetch method under this window object.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.etemkeskin.com\/index.php\/2021\/01\/19\/fetch-api-usage-in-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"blog website\" \/>\n<meta property=\"article:published_time\" content=\"2021-01-19T13:27:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-01-19T18:42:58+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\/2021\/01\/19\/fetch-api-usage-in-javascript\/#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\/2021\/01\/19\/fetch-api-usage-in-javascript\/#webpage\",\"url\":\"https:\/\/www.etemkeskin.com\/index.php\/2021\/01\/19\/fetch-api-usage-in-javascript\/\",\"name\":\"Fetch Api Usage in Javascript - blog website\",\"isPartOf\":{\"@id\":\"https:\/\/www.etemkeskin.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/2021\/01\/19\/fetch-api-usage-in-javascript\/#primaryimage\"},\"datePublished\":\"2021-01-19T13:27:26+00:00\",\"dateModified\":\"2021-01-19T18:42:58+00:00\",\"author\":{\"@id\":\"https:\/\/www.etemkeskin.com\/#\/schema\/person\/dcbc30282861ce578b96a79ce8789629\"},\"description\":\"The Fetch API interface allows web browser to make HTTP requests to web servers. It works asynchronously. JQuery.ajax() and XMLHttpRequest can be used instead of the Fetch API. But fetch api is both easier to use and comes with window object. If we print the window object in console, you can see the fetch method under this window object.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/2021\/01\/19\/fetch-api-usage-in-javascript\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.etemkeskin.com\/index.php\/2021\/01\/19\/fetch-api-usage-in-javascript\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/2021\/01\/19\/fetch-api-usage-in-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Ana sayfa\",\"item\":\"https:\/\/www.etemkeskin.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Fetch Api Usage in Javascript\"}]},{\"@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\/847"}],"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=847"}],"version-history":[{"count":47,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/847\/revisions"}],"predecessor-version":[{"id":955,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/847\/revisions\/955"}],"wp:attachment":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/media?parent=847"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/categories?post=847"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/tags?post=847"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}