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
.