Узнайте, как создавать асинхронные программы с помощью JavaScript

Асинхронное программирование является основным продуктом в разработке программного обеспечения. Трудно поверить, что эта концепция программирования существует только с двадцать первого века. Язык программирования F# первым среди аналогов представил асинхронное программирование в 2007 году.

Другие языки, такие как C#, Python, JavaScript и C++, постепенно добавляли поддержку асинхронного программирования. Главный вопрос заключается в том, какую ценность асинхронное программирование добавляет вашим приложениям?

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

Что такое синхронное программирование?

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

Синхронная модель также включает условный код, такой как

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

Пример синхронной программы

константный код синхронизации = () => {
 console.log("Это первая строка в программе")
 console.log("Это вторая строка в программе")
 console.log("Это последняя строка в программе")
}
Код Синхронизации();

Запуск приведенной выше программы JavaScript приведет к следующему выводу в консоли:

Это первая строка в программе
Это вторая строка в программе
Это последняя строка в программе

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

Что такое асинхронное программирование?

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

Связанный: Синхронный против. Асинхронное программирование: чем они отличаются?

Асинхронное программирование может вдвое сократить время выполнения, эффективно создавая более быстрые компьютеры.

Пример асинхронной программы

константа AsyncCode = () => {
 console.log("Это первая строка в программе")
 setTimeout(() => {
 console.log("Это вторая строка в программе")
 }, 3000)
 console.log("Это последняя строка в программе")
}
Асинхронный код();

Выполнение приведенного выше кода JavaScript приведет к следующему выводу в вашей консоли:

Это первая строка в программе
Это последняя строка в программе
Это вторая строка в программе

Если вы сравните приведенный выше вывод консоли с асинхронной программой, которая его генерирует, вы увидите очевидное несоответствие. Призыв к журнал текст с надписью «Это вторая строка в программе» предшествует тексту с надписью «Это последняя строка в программе». Однако вывод консоли этого не отражает.

Учитывая, что JavaScript преимущественно синхронен, код в приведенной выше программе выполнялся последовательно. Но JavaScript поддерживает асинхронное программирование с помощью таких функций, как установить время ожидания () метод.

То установить время ожидания () method — это асинхронный метод JavaScript, который принимает два аргумента: функцию и задержку. Задержка — это таймер (в миллисекундах), который задерживает выполнение функции. Таким образом, пока приведенная выше программа ожидает три секунды для выполнения функции в установить время ожидания () метод, он переходит к следующей строке кода. Это приводит к выполнению третьего вызова функции раньше второго.

Асинхронные технологии JavaScript

Отдельно от установить время ожидания () метод, упомянутый выше, некоторые технологии JavaScript используют асинхронное программирование. Эти технологии используют модель асинхронного программирования для разработки более быстрых неблокирующих приложений. Некоторые из этих технологий включают в себя:

• jQuery Аякс
• Аксиос
• NodeJS

Связанный: Что такое Node.js? Вот как использовать серверный JavaScript

Создание асинхронных программ с помощью JavaScript

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

Функции обратного вызова

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

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

Использование промисов

В JavaScript добавлена ​​поддержка промисов после функций обратного вызова. Они являются хорошей альтернативой при создании больших приложений. Обещание представляет собой то, что может произойти после асинхронной операции. Этот потенциальный результат будет принимать одну из двух форм: решен или отклоненный. Отдельная функция обрабатывает каждый из этих результатов, устраняя необходимость вложенности (проблема функции обратного вызова). Вместо этого промисы поощряют более простые в использовании цепные функции.

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

То тогда() Цепная функция обрабатывает решать функция, и ловить() Цепная функция обрабатывает отклонять функция. Таким образом, нет необходимости во вложенных операторах if, как в случае с функциями обратного вызова.

Пример использования промисов

const PromiseFunction = () => {
 вернуть новое обещание ((разрешить, отклонить) => {
 setTimeout(() => {
 разрешить("эта асинхронная операция выполнена хорошо")
 }, 3000)
 })
}
PromiseFunction().then((результат) => {
 console.log("Успех", результат)
}).catch((ошибка) => {
 console.log("Ошибка", ошибка)
})

Приведенный выше код возвращает следующий вывод в консоли:

Успех, эта асинхронная операция выполнена хорошо

Это потому, что обещание возвращает решать функция, которая передает свои результаты в тогда() функция. Если обещание возвращает отклонять функция, которую использует программа ловить функция вместо этого.

Использование асинхронного/ожидания

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

У каждой функции async/await есть два ключевых атрибута. Они начинаются с асинхронный ключевое слово, и Ждите ключевое слово ожидает результата асинхронной операции.

Пример программы Async/Await

const PromiseFunction = () => {
 вернуть новое обещание ((разрешить, отклонить) => {
 setTimeout(() => {
 разрешить("эта асинхронная операция выполнена хорошо")
 }, 3000)
 })
}
const AsyncAwaitFunc = асинхронный () => {
 константный результат = ожидание PromiseFunction();
 console.log (результат);
}
Асинхронная функция ожидания();

Приведенный выше код вернет в консоль следующий вывод:

эта асинхронная операция выполнена хорошо

Каковы основные выводы?

Есть несколько основных моментов, которые вы должны взять из этой статьи:

• Асинхронное программирование ценно, потому что оно сокращает время ожидания программы, создавая более быстрые приложения.
• Функция обратного вызова может быть синхронной или асинхронной.
• Обещания предлагают лучший способ обработки асинхронных операций, чем функции обратного вызова.
• Функции Async/await обрабатывают промисы лучше, чем функции цепочки.
• Функция async/await обрабатывает асинхронные операции так, что они выглядят синхронно, что облегчает понимание.
• Стрелочные функции помогают писать лучший код.

Стрелочные функции JavaScript могут сделать вас лучшим разработчиком

Хотите стать лучше в веб-разработке? Стрелочные функции, добавленные в JavaScript ES6, дают вам два способа создания функций для веб-приложений.

Читать далее

Об авторе