Hibakezelés a Javascriptben és a Typescriptben
Amikor egy hiba futás közben történik, akkor azt a Javascript és a Typescript "dobja", ahogy a legtöbb programozási nyelvben. A kezeletlen dobott hibák az alkalmazás vagy szolgáltatás összeomlásához vezetnek, ezáltal a lehető legrosszabb felhasználói élményhez vezetnek. Ha hiba történik, a nem mentett előrehaladás elvész, és a felhasználók esetleg hosszú folyamatot indíthatnak el (például ha egy felhasználó rengeteg információ szolgáltatásával jelentkezett be egy platformra). Ennek az az eredménye, hogy ezek a felhasználók valószínűleg soha többé nem fogják használni a terméket, mivel a bizalom elveszett.
Az ilyen esetek kezelése érdekében hibát lehet „elkapni”. A Javascript és a Typescript hibák elkapásához egyszerűen be kell csomagolnia a kódot egy „try” blokkba, majd egy „catch” blokkba.
async function getData(){
try {
// Call a dummy async 'fetch'-functoin
const result = await fetch();
return { result };
} catch(error) {
return { error };
}
}
// ... later in your code ....
const { result, error } = await getData();
if (error){
// ... handle error case.
}
// Access the results.
Ennek eredményeként a hiba nem terjed át az egész rendszeren, ami összeomláshoz vezet, hanem közvetlenül a kódja körében kezeli. Az alkalmazás vagy szolgáltatás nem fog összeomlani, és a hiba feldolgozására szolgáló enyhítési stratégia alkalmazható.
Különleges kezelés a „végre” blokkkal
A hibák kezelésének további lépéseként a Javascript és a Typescript további „végre” kulcsot ad. Egy ilyen „végre” -blokk végrehajt minden olyan kódot, amely a hatókörébe tartozik, miután mind a „try”, mind a “catch” blokk végrehajtásra került (ha hiba történt).
// This function is absolutely save
// to call. It fetches some data and
// optionally catches a potential error.
//
// After everything's done, a 'finally'
// sends the error to our backend for logs,
// if there was any.
async function getData(){
// In this case, we store the result
// and error in mutable variables,
// then return both.
let result: Result;
let error: Error;
try {
// Call a dummy async 'fetch'-function
result = await fetch();
} catch(e) {
error = e;
} finally {
// After the whole try/catch has been
// processed, we can log the error.
if(error){
await trackErrorInCloud(error);
}
}
return { result, error };
}
// ... same as before ...
De várj, van még! Tudta, hogy a „végre” blokk akkor is végrehajtásra kerül, ha eredményt ad vissza a „próbálkozás” vagy „elkapás” blokkban? Itt van egy példa arra, hogy mit akarok ezzel mondani.
// Same as the example before, but
// now we directly return from within
// each code block. And this is where
// a side effect can happen.
async function getData(){
try {
const result = await fetch();
return { result };
} catch(error) {
return { error }
} finally {
//
// WATCH OUT!
//
// Just for demo purpose, but this
// line of code will override both
// the return in 'try' as well as 'catch'!
//
// Returning inside of 'finally' is therefore
// dangerous and will lead to hard-to-debug
// issues.
return { finally: true };
}
}
// data === { finally: true }
const data = await getData();
// Here's a better use case for
// finally.
async function getData(){
let error: Error;
try {
const result = await fetch();
return { result };
} catch(e) {
error = e;
return { error }
} finally {
// No return in finally,
// so it's safe to use.
if(error){
await logInCloud()
}
}
}
// if no error === { result: ... }
// if error === { error: ... }
const data = await getData();
Összegzés
Mint látta, a hibák kezelése a Javascriptben és a Typescript-ben meglehetősen egyszerű és elkerüli az alkalmazás teljes összeomlását. A visszatérő eredmények speciális kezelése a „try” - és a „catch” blokkokban jó tudni, ha a „végre” blokkot használja, de nem szabad visszaélni azzal, hogy elkerülje a kód anti-style stílusban történő végrehajtását.
