Exibindo de Busca API resposta na janela do browser

0

Pergunta

Eu estou usando a Busca de API para consulta de alguns serviços da web, desde que eu precisa adicionar manualmente X-Custom cabeçalhos. Todos os exemplos que eu encontrei sobre a apresentar o resultado de uso console.log no DevTools janela de console.

Eu não tenho nenhuma JavaScript experiência, mas este era um meio para um fim, então eu tenho:

fetch('<url>', {
    headers: myHeaders,
    method: 'GET',
    credentials: 'include'
}).then(
    function(response) {
        response.json().then(function(data)) {
            console.log(data);
        });
    })

Este não apresentar a consola, mas eu gostaria que ele na janela do navegador, como se eu tivesse simplesmente navegar <url> e a resposta foi apresentada. Não habilitar o JavaScript algo como:

fetch('<url>', {
        headers: myHeaders,
        method: 'GET',
        credentials: 'include'
    }).then(
        function(response) {
            response.json().then(function(data)) {
                this.browserWindow.display(data);
            });
        })

Como eu poderia exibi-la na janela do navegador, como se tivesse de navegar para a URL através da barra de pesquisa?

Atualização

Então, eu tenho sido bem sucedido carregamento de alguns resultados como:

fetch('<url>', {
    headers: myHeaders,
    method: 'GET',
    credentials: 'include'
}).then(
    function(response) {
        response.text().then(function(data)) {
            document.querySelector('body').innerHTML = data
        });
    })

E a resposta é apresentada para inspeção; é uma resposta JSON, então eu estava esperando response.Json() iria trabalhar, mas isso apenas mostra que [object Object]. Se eu posso figur eout como "tela bonita" JSON, nós temos uma solução.

fetch fetch-api google-chrome javascript
2021-11-22 17:50:43
1

Melhor resposta

2

Você, em sua maioria percebi isso, mas se você pode usar JSON.stringify para obter mais agradável de formatação. Para sutilezas, eu coloquei o resultado em HTML <pre> tag, mas você pode usar o que faz sentido para o 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>`
        });
    })

Há um truque para estar ciente. Você está adicionando uma resposta diretamente para o DOM, sem desinfecção de resultados, o que pode levar a ataques de XSS (https://cheatsheetseries.owasp.org/cheatsheets/DOM_based_XSS_Prevention_Cheat_Sheet.html) Enquanto este código é vulnerável, é, provavelmente, a uma menor ameaça, dado o seu caso de uso.

Para o código utilizado na produção, há uma série de abordagens para impedir que essa vulnerabilidade, sendo a mais comum para escapar de qualquer seqüência de caracteres que você irá inserir no DOM. Uma alternativa é analisar os resultados, e a criação de elementos HTML que você deseja inserir e utilizar innerTEXT para o conteúdo fornecido pela API.

2021-11-23 17:10:39

Em outros idiomas

Esta página está em outros idiomas

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................