Fouten afhandelen met Axios

Inleiding

Axios is een JavaScript-bibliotheek die de Promise API gebruikt om HTTP-verzoeken te maken met http in Node.js runtime of XMLHttpRequests in de browser. Omdat deze verzoeken beloften zijn, werken ze met de nieuwere async/wait-syntaxis, evenals met .then() functies voor belofte chaining en de .catch() mechanisme voor foutafhandeling.

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

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

Dan en vang

Beloften kunnen op twee manieren worden afgehandeld met behulp van moderne JS - de async/wait-syntaxis, die hierboven werd getoond, evenals .then() en .catch() methoden. Merk op dat beide methoden dezelfde functionaliteit kunnen produceren, maar async/wait wordt doorgaans beschouwd als gemakkelijker om mee te werken en vereist minder standaardcode in langere belofteketens.

Hier is hoe je hetzelfde zou bereiken, maar met behulp van de then/catch-methode:

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

Zowel de res en err objecten zijn hetzelfde als bij de async/wait-syntaxis.

Omgaan met fouten

In deze sectie zullen we kijken naar twee primaire categorieën problemen, evenals naar andere problemen die we kunnen tegenkomen en hoe we deze kunnen beheren met Axios. Het is van cruciaal belang dat u begrijpt dat dit van toepassing is op alle typen HTTP-query's die door Axios worden afgehandeld, inclusief GET , POST , PATCH , enzovoort.

Hier kunt u de syntaxis voor de drie aspecten zien - dit zal de fout vastleggen; het is cruciaal op te merken dat deze fout een groot foutobject bevat met veel informatie:

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
    }
}

De verschillen in het foutobject, hierboven gemarkeerd in de catch code, geef aan waar het verzoek het probleem heeft ondervonden. In de volgende secties gaan we hier dieper op in.

error.response

Dit is het soort fout waarmee we het meest vertrouwd zijn, en het is veel gemakkelijker om ermee om te gaan. Veel sites tonen een 404 Not Found-pagina/foutmelding of verschillende responscodes op basis van wat de API biedt; dit wordt vaak afgehandeld via de reactie.

Als uw foutobject een responseigenschap heeft, betekent dit dat uw server een 4xx/5xx-fout heeft geretourneerd. Dit zal u helpen bij het kiezen van het soort bericht dat u naar gebruikers wilt terugsturen; het bericht dat u voor 4xx wilt geven, kan verschillen van dat voor 5xx, en als uw backend helemaal niets retourneert.

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

Deze fout wordt meestal veroorzaakt door een slecht/vlekkerig netwerk, een hangende backend die niet onmiddellijk reageert op elk verzoek, ongeautoriseerde of domeinoverschrijdende verzoeken, en ten slotte als de backend-API een fout retourneert.

Opmerking: Dit gebeurt wanneer de browser een verzoek kon starten maar om welke reden dan ook geen geldig antwoord ontving.

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
    }
}

Eerder vermeldden we dat het onderliggende verzoek dat Axios gebruikt afhangt van de omgeving waarin het wordt uitgevoerd. Dit is ook het geval voor de err.request object. Hier de err.request object is een instantie van XMLHttpRequest wanneer het wordt uitgevoerd in de browser, terwijl het een instantie is van http.ClientRequest bij gebruik in Node.js.

Andere fouten

Het is mogelijk dat het foutobject geen response . heeft of request voorwerp dat eraan vastzit. In dit geval wordt gesuggereerd dat er een probleem was bij het instellen van het verzoek, wat uiteindelijk een fout heeft veroorzaakt.

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

Dit kan bijvoorbeeld het geval zijn als u de URL-parameter weglaat uit de .get() bellen, en er is dus nooit een verzoek gedaan.

Conclusie

In dit korte artikel hebben we gekeken hoe we met verschillende soorten storingen en fouten in Axios kunnen omgaan. Dit is ook belangrijk voor het geven van het juiste bericht aan uw applicatie-/websitebezoekers, in plaats van altijd een generieke foutmelding te retourneren, een 404 te verzenden of netwerkproblemen aan te geven.


No