Как обрабатывать ошибки в JavaScript

Привет, как дела друзья, желаю вам крепкого здоровья и успехов всегда. На этот раз мы обсудим обработку ошибок в JavaScript.

Когда мы делаем приложение, мы всегда находим ошибки. Это из-за наших ошибок при создании кода или ошибок ввода со стороны пользователя? Хорошее приложение будет создавать сообщение об ошибке в качестве опции при выполнении кода, потому что это облегчит нам обработку возникающих ошибок.

Вы также можете изучить другие руководства по JavaScript.

Учебник по Javascript: преобразование времени с полудня в 24 часа

Делаем загрузку при загрузке страниц

Учебник по JavaScript, часть 1 ~ Знание JavaScript

Как обрабатывать сообщения об ошибках, чтобы предотвратить сбои. Хорошо, давайте перейдем непосредственно к учебнику.

Попробуй и поймай

Для обработки ошибок JavaScript используйте try и catch. Написание кода try-catch для обработки ошибки выглядит следующим образом:

try {
    // code
} catch (error) {
    // error handling
}

В приведенном выше коде мы создали код, первый код попытки должен предоставить возможность коду попытки быть перехваченным и обработанным блоком кода перехвата. При этом, если в коде нет ошибок, блок catch будет проигнорирован.

try {
    console.log("first blok try");
    console.log("last blok try");
} catch (error) {
    console.log("No error occurs, then this code is ignored");
}
 
/* output
first blok try
last blok try
*/

Код в блоке try выше не вернет ошибку, поэтому код в блоке catch будет проигнорирован и не выполнен. Ниже приведен пример кода, который генерирует ошибку:

try {
    console.log("First blok try");   // (1)
    errorCode;                      // (2)
    console.log("Last blok try");  // (3)
} catch (error) {
    console.log("An error occurred!");  // (4)
}
 
/* output
First blok try
An error occurred!
*/

Строка кода (2) выдаст ошибку. Выполнение кода внутри блока try будет остановлено, поэтому строка кода (3) выполняться не будет. Затем код продолжит строку (4) или блок catch.

Теперь рассмотрим блок catch. У catch есть один параметр с именем error (имя переменной можно изменить). Переменная ошибки — это объект, в котором хранится подробная информация о возникшей ошибке.

Объект ошибки имеет в себе несколько основных свойств, а именно:

имя: название возникшей ошибки.
сообщение: сообщение о деталях ошибки.
стек: информация о последовательности событий, вызвавших ошибку. ошибка. Обычно используется для отладки, поскольку содержит информацию о том, какая строка вызвала ошибку.
Теперь давайте попробуем изменить код и отобразить вышеприведенное свойство ошибки.

try {
    console.log("First blok try");   // (1)
    errorCode;                      // (2)
    console.log("Last blok try");  // (3)
} catch (error) {
    console.log(error.name);
    console.log(error.message);
    console.log(error.stack);
}
 
/* output
Awal blok try
ReferenceError
errorCode is not defined
ReferenceError: errorCode is not defined
    at file:///home/dicoding/Playground/javascript/CoffeeMachine/error.js:3:5
    at ModuleJob.run (internal/modules/esm/module_job.js:152:23)
    at async Loader.import (internal/modules/esm/loader.js:166:24)
    at async Object.loadESM (internal/process/esm_loader.js:68:5)
*/

Из приведенной выше информации мы можем узнать, что появляется ошибка ReferenceError, поскольку errorCode считается неопределенной переменной или значением.

попробуй-поймай-наконец-то

Помимо try and catch, в механизме обработки ошибок в JavaScript есть еще один блок, а именно finally. Блок finally все равно будет выполняться независимо от результата блока try-catch.

try {
    console.log("First blok try");
    console.log("Last blok try");
} catch (error) {
    console.log("This line is ignored");
} finally {
    console.log("Will still be executed");
}
 
/* output
First blok try
Last blok try
Will still be executed
*/

Выбрасывание ошибок

Теперь попробуем на более распространенном случае. Обратите внимание на следующий код:

let json = '{ "name": "Johon", "age": 20 }';
 
try {
    let user = JSON.parse(json);
 
    console.log(user.name);
    console.log(user.age);
} catch (error) {
    console.log(error.name);
    console.log(error.message);
}

В приведенном выше коде функция JSON.parse будет анализировать или преобразовывать переменную JSON (String) в объект. Мы столкнемся со многими сценариями, подобными приведенному выше, когда будем делать запросы к API.

Запустите приведенный выше код в текстовом редакторе. Приложение должно работать гладко, не вызывая ошибок.

Что же делать, если строка JSON не соответствует формату объекта JavaScript?

try {
    let user = JSON.parse(json);
 
    console.log(user.name);
    console.log(user.age);
} catch (error) {
    console.log(error.name);
    console.log(error.message);
}
 
 
/* output
SyntaxError
Unexpected token b in JSON at position 2
*/

Если JSON не соответствует формату, то JSON.parse вызовет ошибку. Ошибка будет поймана блоком catch и код в нем будет выполнен.

Таким образом, учебник на этот раз может быть полезен для всех вас.

Спасибо.

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Посетите наш Community Discord и присоединитесь к нашему Коллективу талантов.