{"id":8629,"date":"2019-07-15T13:54:07","date_gmt":"2019-07-15T11:54:07","guid":{"rendered":"https:\/\/www.espai.es\/blog\/?p=8629"},"modified":"2021-09-13T20:22:14","modified_gmt":"2021-09-13T18:22:14","slug":"ajax-con-fetch-api","status":"publish","type":"post","link":"https:\/\/www.espai.es\/blog\/2019\/07\/ajax-con-fetch-api\/","title":{"rendered":"AJAX con Fetch API"},"content":{"rendered":"

Fetch API<\/strong> es una forma alternativa de realizar peticiones AJAX al uso del ya cl\u00e1sico objeto XMLHttpRequest<\/a> (XHR). El uso de objetos XMLHttpRequest no es muy amigable y por ello en su lugar ha sido muy popular el uso de los m\u00e9todos ajax()<\/em><\/strong>, post()<\/em><\/strong>, get()<\/em><\/strong>, load()<\/em><\/strong>, etc. que ofrece jQuery para realizar peticiones AJAX.<\/p>\n

Fetch API se basa en el uso de promesas JavaScript<\/a><\/strong>, por lo que resulta necesario familiarizarse primero con ellas antes de utilizar este API. El uso de promesas permite un c\u00f3digo m\u00e1s claro, limpio y sencillo<\/strong>, que mediante el uso del objeto XMLHttpRequest. Sin embargo, Fetch API tiene ciertas limitaciones que no tiene el objeto XMLHttpRequest<\/strong>, como puede ser la imposibilidad de monitorizar el progreso de la petici\u00f3n AJAX (\u00fatil para cuando transferimos un archivo grande al servidor, por ejemplo), o la imposibilidad de abortar\/cancelar una petici\u00f3n AJAX.<\/p>\n

\u00bfC\u00f3mo hacer AJAX con XMLHttpRequest?<\/h2>\n

Antes de ver c\u00f3mo funciona Fetch, es interesante ver c\u00f3mo es el c\u00f3digo para realizar una sencilla petici\u00f3n AJAX de forma cl\u00e1sica, sin uso de librer\u00edas como jQuery, mediante el uso de XMLHttpRequest.<\/p>\n

En los siguientes ejemplos, vamos a usar la siguiente funci\u00f3n que nos va a permitir incrustar un script al final del documento, de forma que dicho script se ejecutar\u00e1 inmediatamente:<\/p>\n

function loadScr(code) {\r\n  \/\/ a\u00f1ade un elemento script al final del documento\r\n  \/\/ con el c\u00f3digo fuente indicado por par\u00e1metro\r\n  var scr = document.createElement(\"script\");\r\n  scr.innerHTML = code;\r\n  document.body.append(scr);\r\n}\r\n<\/pre>\n
Veamos ahora un sencillo ejemplo de c\u00f3mo cargar un script por c\u00f3digo mediante una petici\u00f3n AJAX as\u00edncrona, usando el objeto XMLHttpRequest:<\/p>\n
\/\/ creamos la petici\u00f3n AJAX\r\nvar req = new XMLHttpRequest();\r\n\/\/ callback que se ejecutar\u00e1 si la petici\u00f3n se resuelve correctamente\r\nreq.onload = function() {\r\n  \/\/ a\u00f1adimos script al documento\r\n  loadScr(this.responseText);\r\n};\r\n\/\/ callback que se ejecutar\u00e1 si la petici\u00f3n NO se logra resolver correctamente\r\nreq.onerror = function() {\r\n  console.log(\"Error al realizar la petici\u00f3n AJAX.\");\r\n};\r\n\/\/ realizamos la petici\u00f3n\r\nreq.open('get', '.\/js\/script.js', true);\r\nreq.send();\r\n<\/pre>\n
Este ejemplo pedir\u00e1 al servidor el archivo script.js de la carpeta \/js y lo a\u00f1adir\u00e1 como elemento <script> de forma que se ejecutar\u00e1 tan pronto sea cargado. Esto puede resultar \u00fatil si queremos cargar scripts bajo demanda en lugar de por defecto.<\/p>\n
NOTA: Hay que recordar que como estamos usando AJAX, para que estos ejemplos funcionen deberemos de abrir la p\u00e1gina HTML desde un servidor Web (usando XAMPP, por ejemplo), y no directamente desde el navegador.<\/em><\/strong><\/p>\n
Por el anterior ejemplo, puede parecer que el uso del objeto XMLHttpRequest no es muy complicado, pero el funcionamiento mediante callbacks pronto revela sus limitaciones si, por ejemplo, en lugar de un script, queremos cargar varios scripts de forma consecutiva en un orden concreto, entrando de este modo en lo que se conoce como el infierno de las callbacks (callback hell). Veamos un ejemplo de este problema;<\/p>\n
function errorAjax() {\r\n  console.log(\"Error al realizar la petici\u00f3n AJAX.\");\r\n}\r\n\r\nvar req1 = new XMLHttpRequest();\r\nreq1.onload = function() {\r\n  loadScr(this.responseText);\r\n  \/\/ pedimos un segundo script\r\n  var req2 = new XMLHttpRequest();\r\n  req2.onload = function() {\r\n    loadScr(this.responseText);\r\n    \/\/ pedimos un tercer script\r\n    var req3 = new XMLHttpRequest();\r\n    req3.onload = function() {\r\n      loadScr(this.responseText);\r\n    }\r\n    req3.onerror = errorAjax;\r\n    req3.open('get', '.\/js\/script3.js', true);\r\n    req3.send();\r\n  }\r\n  req2.onerror = errorAjax;\r\n  req2.open('get', '.\/js\/script2.js', true);\r\n  req2.send();\r\n};\r\nreq1.onerror = errorAjax;\r\nreq1.open('get', '.\/js\/script1.js', true);\r\nreq1.send();\r\n<\/pre>\n
Tal y como puede observarse este c\u00f3digo es bastante feo, poco claro y dif\u00edcil de leer.<\/p>\n
\u00bfC\u00f3mo hacer AJAX con la API Fetch?<\/h2>\n
Veamos de nuevo el ejemplo de c\u00f3mo cargar un \u00fanico script, pero esta vez usando Fetch.<\/p>\n
fetch('.\/js\/script.js')\r\n  .then(function(response) {\r\n    \/\/ si la promesa de la petici\u00f3n fetch se ha resuelto\r\n    \/\/ correctamente entrar\u00e1 aqu\u00ed.\r\n    \/\/ sin embargo, tal vez el archivo no exista en el servidor (c\u00f3digo 404)\r\n    \/\/ o alg\u00fan otro problema, por ello debemos de asegurarnos de que todo\r\n    \/\/ ha ido OK (c\u00f3digo 2XX)\r\n    if (response.ok) {\r\n      \/\/ response.text() devuelve otra promesa con el contenido\r\n      \/\/ devuelto por el servidor en formato texto\r\n      return response.text();\r\n    } else {\r\n      \/\/ el servidor ha respondido la petici\u00f3n, pero se ha producido alg\u00fan\r\n      \/\/ problema y no ha podido enviar el recurso solicitado;\r\n      \/\/ como por ejemplo que el archivo no existe\r\n      return Promise.reject(response.statusText);\r\n    }\r\n  })\r\n  .then(function(responseText) {\r\n    \/\/ si la promesa con el texto del script se ha resuelto\r\n    \/\/ correctamente entrar\u00e1 aqu\u00ed\r\n    loadScr(responseText);\r\n  })\r\n  .catch(function(error) {\r\n    \/\/ ha habido alg\u00fan error al resolver alguna de las promesas\r\n    console.log(\"Error al realizar la petici\u00f3n AJAX: \" + error);\r\n  }\r\n);\r\n<\/pre>\n
La funci\u00f3n fetch()<\/strong> devuelve una promesa. Si esa promesa se resuelve correctamente (el primer m\u00e9todo then<\/strong>), es que hemos logrado pedir el recurso deseado al servidor. Pero existe la posibilidad de que el servidor no pueda enviarnos el recurso por alg\u00fan motivo, como por ejemplo, que el recurso solicitado no exista. Es por ello que debemos de comprobar el valor de la propiedad ok<\/strong>, para saber si hemos obtenido realmente el recurso solicitado. Esto es diferente a la forma en la que trabajan los m\u00e9todos AJAX de jQuery, ya que en jQuery si el recurso no existe, se considera un error.<\/p>\n
Tanto si hemos obtenido realmente el recurso como si no, debemos de devolver una segunda promesa. Con return response.text() estamos devolviendo una promesa con la informaci\u00f3n devuelta por el servidor en formato texto. Mientras que con return Promise.reject() estamos devolviendo una promesa con un mensaje de error.<\/p>\n
Si la segunda promesa se resuelve correctamente, se ejecutar\u00e1 el segundo m\u00e9todo then<\/strong>.<\/p>\n
Obviamente, la promesa que hemos devuelto con Promise.reject() nunca se resuelve correctamente por lo que siempre se ejecutar\u00e1 el catch<\/strong>. Mientras que en el caso de response.text(), ser\u00eda bastante raro que esa promesa no resolviera correctamente, por lo que se ejecutar\u00e1 el segundo m\u00e9todo then<\/strong>, y ah\u00ed ya tendremos acceso al texto que ha devuelto el servidor con el contenido del script que hemos solicitado. De todos modos, en caso de fallo tambi\u00e9n se ejecutar\u00e1 el m\u00e9todo catch<\/strong>.<\/p>\n
Veamos ahora como ser\u00eda el ejemplo de la carga secuencial de 3 scripts con fetch:<\/p>\n
function ajaxResponse(response) {\r\n  if (response.ok) return response.text();\r\n    else return Promise.reject(response.statusText);\r\n}\r\n\r\nfetch('.\/js\/script1.js')\r\n.then(ajaxResponse)\r\n.then(function(responseText) {\r\n  loadScr(responseText);\r\n  \/\/ pedimos segundo script\r\n  return fetch('.\/js\/script2.js');\r\n})\r\n.then(ajaxResponse)\r\n.then(function(responseText) {\r\n  loadScr(responseText);\r\n  \/\/ pedimos tercer script\r\n  return fetch('.\/js\/script3.js');\r\n})\r\n.then(ajaxResponse)\r\n.then(function(responseText) {\r\n  loadScr(responseText);\r\n})\r\n.catch(function(error) {\r\n  \/\/ ha habido alg\u00fan error al resolver alguna de las promesas\r\n  console.log(\"Error al realizar la petici\u00f3n AJAX: \" + error);\r\n});\r\n<\/pre>\n
Bastante mejor, y eso que tenemos que lidiar con un par de promesas por cada script que pedimos.<\/p>\n
Sin embargo, sigue siendo un c\u00f3digo algo enrevesado para algo tan repetitivo. Afortunadamente, el uso de promesas se ha simplificado recientemente gracias a Async\/Await<\/strong><\/a>.<\/p>\n
Vamos a volver a escribir el ejemplo pero esta vez usando Async\/Await. Adem\u00e1s, esta vez vamos a colocar todos los scripts que queremos cargar en un array de forma que cuando se termine de cargar un script se pida el siguiente. Esto nos va a permitir a\u00f1adir m\u00e1s scripts de forma mucho m\u00e1s sencilla que en los ejemplos anteriores.<\/p>\n
(async () => {\r\n  try {\r\n    var scripts = [\"script1.js\", \"script2.js\", \"script3.js\"];\r\n    for (scr of scripts) {\r\n      var response = await fetch('.\/js\/' + scr);\r\n      if (response.ok) {\r\n        var responseText = await response.text();\r\n        loadScr(responseText);\r\n      } else {\r\n        throw new Error(response.statusText);\r\n      }\r\n    }\r\n  } catch (err) {\r\n    console.log(\"Error al realizar la petici\u00f3n AJAX: \" + err.message);\r\n  }\r\n})();\r\n<\/pre>\n
Mucho m\u00e1s claro, sencillo y vers\u00e1til que el ejemplo usando el objeto XMLHttpRequest, \u00bfno?<\/p>\n
Lo bueno de Aync\/Await es que podemos escribir un c\u00f3digo similar al que escribir\u00edamos si las operaciones no fueran as\u00edncronas, y por lo tanto m\u00e1s lineal y sencillo de seguir.<\/p>\n
Conclusiones<\/h2>\n
Hemos visto un poco como de diferentes pueden ser el objeto XMLHttpRequest y la API Fetch. Obviamente, ambos son m\u00e1s complejos y tienen mayor funcionalidad de la que hemos visto.<\/p>\n
En un pr\u00f3ximo art\u00edculo profundizaremos un poco en este API y veremos como enviar y recibir datos, como enviar la informaci\u00f3n de un formulario con Fetch, y algunas cosillas m\u00e1s.<\/p>\n","protected":false},"excerpt":{"rendered":"
Fetch API es una forma alternativa de realizar peticiones AJAX al uso del ya cl\u00e1sico objeto XMLHttpRequest (XHR). El uso de objetos XMLHttpRequest no es muy amigable y por ello en su lugar ha sido muy popular el uso de los m\u00e9todos ajax(), post(), get(),…<\/p>\n","protected":false},"author":23,"featured_media":8634,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_ef_editorial_meta_date_first-draft-date":"","_ef_editorial_meta_paragraph_assignment":"","_ef_editorial_meta_checkbox_needs-photo":"","_ef_editorial_meta_number_word-count":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[7,5],"tags":[694,253,679],"class_list":["post-8629","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","category-programacion","tag-fetch","tag-javascript","tag-promesas"],"yoast_head":"\nAJAX con Fetch API - Blog Escola Espai<\/title>\n<meta name=\"description\" content=\"En este art\u00edculo veremos como Fetch API nos permite una nueva forma de realizar peticiones AJAX mediante el uso de promesas JavaScript.\" \/>\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.espai.es\/blog\/2019\/07\/ajax-con-fetch-api\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"AJAX con Fetch API - Blog Escola Espai\" \/>\n<meta property=\"og:description\" content=\"En este art\u00edculo veremos como Fetch API nos permite una nueva forma de realizar peticiones AJAX mediante el uso de promesas JavaScript.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.espai.es\/blog\/2019\/07\/ajax-con-fetch-api\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Escola Espai\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-15T11:54:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-09-13T18:22:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/06\/fetch.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Abel Camarena\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Abel Camarena\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.espai.es\/blog\/2019\/07\/ajax-con-fetch-api\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2019\/07\/ajax-con-fetch-api\/\"},\"author\":{\"name\":\"Abel Camarena\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897\"},\"headline\":\"AJAX con Fetch API\",\"datePublished\":\"2019-07-15T11:54:07+00:00\",\"dateModified\":\"2021-09-13T18:22:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2019\/07\/ajax-con-fetch-api\/\"},\"wordCount\":938,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2019\/07\/ajax-con-fetch-api\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/06\/fetch.jpg\",\"keywords\":[\"fetch\",\"javascript\",\"promesas\"],\"articleSection\":[\"Dise\u00f1o Web\",\"Programaci\u00f3n\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.espai.es\/blog\/2019\/07\/ajax-con-fetch-api\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.espai.es\/blog\/2019\/07\/ajax-con-fetch-api\/\",\"url\":\"https:\/\/www.espai.es\/blog\/2019\/07\/ajax-con-fetch-api\/\",\"name\":\"AJAX con Fetch API - Blog Escola Espai\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2019\/07\/ajax-con-fetch-api\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2019\/07\/ajax-con-fetch-api\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/06\/fetch.jpg\",\"datePublished\":\"2019-07-15T11:54:07+00:00\",\"dateModified\":\"2021-09-13T18:22:14+00:00\",\"author\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897\"},\"description\":\"En este art\u00edculo veremos como Fetch API nos permite una nueva forma de realizar peticiones AJAX mediante el uso de promesas JavaScript.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2019\/07\/ajax-con-fetch-api\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.espai.es\/blog\/2019\/07\/ajax-con-fetch-api\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/2019\/07\/ajax-con-fetch-api\/#primaryimage\",\"url\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/06\/fetch.jpg\",\"contentUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/06\/fetch.jpg\",\"width\":1000,\"height\":500,\"caption\":\"fetch\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.espai.es\/blog\/2019\/07\/ajax-con-fetch-api\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.espai.es\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"AJAX con Fetch API\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.espai.es\/blog\/#website\",\"url\":\"https:\/\/www.espai.es\/blog\/\",\"name\":\"Blog Escola Espai\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.espai.es\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897\",\"name\":\"Abel Camarena\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/035501b0f14e120b1a49121758e2056b8d589fc43b9d3c3ad3670a197a90dddf?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/035501b0f14e120b1a49121758e2056b8d589fc43b9d3c3ad3670a197a90dddf?s=96&d=mm&r=g\",\"caption\":\"Abel Camarena\"},\"sameAs\":[\"http:\/\/www.espai.es\"],\"url\":\"https:\/\/www.espai.es\/blog\/author\/abel\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"AJAX con Fetch API - Blog Escola Espai","description":"En este art\u00edculo veremos como Fetch API nos permite una nueva forma de realizar peticiones AJAX mediante el uso de promesas JavaScript.","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.espai.es\/blog\/2019\/07\/ajax-con-fetch-api\/","og_locale":"es_ES","og_type":"article","og_title":"AJAX con Fetch API - Blog Escola Espai","og_description":"En este art\u00edculo veremos como Fetch API nos permite una nueva forma de realizar peticiones AJAX mediante el uso de promesas JavaScript.","og_url":"https:\/\/www.espai.es\/blog\/2019\/07\/ajax-con-fetch-api\/","og_site_name":"Blog Escola Espai","article_published_time":"2019-07-15T11:54:07+00:00","article_modified_time":"2021-09-13T18:22:14+00:00","og_image":[{"width":1000,"height":500,"url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/06\/fetch.jpg","type":"image\/jpeg"}],"author":"Abel Camarena","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Abel Camarena","Tiempo de lectura":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.espai.es\/blog\/2019\/07\/ajax-con-fetch-api\/#article","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/2019\/07\/ajax-con-fetch-api\/"},"author":{"name":"Abel Camarena","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897"},"headline":"AJAX con Fetch API","datePublished":"2019-07-15T11:54:07+00:00","dateModified":"2021-09-13T18:22:14+00:00","mainEntityOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2019\/07\/ajax-con-fetch-api\/"},"wordCount":938,"commentCount":0,"image":{"@id":"https:\/\/www.espai.es\/blog\/2019\/07\/ajax-con-fetch-api\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/06\/fetch.jpg","keywords":["fetch","javascript","promesas"],"articleSection":["Dise\u00f1o Web","Programaci\u00f3n"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.espai.es\/blog\/2019\/07\/ajax-con-fetch-api\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.espai.es\/blog\/2019\/07\/ajax-con-fetch-api\/","url":"https:\/\/www.espai.es\/blog\/2019\/07\/ajax-con-fetch-api\/","name":"AJAX con Fetch API - Blog Escola Espai","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2019\/07\/ajax-con-fetch-api\/#primaryimage"},"image":{"@id":"https:\/\/www.espai.es\/blog\/2019\/07\/ajax-con-fetch-api\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/06\/fetch.jpg","datePublished":"2019-07-15T11:54:07+00:00","dateModified":"2021-09-13T18:22:14+00:00","author":{"@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897"},"description":"En este art\u00edculo veremos como Fetch API nos permite una nueva forma de realizar peticiones AJAX mediante el uso de promesas JavaScript.","breadcrumb":{"@id":"https:\/\/www.espai.es\/blog\/2019\/07\/ajax-con-fetch-api\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.espai.es\/blog\/2019\/07\/ajax-con-fetch-api\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/2019\/07\/ajax-con-fetch-api\/#primaryimage","url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/06\/fetch.jpg","contentUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/06\/fetch.jpg","width":1000,"height":500,"caption":"fetch"},{"@type":"BreadcrumbList","@id":"https:\/\/www.espai.es\/blog\/2019\/07\/ajax-con-fetch-api\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.espai.es\/blog\/"},{"@type":"ListItem","position":2,"name":"AJAX con Fetch API"}]},{"@type":"WebSite","@id":"https:\/\/www.espai.es\/blog\/#website","url":"https:\/\/www.espai.es\/blog\/","name":"Blog Escola Espai","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.espai.es\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897","name":"Abel Camarena","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/035501b0f14e120b1a49121758e2056b8d589fc43b9d3c3ad3670a197a90dddf?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/035501b0f14e120b1a49121758e2056b8d589fc43b9d3c3ad3670a197a90dddf?s=96&d=mm&r=g","caption":"Abel Camarena"},"sameAs":["http:\/\/www.espai.es"],"url":"https:\/\/www.espai.es\/blog\/author\/abel\/"}]}},"jetpack_featured_media_url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/06\/fetch.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/8629","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/users\/23"}],"replies":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/comments?post=8629"}],"version-history":[{"count":5,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/8629\/revisions"}],"predecessor-version":[{"id":12271,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/8629\/revisions\/12271"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media\/8634"}],"wp:attachment":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media?parent=8629"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/categories?post=8629"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/tags?post=8629"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}