Řešení chyb s Axios

Úvod

Axios je JavaScriptová knihovna, která používá Promise API k vytváření HTTP požadavků s http v Node.js runtime nebo XMLHttpRequests v prohlížeči. Protože tyto požadavky jsou sliby, fungují s novější syntaxí async/await a také .then() funkce pro řetězení slibů a .catch() mechanismus pro zpracování chyb.

try {
    let res = await axios.get('/my-api-route');

    // Work with the response...
} catch (err) {
    // Handle error
    console.log(err);
}

Potom a chycení

Sliby lze pomocí moderního JS zpracovat dvěma způsoby – syntaxí async/await, která byla ukázána výše, a také .then() a .catch() metody. Všimněte si, že obě tyto metody mohou produkovat stejnou funkcionalitu, ale async/await se obvykle považuje za jednodušší na práci a vyžaduje méně standardního kódu v delších řetězcích slibů.

Zde je návod, jak byste dosáhli stejné věci, ale pomocí metody then/catch:

axios.get('/my-api-route')
    .then(res => {
        // Work with the response...
    }).catch(err => {
        // Handle error
        console.log(err);
    });

Oba res a err objekty jsou stejné jako u syntaxe async/await.

Zpracování chyb

V této části se podíváme na dvě primární kategorie problémů a také na další problémy, se kterými se můžeme setkat, a na to, jak je spravovat pomocí Axios. Je důležité, abyste pochopili, že to platí pro všechny typy HTTP dotazů zpracovávaných Axios, včetně GET , POST , PATCH , a tak dále.

Zde můžete vidět syntaxi pro tři aspekty - to zachytí chybu; je důležité poznamenat, že tato chyba nese velký chybový objekt se spoustou informací:

try {
    let res = await axios.get('/my-api-route');

    // Work with the response...
} catch (err) {
    if (err.response) {
        // The client was given an error response (5xx, 4xx)
    } else if (err.request) {
        // The client never received a response, and the request was never left
    } else {
        // Anything else
    }
}

Rozdíly v objektu chyby, zvýrazněné výše v catch kód, uveďte, kde se v požadavku vyskytl problém. V následujících částech se na to podíváme hlouběji.

error.response

Toto je typ chyby, který známe nejvíce, a je mnohem jednodušší se s ním vypořádat. Mnoho webů zobrazuje stránku 404 Nenalezeno/chybovou zprávu nebo různé kódy odpovědí na základě toho, co poskytuje API; to se často řeší prostřednictvím odpovědi.

Pokud má váš chybový objekt vlastnost odezvy, znamená to, že váš server vrátil chybu 4xx/5xx. To vám pomůže vybrat, jaký druh zprávy vrátit uživatelům; zpráva, kterou budete chtít poskytnout pro 4xx, se může lišit od zprávy pro 5xx, a pokud váš backend nevrací vůbec nic.

try {
    let res = await axios.get('/my-api-route');

    // Work with the response...
} catch (err) {
    if (err.response) {
        // The client was given an error response (5xx, 4xx)
        console.log(err.response.data);
        console.log(err.response.status);
        console.log(err.response.headers);
    } else if (err.request) {
        // The client never received a response, and the request was never left
    } else {
        // Anything else
    }
}

error.request

Tato chyba je nejčastěji způsobena špatnou/flekatou sítí, visícím backendem, který nereaguje okamžitě na každý požadavek, neautorizovanými požadavky nebo požadavky napříč doménami a nakonec, když backend API vrátí chybu.

Poznámka: K tomu dochází, když byl prohlížeč schopen iniciovat požadavek, ale z jakéhokoli důvodu neobdržel platnou odpověď.

try {
    let res = await axios.get('/my-api-route');

    // Work with the response...
} catch (err) {
    if (err.response) {
        // The client was given an error response (5xx, 4xx)
    } else if (err.request) {
        // The client never received a response, and the request was never left
        console.log(err.request);
    } else {
        // Anything else
    }
}

Již dříve jsme zmínili, že základní požadavek, který Axios používá, závisí na prostředí, ve kterém je spuštěn. To je také případ err.request objekt. Zde je err.request object je instancí XMLHttpRequest při spuštění v prohlížeči, zatímco je to instance http.ClientRequest při použití v Node.js.

Další chyby

Je možné, že chybový objekt nemá ani response nebo request předmět k němu připojený. V tomto případě to znamená, že došlo k problému s nastavením požadavku, který nakonec způsobil chybu.

try {
    let res = await axios.get('/my-api-route');

    // Work with the response...
} catch (err) {
    if (err.response) {
        // The client was given an error response (5xx, 4xx)
    } else if (err.request) {
        // The client never received a response, and the request was never left
    } else {
        // Anything else
        console.log('Error', err.message);
    }
}

Může tomu tak být například v případě, že vynecháte parametr URL z .get() hovoru, a proto nebyl nikdy podán žádný požadavek.

Závěr

V tomto krátkém článku jsme se podívali na to, jak můžeme zvládnout různé druhy selhání a chyb v Axios. To je také důležité pro poskytování správné zprávy návštěvníkům vaší aplikace/webu, spíše než vždy vracet obecnou chybovou zprávu, posílat 404 nebo indikovat problémy se sítí.


No