От автора: в последнее время JavaScript стал языком «написать один раз, запустить везде» в технической индустрии благодаря сообществу, стоящему за ним. С его помощью можно программировать практически все. Это может быть веб-приложение, мобильное или настольное приложение. Вы даже можете использовать его для создания нейронных сетей или программирования дронов.
Да, язык очень эффективен, но знание некоторых хорошо адаптированных приемов для определенных ситуаций — вот что отличает способного разработчика JavaScript, и для того, чтобы использовать эти приемы, требуется многолетний опыт. Итак, вот 3 моих любимых и довольно полезных JavaScript-трюка, которые позволяют сэкономить время.
1. Создание асинхронного контекста
Обработка асинхронных событий в JavaScript немного сбивает с толку, особенно для новичков, потому что это напрямую связано с промисами, и, говоря простым языком, выполнение кода контролируется разработчиком. До ES6 (2015) асинхронный код нужно было обрабатывать следующим образом:
promise .then(function () { ... }) .catch(function () { ... }) .then(function () { ... }) .catch(function () { ... })
До ES6 должно было быть много связанных методов then и catch.
Тем не менее, в ES6, введено новое и очень полезное ключевое слово: await. Используя его, вы можете просто дождаться завершения любой асинхронной задачи и продолжить выполнение. Все идеально, кроме одной оговорки. Await должно быть использовано в функции async и не может быть использовано в глобальном масштабе. Поэтому, мы будем использовать IIFE для имитации асинхронного контекста глобального уровня, в котором мы можем использовать await где угодно.
let data (async () => { // This is the asynchronous context that you can use await const res = await fetch("https ://google.com/mcdkncjs") data = await res.json() })(); console.log(data)
Используя IIFE, вы можете легко создать асинхронный контекст для обработки всех видов асинхронных задач.
2. Именованные аргументы функций
Обычно, когда вы определяете функцию, у вас есть параметры, которые можно передать при вызове. Вы разделяете их запятой (,) и передаете один за другим. Это совершенно нормально, если у вас мало параметров и отличная IDE или текстовый редактор с IntelliSense. Но если нет, то вы должны запомнить все параметры в определенном порядке.
createUser(name, surname, 1542, 21, true)
Функцию с большим количеством параметров сложно запомнить и написать.
Тем не менее, с небольшой помощью ES6, мы можем создавать функции с именованными параметрами, которые легче читать и писать. Вместо того, чтобы передавать параметры один за другим, мы можем передать один объект аргумента, который содержит все параметры, так что нам не нужно запоминать порядок. Кроме того, в функции мы можем деструктурировать объект и получить параметры индивидуально.
// Declare the function using destructured parameters.
function createUser({ name, surname, id, age, isForeigner
}) { ... } // Then you can pass an object of parameters
createUser({ name, surname, id: 1542, age: 21, isForeigner: true
})
С деструктурированными параметрами вызов функций становится более явным и простым.
3. Функциональная оболочка для блоков Try / Catch
По мере того, как async/await становится все более популярным, использование catch уменьшается; вот почему разработчики начали использовать блоки try/catch для обработки ошибок в асинхронных функциях.
try { var quote = await getQuote(); console.log(quote);
catch (error) { console.error(error);
}
Использование try/catch для обработки ошибок в асинхронных функциях полностью сбрасывает преимущество «await» перед «then».
Но было бы здорово, если бы у нас была функция, которая возвращает ошибку или результат в зависимости от успеха без каких-либо отступов? Именно это мы и будем реализовывать. Оборачиваем блок try/catch функцией; затем используем его для обнаружения ошибок без отступов.
Функция обработки ошибок будет асинхронной функцией, поскольку мы хотим использовать await внутри и принимать другую асинхронную функцию в качестве аргумента. Затем, в зависимости от успеха функции, будет возвращен результат или ошибка.
const handled = async (asyncFunc) => { try { const res = await asyncFunc(); return [null, res]; } catch (error) { return [error, null] }
}
Обертка try/catch внутри функции позволяет нам использовать ее без отступов.
С помощью функции handled вы можете обрабатывать ошибки на том же уровне отступа, что и await. Все, что вам нужно сделать, это обернуть асинхронную функцию handled и деструктурировать как ответ, так и ошибку.
const [error, res] = await handled(asyncFunc)
Функция handled возвращает и ошибку, и ответ, но в зависимости от успеха одно из значений имеет значение «null».
Отличная работа! Теперь вы знаете три чудесных JavaScript-трюка, которые я использую ежедневно, чтобы облегчить себе жизнь, и я думаю, вы тоже найдете им применение. Спасибо за чтение.
Автор: Can Durmus
Источник: betterprogramming.pub
Редакция: Команда webformyself.
Читайте нас в Telegram, VK, Яндекс.Дзен
