Hubo un tiempo en que XMLHttpRequest se usaba para realizar solicitudes a la API. No inclu\u00eda promesas y no generaba c\u00f3digo JavaScript limpio. Con jQuery, puedes usar la sintaxis jQuery.ajax(), m\u00e1s limpia.<\/p>\n
Ahora, JavaScript cuenta con su propia forma integrada de realizar solicitudes a la API. Se trata de la API Fetch, un nuevo est\u00e1ndar para realizar solicitudes al servidor con promesas, pero que incluye funciones adicionales.<\/p>\n
En este tutorial, crear\u00e1 solicitudes GET y POST utilizando la API Fetch.<\/p>\n
Una forma de utilizar la API Fetch es pasar la URL de la API fetch() como par\u00e1metro:<\/p>\n
fetch(url)\r\n<\/code><\/pre>\n<\/div>\nEl m\u00e9todo fetch() devuelve una Promesa. Despu\u00e9s del m\u00e9todo fetch(), inserte el m\u00e9todo Promise then():<\/p>\n
\nfetch(url)\r\n.then(function() {\r\n\/\/ handle the response\r\n})<\/code><\/pre>\n<\/div>\nSi la Promesa devuelta se resuelve, se ejecuta la funci\u00f3n dentro del m\u00e9todo then(). Esta funci\u00f3n contiene c\u00f3digo para gestionar los datos recibidos de la API.<\/p>\n
Despu\u00e9s del m\u00e9todo then(), inserte el m\u00e9todo catch():<\/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>\nLa API que llamas con fetch() podr\u00eda estar da\u00f1ada o producirse alg\u00fan otro error. En tal caso, se devuelve la promesa rechazada. El m\u00e9todo catch se utiliza para gestionar el rechazo. Si se produce un error al llamar a tu API, se ejecutar\u00e1 el c\u00f3digo dentro de catch().<\/p>\n
Una vez que comprenda la sintaxis para usar la API Fetch, ahora puede pasar a usar fetch() en una API real.<\/p>\n
Paso 2: Usar Fetch para obtener datos de una API<\/h2>\n
El siguiente ejemplo de c\u00f3digo se basa en la API JSONPlaceholder. Con esta API, obtendr\u00e1 diez usuarios y los mostrar\u00e1 en la p\u00e1gina mediante JavaScript. Este tutorial recuperar\u00e1 los datos de la API JSONPlaceholder y los mostrar\u00e1 en los elementos de la lista de autores.<\/p>\n
Comience creando un archivo HTML y agregando un t\u00edtulo y una lista desordenada con identificaciones de autores:<\/p>\n
\n<h1>Authors<\/h1>\r\n<ul id=\"authors\"><\/ul><\/code><\/pre>\n<\/div>\nA\u00f1ade etiquetas de script al final de tu archivo HTML y usa un selector DOM para obtener el ul. Usa getElementById con los autores como argumento:<\/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>\nRecuerde que los autores crearon el ul id anterior.<\/p>\n
Luego crea una lista que sea un DocumentFragment:<\/p>\n
\n<script>\r\n\/\/ ...\r\nconst list = document.createDocumentFragment();\r\n<\/script><\/code><\/pre>\n<\/div>\nTodos los elementos de lista adjuntos se a\u00f1adir\u00e1n a la lista. Un fragmento de documento no forma parte de la estructura de \u00e1rbol del documento activo. Esto tiene la ventaja de que el redibujado no afecta al rendimiento cuando cambia el modelo de objetos del documento.<\/p>\n
Cree una variable constante llamada url que contenga la URL de la API que devuelve diez usuarios aleatorios:<\/p>\n
\n<script>\r\n\/\/ ...\r\nconst url = 'https:\/\/jsonplaceholder.typicode.com\/users';\r\n<\/script><\/code><\/pre>\n<\/div>\nAhora, utilizando la API Fetch, llame a la API JSONPlaceholder usando fetch() con la URL como argumento:<\/p>\n
\n<script>\r\n\/\/ ...\r\nfetch(url)\r\n<\/script><\/code><\/pre>\n<\/div>\nEst\u00e1s llamando a la API Fetch y pasando la URL a la API JSONPlaceholder. Se recibe la respuesta. Sin embargo, esta no es JSON, sino un objeto con un conjunto de m\u00e9todos que se pueden usar seg\u00fan el uso que se quiera dar a la informaci\u00f3n. Usa el m\u00e9todo json() para convertir el objeto devuelto a JSON.<\/p>\n
Agregue un m\u00e9todo then() que contenga una funci\u00f3n con un par\u00e1metro llamado respuesta:<\/p>\n
\n<script>\r\n\/\/ ...\r\nfetch(url)\r\n.then((response) => {})\r\n<\/script><\/code><\/pre>\n<\/div>\nEl par\u00e1metro de respuesta toma el valor del objeto devuelto por fetch(url). Utilice el m\u00e9todo json() para convertir la respuesta a datos JSON:<\/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>\nLos datos JSON a\u00fan deben procesarse. Agregue otra instrucci\u00f3n `then()` con una funci\u00f3n que acepte un argumento llamado `data`:<\/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>\nEn esta funci\u00f3n, crea una variable llamada autor que se establece igual a los datos:<\/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>\nPara cada autor en autores, se desea crear un elemento de lista que muestre su nombre. El m\u00e9todo map() es adecuado para este patr\u00f3n:<\/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>\nEn la funci\u00f3n de mapa, crea una variable llamada li que sea igual a createElement con li (el elemento HTML) como argumento. Crea tambi\u00e9n un h2 para el nombre y un span para el correo electr\u00f3nico:<\/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>\nEl elemento h2 contendr\u00e1 el nombre del autor. El elemento span contendr\u00e1 su correo electr\u00f3nico. El atributo innerHTML y la interpolaci\u00f3n de cadenas permiten hacer esto:<\/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>\nLuego, agregue estos elementos DOM con appendChild:<\/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>\nTenga en cuenta que cada elemento de la lista se a\u00f1ade a la lista DocumentFragment. Una vez completado el mapa, la lista se a\u00f1ade al elemento de lista desordenada ul.<\/p>\n
Con ambas funciones then() completadas, puedes agregar la funci\u00f3n catch(). Esta funci\u00f3n registrar\u00e1 cualquier posible error en la consola:<\/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>\nEste es el c\u00f3digo completo de la solicitud que creaste:<\/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>\nAcabas de realizar una solicitud GET correctamente utilizando las API JSONPlaceholder y Fetch. A continuaci\u00f3n, realizar\u00e1s solicitudes POST.<\/p>\n
Paso 3 \u2013 Manejo de solicitudes POST<\/h2>\n
La b\u00fasqueda se realiza de forma predeterminada con solicitudes GET, pero puedes usar cualquier otro tipo de solicitud, modificar encabezados y enviar datos. Vamos a crear una solicitud POST.<\/p>\n
Primero, incluya una variable constante que contenga el enlace a la API JSONPlaceholder:<\/p>\n
\nconst url = 'https:\/\/jsonplaceholder.typicode.com\/users';\r\n<\/code><\/pre>\n<\/div>\nA continuaci\u00f3n, debes configurar tu objeto y pasarlo como segundo argumento a la funci\u00f3n de b\u00fasqueda. Este ser\u00e1 un objeto llamado data con la clave Sammy (o tu nombre) y el valor:<\/p>\n
\n\/\/ ...\r\nlet data = {\r\nname: 'Sammy'\r\n}<\/code><\/pre>\n<\/div>\nDado que se trata de una solicitud POST, debe especificarla expl\u00edcitamente. Cree un objeto llamado fetchData:<\/p>\n
\n\/\/ ...\r\nlet fetchData = {\r\n}<\/code><\/pre>\n<\/div>\nEste objeto debe contener tres claves: m\u00e9todo, cuerpo y encabezado:<\/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>\nLa clave del m\u00e9todo tendr\u00e1 el valor "POST". El cuerpo se establecer\u00e1 en el formato JSON.stringify del objeto de datos reci\u00e9n creado. Los encabezados tendr\u00e1n el valor "Content-Type": "application\/json; charset=UTF-8".<\/p>\n
La interfaz de encabezados es una caracter\u00edstica de la API Fetch que le permite realizar acciones en los encabezados de solicitud y respuesta HTTP.<\/p>\n
Al colocar este c\u00f3digo, se puede realizar una solicitud POST mediante la API Fetch. Se agregan la URL, los datos de b\u00fasqueda y los argumentos a la solicitud POST de b\u00fasqueda:<\/p>\n
\n\/\/ ...\r\nfetch(url, fetchData)<\/code><\/pre>\n<\/div>\nLa funci\u00f3n then() contiene c\u00f3digo que maneja la respuesta recibida de la API JSONPlaceholder:<\/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>\nEste es el c\u00f3digo completo de la solicitud que creaste:<\/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>\nTambi\u00e9n puedes pasar fetch() a un objeto Request.<\/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>\nCon este enfoque, la solicitud se puede utilizar como el \u00fanico argumento para fetch(), reemplazando url y fetchData.<\/p>\n
Ahora conoce dos formas de crear y ejecutar solicitudes POST con la API Fetch.<\/p>\n
Resultado<\/h2>\n
Si bien la API Fetch a\u00fan no es compatible con todos los navegadores, es una excelente alternativa a XMLHttpRequest.<\/p>","protected":false},"excerpt":{"rendered":"La introducci\u00f3n se produjo cuando se utilizaba XMLHttpRequest para realizar solicitudes a la API. No inclu\u00eda Promesas y...","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\/es\/tutorials\/how-to-use-the-javascript-fetch-api-to-get-data\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\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\/es\/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=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutos\" \/>\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\":\"es\",\"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\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/how-to-use-the-javascript-fetch-api-to-get-data\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@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\":\"es\"},{\"@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\":\"es\",\"@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\\\/es\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"C\u00f3mo usar la API Fetch de JavaScript para recuperar datos - Blog de ITPiran","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\/es\/tutorials\/how-to-use-the-javascript-fetch-api-to-get-data\/","og_locale":"es_ES","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\/es\/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":{"Escrito por":"admin","Tiempo de lectura":"9 minutos"},"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":"es","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":"C\u00f3mo usar la API Fetch de JavaScript para recuperar datos - Blog de 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":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.itpiran.net\/blog\/tutorials\/how-to-use-the-javascript-fetch-api-to-get-data\/"]}]},{"@type":"ImageObject","inLanguage":"es","@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":"Blog de ITPiran","description":"Noticias y art\u00edculos sobre comercio sostenible en Ir\u00e1n","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":"es"},{"@type":"Organization","@id":"https:\/\/www.itpiran.net\/blog\/#organization","name":"Blog sobre negocios iran\u00edes sostenibles","alternateName":"ITPIran Blog","url":"https:\/\/www.itpiran.net\/blog\/","logo":{"@type":"ImageObject","inLanguage":"es","@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":"administraci\u00f3n","url":"https:\/\/www.itpiran.net\/blog\/es\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/posts\/16673","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/comments?post=16673"}],"version-history":[{"count":1,"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/posts\/16673\/revisions"}],"predecessor-version":[{"id":16675,"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/posts\/16673\/revisions\/16675"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/media\/16676"}],"wp:attachment":[{"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/media?parent=16673"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/categories?post=16673"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/tags?post=16673"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}