Zpracování XHR JSON Response ve vanilla JavaScriptu

V dřívějším článku jsem psal o tom, jak vytvořit požadavek JSON pomocí XHR ve vanilla JavaScript.

JSON je široce používaný formát pro odpověď rozhraní API. Data JSON jsou uložena jako páry klíč–hodnota podobné vlastnostem objektu JavaScript, oddělené čárkami, složenými závorkami a hranatými závorkami.

Když odešlete požadavek JSON pomocí XHR, data odpovědi lze načíst z responseText vlastnost na XMLHttpRequest objekt:

const xhr = new XMLHttpRequest();

// ...

xhr.onload = () => {
    const data = xhr.responseText;
};

Zde je úplný kód pro požadavek JSON:

const xhr = new XMLHttpRequest();

xhr.onload = () => {
    const data = xhr.responseText;

    // log response
    console.log(data);
};

// create and send the reqeust
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts');
xhr.send();

Výše uvedený kód by měl fungovat dobře a zaznamenat odpověď na konzoli. Je tu však drobný problém. xhr.responseText vrátí řetězec, i když je odpověď vrácená rozhraním API ve formátu JSON.

Existuje několik způsobů, jak tento problém vyřešit. Pojďme se na ně podívat.

Použití rozhraní Fetch API

Fetch API je moderní alternativou k XHR pro odesílání asynchronních HTTP požadavků v JavaScriptu. Podporuje také sliby, což je další dobrá věc pro zpracování asynchronních požadavků v JavaScriptu.

Zde je návod, jak můžete pomocí rozhraní Fetch API načíst seznam příspěvků z JSONPlaceholder:

fetch('https://jsonplaceholder.typicode.com/posts')
    .then(res => res.json())
    .then(res => console.log(res))
    .catch(err => console.error(err));

Starší prohlížeče rozhraní Fetch API nepodporují. Toto řešení tedy používejte pouze v případě, že nepotřebujete podporovat staré prohlížeče, jako je Internet Explorer.

Pomocí responseType Vlastnost

Moderní prohlížeče umožňují používat responseType vlastnost na XMLHttpRequest objekt pro nastavení očekávaného formátu odpovědi. XHR automaticky analyzuje tělo odpovědi podle zadaného formátu. Poté k němu můžete přistupovat prostřednictvím response vlastnost, jak je znázorněno v následujícím příkladu:

const xhr = new XMLHttpRequest();

// specify response format
xhr.responseType = 'json';

xhr.onload = () => {
    const data = xhr.response;

    // log response
    console.log(data);
};

// create and send the reqeust
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts');
xhr.send();

responseType = 'json' není podporován IE 11 a staršími verzemi.

Pomocí JSON.parse() Metoda

Pro podporu starších prohlížečů je nejlepším řešením použít metodu JSON.parse() k převodu řetězce vráceného responseText na objekt JSON:

const xhr = new XMLHttpRequest();

xhr.onload = () => {
    const data = JSON.parse(xhr.responseText);

    // log response
    console.log(data);
};

// create and send the reqeust
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts');
xhr.send();

Výše uvedený kód by měl fungovat v jakémkoli prohlížeči, který podporuje XMLHttpRequest a JSON .