Знание разницы между асинхронным и синхронным JavaScript и того, что каждый из них означает, является фундаментальной частью того, чтобы быть программистом JavaScript. Концепция асинхронного и синхронного кода может сбить с толку многих новичков. По определению синхронный означает просто «существующий или происходящий одновременно», тогда как асинхронный означает «(двух или более объектов или событий), не существующий или происходящие одновременно». Итак, с определениями, давайте рассмотрим, как синхронный и асинхронный связаны с JavaScript.

Синхронный код

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

Это означает, что если вы назначите, а затем запишете в консоль переменные a=1 и b=2, вы увидите, что ваши переменные записываются в порядке номеров. Давайте посмотрим на пример:

let a=1
let b=2

console.log(a)
console.log(b)

//Your console log would show this:
//1
//2

Здесь мы видим, что переменные вызываются по порядку в зависимости от их положения в коде. Поскольку переменная «a» регистрируется передпеременной «b», значение «a» считывается первым, а «b» — вторым, вот и все!

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

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

Давайте посмотрим на пример того, как это будет выглядеть в коде, опираясь на наш предыдущий пример:

let a=1
let b=2

setTimeout(function() {
  console.log('Async')
}, 100)

console.log(a)
console.log(b)

//Your console log would show this:
//1
//2
//Async

Здесь происходит то, что мы используем функцию setTimeout для записи в консоль строки «Async». Мы видим, что наши синхронные переменные регистрируются сначала, несмотря на то, что функция setTimeout идет первой в нашем коде. Это связано с тем, что наша функция setTimeout является асинхронной и должна ждать 100 миллисекунд перед выполнением.

Обещания

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

  • pending: исходное состояние, ни выполнено, ни отклонено.
  • выполнено: это означает, что операция была успешно завершена.
  • отклонено: это означает, что операция не удалась.

Итак, у вас есть базовое изложение синхронных, асинхронных и промисов в JavaScript. Чтобы быстро просмотреть то, что мы узнали, синхронный код запускается от первой строки до последней по порядку, переходя после завершения каждого действия. При запуске асинхронного кода ваше асинхронное действие даст вам обещание вернуть значение после завершения асинхронного действия. Помните, что асинхронный код выполняется в фоновом режиме, в то время как ваша программа продолжает свои строки кода. Вы получите значение от асинхронного действия только после его разрешения, поэтому оно непредсказуемо. Надеюсь, вы чему-то научились и удачного кодирования!

«Трудности укрепляют ум, как труд укрепляет тело».

— Сенека Младший

Источники: