{"id":8699,"date":"2019-09-15T15:54:55","date_gmt":"2019-09-15T13:54:55","guid":{"rendered":"https:\/\/www.espai.es\/blog\/?p=8699"},"modified":"2021-09-13T20:09:19","modified_gmt":"2021-09-13T18:09:19","slug":"como-enviar-y-recibir-datos-con-la-api-fetch","status":"publish","type":"post","link":"https:\/\/www.espai.es\/blog\/2019\/09\/como-enviar-y-recibir-datos-con-la-api-fetch\/","title":{"rendered":"\u00bfC\u00f3mo enviar y recibir datos con la API Fetch?"},"content":{"rendered":"

En un art\u00edculo anterior vimos el funcionamiento b\u00e1sico del API Fetch<\/a>, y en que se diferencia del objeto\u00a0XMLHttpRequest<\/a> (XHR).<\/p>\n

En dicho art\u00edculo nos limitamos a pedir una serie de archivos del servidor Web, concretamente archivos de tipo script. Pero AJAX tambi\u00e9n se usa para intercambiar informaci\u00f3n con el servidor. Por ejemplo, cuando estamos escribiendo una b\u00fasqueda en Google, se nos van sugiriendo posibles b\u00fasquedas; eso tambi\u00e9n es AJAX.<\/p>\n

Existen varias formas de intercambiar informaci\u00f3n con el servidor, pero una bastante recomendable consiste en usar el formato JSON.<\/p>\n

JSON es simplemente un formato de intercambio de informaci\u00f3n, como lo puedan ser otros como XML o CVS, donde la informaci\u00f3n se formatea del mismo modo que se escribe un objeto en JavaScript. JSON significa JavaScript Object Notation.<\/p>\n

Para poder enviar informaci\u00f3n al servidor, necesitamos indicar que informaci\u00f3n queremos enviar, de que forma la queremos enviar, etc.<\/p>\n

El m\u00e9todo fetch() tiene un segundo par\u00e1metro opcional en el que podemos indicar un objeto con varias opciones, entre ellas las que necesitamos para indicar todo esto.<\/p>\n

Para el pr\u00f3ximo ejemplo vamos a necesitar un archivo PHP llamado media.php<\/strong> que tendr\u00e1 el siguiente c\u00f3digo:<\/p>\n

<?php\r\nheader(\"Content-type: application\/json; charset=utf-8\");\r\n$input = json_decode(file_get_contents(\"php:\/\/input\"), true);\r\n$output = array(\"media\" => 0, \"html\" => \"\");\r\n\r\n$output[\"html\"] .= \"<h1>\".$input['titulo'].\"<\/h1>\";\r\n$output[\"html\"] .= \"<ul>\";\r\nforeach ($input[\"numeros\"] as $value) {\r\n  $output[\"media\"] += $value;\r\n  $output[\"html\"] .= \"<li>\".$value.\"<\/li>\";\r\n}\r\n$output[\"media\"] \/= count($input[\"numeros\"]);\r\n$output[\"html\"] .= \"<\/ul>\";\r\necho json_encode($output);\r\n?>\r\n<\/pre>\n
Ahora veamos la parte de JavaScript, de nuevo y por simplicidad usaremos Async\/Await:<\/p>\n
(async () => {\r\n    try {\r\n        \/\/ en el objeto \u201cdatos\u201d tenemos los datos que vamos a enviar al servidor\r\n        \/\/ en este ejemplo tenemos dos datos; un t\u00edtulo y un array de n\u00fameros\r\n        var datos = { titulo: \"Listado de n\u00fameros\", numeros: [2,4,6,8,10] };\r\n        \/\/ en el objeto init tenemos los par\u00e1metros de la petici\u00f3n AJAX\r\n        var init = {\r\n            \/\/ el m\u00e9todo de env\u00edo de la informaci\u00f3n ser\u00e1 POST\r\n            method: \"POST\",\r\n            headers: { \/\/ cabeceras HTTP\r\n                \/\/ vamos a enviar los datos en formato JSON\r\n                'Content-Type': 'application\/json'\r\n            },\r\n            \/\/ el cuerpo de la petici\u00f3n es una cadena de texto\r\n            \/\/ con los datos en formato JSON\r\n            body: JSON.stringify(datos) \/\/ convertimos el objeto a texto\r\n        };\r\n        \/\/ realizamos la petici\u00f3n AJAX usando fetch\r\n        \/\/ el primer par\u00e1metro es el recurso del servidor al que queremos acceder\r\n        \/\/ en este ejemplo, es un fichero php llamado media.php que se encuentra\r\n        \/\/ dentro de la carpeta .\/php y con el c\u00f3digo PHP que hay arriba.\r\n        \/\/ el segundo par\u00e1metro es el objeto init con la informaci\u00f3n sobre los\r\n        \/\/ datos que queremos enviar, el m\u00e9todo de envio, etc.\r\n        var response = await fetch('.\/php\/media.php', init);\r\n        if (response.ok) {\r\n            \/\/ si la petici\u00f3n se ha resuelto correctamente,\r\n            \/\/ intentamos resolver otra promesa que convierta\r\n            \/\/ lo que nos ha respondido el servidor en un objeto de JavaScript.\r\n            \/\/ si el servidor no ha enviado correctamente la informaci\u00f3n\r\n            \/\/ en formato JSON, no se podr\u00e1n convertir correctamente\r\n            \/\/ los datos a un objeto, por lo que la promesa fallar\u00e1\r\n            \/\/ y esto provocar\u00e1 un error.\r\n            var respuesta = await response.json();\r\n            \/\/ en este ejemplo, el servidor nos devuelve un objeto con dos datos,\r\n            \/\/ la media de los n\u00fameros enviados, y un fragmento de HTML\r\n            \/\/ con un el t\u00edtulo y una lista con los n\u00fameros\r\n            alert(\"La media es: \" + respuesta.media);\r\n            document.write(respuesta.html);\r\n            document.close();\r\n        } else {\r\n            throw new Error(response.statusText);\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
En este ejemplo, el servidor genera la informaci\u00f3n en formato JSON a partir de la informaci\u00f3n que env\u00eda el navegador del usuario (la lista de n\u00fameros y el t\u00edtulo).<\/p>\n
Si simplemente queremos acceder a un archivo JSON que ya existe en el servidor,\u00a0 haremos lo mismo que cuando quer\u00edamos solicitar un script del servidor, con la \u00fanica diferencia de que, para la segunda promesa, en lugar de usar response.text()<\/strong> usaremos response.json()<\/strong> para que nos convierta el texto devuelto por el servidor en un objeto JavaScript.<\/p>\n
(async () => {\r\n  try {\r\n    var response = await fetch('.\/json\/comarques.json');\r\n    if (response.ok) {\r\n      var datos = await response.json();\r\n      console.log(datos); \/\/ mostramos el objeto en la consola del navegador\r\n      document.write(\"<pre>\"+JSON.stringify(datos, null, 2)+\"<\/pre>\");\r\n      document.close(); \/\/ y en el documento HTML\r\n    } else {\r\n      throw new Error(response.statusText);\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
Opciones de Fetch<\/h2>\n
Ya hemos visto que fetch acepta como segundo par\u00e1metro un objeto con varias propiedades. Algunas de las m\u00e1s interesantes son las siguientes:<\/p>\n