JS - getJSON, ćwiczenie

Wykonujemy proste ćwiczenie, które ma nam utrwalić materiał z lekcji poprzednich, o async await oraz fetch API. Do dzieła.

Ok, zaczniemy od stworzenia stałych z URLami:

const API_URL = "https://api.chucknorris.io/jokes/random";
const API_URL_WRONG = "https://api.chucknorris.io/jokes/randomz";
const ANOTHER_WRONG_URL = "https://api.chucknorizz.io/jokes/random";

Ok, fajnie, piszemy funkcję async await:

async function getJSON(url){
    const response = await fetch(url);

    if(!response.ok)
        return [new Error("Response failed, check URL"), null];

    const resBody = await response.json();

    return [null, resBody];
}

Jak w node, zwracamy error i wynik. Wygląda ok, teraz aby sprawdzić, jak to działa, użyjemy async IIFE.

Tak – IIFE może być async! Ok:

(async () => {

    const [err, joke] = await getJSON(API_URL);

    if(err)
        console.warn(err.message);
    else
        console.log(joke);

    
})();

Pierwszy URL da nam dowcip, drugi błąd przez nas obsłużony (sami go przekazaliśmy), trzeci jednak da nam totalnie nieobsłużony wyjątek (zadziałało cors, bo mamy jakąś dziwną domenę a nie tylko resztę adresu lekko wadliwą, gdzie po prostu element adresu był nie taki).

To też możemy obsłużyć:

async function getJSON(url){
    try {
        const response = await fetch(url);
        
        if(!response.ok)
            return [new Error("Response failed, check URL"), null];

        const resBody = await response.json();

        return [null, resBody];
    }
    catch(e){
        return [e, null];
    }
    

}


(async () => {

    const [err, joke] = await getJSON(ANOTHER_WRONG_URL);

    if(err)
        console.warn(err.message);
    else
        console.log(joke);

    
})();

Teraz error związany z tym, że jest zła domena i przeglądarka blokuje CORS jest tak samo obsługiwany, jak error, że na zły endpoint pokazaliśmy i obsługujemy go sobie po swojemu, wyświetlając warnem message.

Takie małe przypomnienie z try-catch bo tego też używać będziemy. Więcej JS już niedługo, chciałbym tylko na jedno zwrócić uwagę:

w React RFC nie może być async ani callback do useEffect
w React możemy zdefiniować funkcję async powyżej RFC lub wewnątrz useEffect i tam ją zawołać
często jest taki modus operandi – useEffect z pustą tablicą zależności, zaciąga async na initial render, ale po nim (coś zatem trzeba wyrenderować), i jak wykona się await to używa setState, który wykonuje re-rener z nowym stanem i wszystko się wyświetla

JS – getJSON, ćwiczenie