Zobrazení Fetch API reakce v okně prohlížeče

0

Otázka

Jsem pomocí Fetch API dotazu některé webové služby, protože musím ručně přidat X-Custom záhlaví. Všechny příklady, které jsem našel ohledně zobrazení výsledku použít console.log do DevTools okna konzoly.

Nemám JavaScript zkušenosti, ale to bylo prostředkem ke konci, tak mám:

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

To se zobrazí na konzole, ale já bych to v okně prohlížeče, jako kdybych měl jednoduše navigovat na <url> a odpověď byla zobrazena. Dělá JavaScript povolit něco jako:

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

Jak bych zobrazit v okně prohlížeče, jako kdybych měl navigovat na adresu URL pomocí vyhledávací lišty?

Aktualizace

Tak jsem byly úspěšné načtení některé výsledky jako tak:

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

A odpovědi se zobrazí pro kontrolu; to je JSON odpověď, takže jsem doufal, že response.Json() bude fungovat, ale je to jen zobrazí [object Object]. Jestli můžu figur eout, jak "pěkně display" JSON, máme řešení.

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

Nejlepší odpověď

2

Máte většinou na to přišel, ale pokud můžete použít JSON.stringify dostat hezčí formátování. Pro jemnosti, zabalil jsem výsledek v HTML <pre> tag, ale můžete použít cokoliv, co má smysl pro váš případ použití.

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>`
        });
    })

Tam je bezpečnostní upozornění, aby být vědomi. Přidáváte odpověď přímo na DOM bez dezinfekci výsledky, což může vést k XSS útoky (https://cheatsheetseries.owasp.org/cheatsheets/DOM_based_XSS_Prevention_Cheat_Sheet.html), Zatímco tento kód je zranitelný, je pravděpodobně menší škodlivý, vzhledem k tomu, vaše usecase.

Pro kód využity ve výrobě, existuje řada přístupů, aby se zabránilo tuto chybu zabezpečení, nejvíce obyčejné bytí uniknout libovolný řetězec budete-li vložit do DOM. Alternativou je analýza výsledků a vytváření HTML prvky, které chcete vložit, a pomocí innerTEXT za obsah poskytnutých z API.

2021-11-23 17:10:39

V jiných jazycích

Tato stránka je v jiných jazycích

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