Estoy usando Fetch API para consultar algunos servicios web, ya que necesito agregar manualmente encabezados X-Custom . Todos los ejemplos que he encontrado con respecto a mostrar el resultado usan console.log en la ventana de la consola DevTools.
No tengo experiencia con JavaScript, pero esto era un medio para un fin, así que tengo:
fetch('<url>', { headers: myHeaders, method: 'GET', credentials: 'include' }).then( function(response) { response.json().then(function(data)) { console.log(data); }); }) Esto se muestra en la consola, pero me gustaría en la ventana del navegador como si simplemente hubiera navegado a <url> y se mostrara la respuesta. ¿JavaScript permite algo como:
fetch('<url>', { headers: myHeaders, method: 'GET', credentials: 'include' }).then( function(response) { response.json().then(function(data)) { this.browserWindow.display(data); }); })¿Cómo lo mostraría en la ventana del navegador como si hubiera navegado a la URL a través de la barra de búsqueda?
Actualizar
Así que he tenido éxito cargando algunos resultados así:
fetch('<url>', { headers: myHeaders, method: 'GET', credentials: 'include' }).then( function(response) { response.text().then(function(data)) { document.querySelector('body').innerHTML = data }); }) Y la respuesta aparece para inspección; es una respuesta JSON, así que esperaba que la response.Json() funcionara, pero solo muestra [object Object] . Si puedo averiguar cómo "mostrar bastante" el JSON, tenemos una solución.
En su mayoría lo ha descubierto, pero si puede usar JSON.stringify para obtener un mejor formato. Por sutilezas, envolví el resultado en la etiqueta HTML <pre> , pero puede usar lo que tenga sentido para su caso de uso.
fetch('<url>', { headers: myHeaders, method: 'GET', credentials: 'include' }).then( function(response) { response.json().then(function(data)) { document.querySelector('body').innerHTML = `<pre>${JSON.stringify(data, null, 2)}</pre>` }); })Hay una advertencia de seguridad a tener en cuenta. Está agregando una respuesta directamente al DOM sin desinfectar los resultados, lo que puede generar ataques XSS ( https://cheatsheetseries.owasp.org/cheatsheets/DOM_based_XSS_Prevention_Cheat_Sheet.html ) Si bien este código es vulnerable, probablemente sea una amenaza menor. dado su caso de uso.
Para el código utilizado en producción, existen varios enfoques para evitar esta vulnerabilidad, siendo el más común escapar de cualquier cadena que vaya a insertar en el DOM. Una alternativa es analizar los resultados y crear los elementos HTML que desea insertar y usar innerTEXT para el contenido proporcionado por la API.