логотип PurpleSchool
логотип PurpleSchool

Async в JavaScript

Автор

Дмитрий Нечаев

JavaScript изначально разрабатывался как синхронный язык программирования, однако с ростом его популярности и расширением сферы применения возникла потребность в асинхронном программировании. Это позволяет браузерам выполнять длительные операции, такие как загрузка данных или обработка файлов, без блокировки пользовательского интерфейса. Для понимания асинхронности в JavaScript важно ознакомиться с такими понятиями, как Event Loop (цикл событий), Web APIs, промисы и синтаксис async/await.

Синхронный код и его проблемы

Синхронный код в JavaScript исполняется последовательно, то есть каждая операция должна быть завершена, прежде чем начнётся следующая. Это может привести к проблемам, например, к "замораживанию" интерфейса при выполнении длительных операций. Примером такой задачи может служить загрузка изображения:

function loadImageSync(url) {
    const image = new Image();
    image.src = url;
    document.body.appendChild(image);
}
loadImageSync('path/to/image.jpg'); // Интерфейс не отзывчив до завершения загрузки

Асинхронный код

Асинхронный код позволяет начать операцию и продолжить выполнение следующего кода, не дожидаясь её окончания. Асинхронность достигается с помощью колбэков, промисов или синтаксиса async/await. Пример асинхронной загрузки изображения:

function loadImageAsync(url) {
    const image = new Image();
    image.onload = () => {
        document.body.appendChild(image);
        console.log('Изображение загружено');
    };
    image.src = url;
}
loadImageAsync('path/to/image.jpg'); // Интерфейс остаётся отзывчивым

Промисы (Promise)

Промисы — это объекты, которые представляют будущий результат асинхронной операции. Они имеют три состояния: ожидание, выполнено и отклонено. Промисы позволяют управлять асинхронным кодом более удобно и избегать "ада колбэков".

const loadImagePromise = (url) => {
    return new Promise((resolve, reject) => {
        const image = new Image();
        image.onload = () => {
            resolve(image);
        };
        image.onerror = () => {
            reject(new Error(`Не удалось загрузить изображение по адресу ${url}`));
        };
        image.src = url;
    });
};

loadImagePromise('path/to/image.jpg').then(image => {
    document.body.appendChild(image);
}).catch(error => {
    console.error(error);
});

Связка async/await

async и await — современный синтаксис для работы с промисами, который позволяет писать асинхронный код так, как если бы он был синхронным. Пример:

async function loadImageAsyncAwait(url) {
    try {
        let response = await fetch(url);
        let imageBlob = await response.blob();
        let image = new Image();
        image.src = URL.createObjectURL(imageBlob);
        document.body.appendChild(image);
    } catch (error) {
        console.error('Ошибка при загрузке изображения:', error);
    }
}

loadImageAsyncAwait('path/to/image.jpg');

Плюсы async/await

  • Улучшение читаемости кода.
  • Упрощение обработки ошибок с помощью try и catch.
  • Уменьшение вложенности кода по сравнению с промисами и колбэками.

Заключение

Асинхронное программирование в JavaScript значительно улучшает пользовательский опыт, позволяя выполнять длительные операции без блокировки интерфейса. Понимание механизмов асинхронности, таких как цикл событий, промисы и async/await, критически важно для разработки эффективных и отзывчивых веб-приложений.

Стрелочка влевоМетод catch() в JavaScriptasync/await в JavaScriptСтрелочка вправо

Постройте личный план изучения Javascript до уровня Middle — бесплатно!

Javascript — часть карты развития Frontend

  • step100+ шагов развития
  • lessons30 бесплатных лекций
  • lessons300 бонусных рублей на счет

Бесплатные лекции

Все гайды по Javascript

Как работает метод trim() - JavaScriptКак работает метод toUpperCase() - JavaScriptКак работает метод toLowerCase() - JavaScriptКак работает метод substring() - JavaScriptКак работает метод startsWith() - JavaScriptКак работает метод split() - JavaScriptКак работает метод slice() - JavaScriptКак работает метод search() - JavaScriptКак работает метод replaceAll() - JavaScriptКак работает метод replace() - JavaScriptКак работает метод repeat() - JavaScriptКак работает метод padStart() - JavaScriptКак работает метод padEnd() - JavaScriptКак работает метод matchAll() - JavaScriptКак работает метод match() - JavaScriptКак работает метод localeCompare() - JavaScriptКак работает свойство length - JavaScriptКак работает метод lastIndexOf() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод fromCodePoint() - JavaScriptКак работает метод fromCharCode() - JavaScriptКак работает метод endsWith() - JavaScriptКак работает метод concat() - JavaScriptКак работает метод codePointAt() - JavaScriptКак работает метод charCodeAt() - JavaScriptКак работает метод charAt() - JavaScript
Итератор в JavaScript
try...catch в JavaScriptError в JavaScript
Событие wheel в JavaScriptСобытие unload в JavaScriptСобытие touch в JavaScriptСобытие submit в JavaScriptСобытие scroll в JavaScriptСобытие reset в JavaScriptМетод .preventDefault() в JavaScriptСобытие mouseover в JavaScriptСобытие mouseout в JavaScriptСобытие load в JavaScriptСобытие keyup в JavaScriptСобытие keydown в JavaScriptСобытие invalid в JavaScriptСобытие input в JavaScriptСобытийная модель Event в JavaScriptОбъект события Event в JavaScriptСобытие DOMContentLoaded в JavaScriptСобытие dblclick в JavaScriptСобытие click в JavaScriptСобытие change в JavaScriptСобытие beforeunload в JavaScript
Как работает метод some() - JavaScriptКак работает метод reverse() - JavaScriptКак работает метод reduce() - JavaScriptКак работает метод map() - JavaScriptКак работает метод isArray() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод from() - JavaScriptКак работает метод forEach() - JavaScriptКак работает метод flatMap() - JavaScriptКак работает метод flat() - JavaScriptКак работает метод findIndex() - JavaScriptКак работает метод find() - JavaScriptКак работает метод filter() - JavaScriptКак работает метод every() - JavaScriptМассивы в JavaScript
Открыть базу знаний

Лучшие курсы по теме

изображение курса

Основы JavaScript

Антон Ларичев
иконка часов12 бесплатных уроков
иконка звёздочки рейтинга4.8
Backend
Frontend
Mobile
изображение курса

TypeScript с нуля

Антон Ларичев
иконка часов21 бесплатный урок
иконка звёздочки рейтинга4.7
Backend
Frontend
Mobile
изображение курса

Next.js - с нуля

Антон Ларичев
иконка часов23 бесплатных урока
иконка звёздочки рейтинга4.7
Frontend