Эта статья прольет свет на асинхронный код синхронного стиха JavaScript. Понимание разницы между этими двумя понятиями имеет важное значение, когда речь идет о понимании того, как работает код.
Начнем с определения синхронного и асинхронного.
JavaScript - это синхронный, блокирующий, однопоточный код. Это означает, что одновременно может выполняться только одна операция, начиная с вершины файла и до самого низа файла. Он запускается сверху вниз в последовательном порядке. Когда есть функция, выполнение которой занимает много времени, она должна завершить выполнение, прежде чем перейти к следующей строке кода.
Асинхронный код означает, что код может перейти к другой задаче до ее завершения - одновременно может происходить несколько операций. Он неблокирующий, в отличие от синхронного кода. Обычно асинхронные функции требуют времени для запуска. Они могут работать параллельно с другими выполняемыми функциями.
Вот несколько примеров асинхронных функций: setTimeout (), setState (), promises и т. Д.
Я узнал разницу между синхронизацией и асинхронностью во время финальной оценки в школе Flatiron. В моем обзоре проекта в React / Redux часть оценки заключалась в том, чтобы продемонстрировать, какие части нашего кода были синхронизируемыми и асинхронными.
Я поделюсь кодом ниже из моего последнего проекта, чтобы продемонстрировать. Это было приложение todo, в котором пользователь мог создавать списки.
В приведенном выше коде есть console.log (), которая запускается в определенном порядке. Console.log () помечены как «a», «b», «c», «d», «e», «f» и «g».
Код будет запускаться в таком порядке:
console.log (а)
console.log (б)
console.log (c)
console.log (e)
console.log (г)
console.log (d)
Он начинается, когда пользователь создает список в моем приложении todo. Функция addAList () вызывается в функции handleSubmit (). Функция handleSubmit () вызывается, когда пользователь создает список. Помните, что JavaScript выполняет одну строку кода за раз. Таким образом, для начала он напечатает console.log (‘a’), а затем вызовет функцию addAList (). Как только он попадет в функцию addAList (), он перейдет в индексный файл действий, где он попадет в функцию addAList (). Первая строка кода - console.log (‘b’), которая будет напечатана в консоли. Далее идет функция возврата, которая отправляется в качестве параметра. После этого идет еще один console.log («c»), снова выводимый на консоль. Затем у вас есть вызов fetch, который является синхронным, но имеет обещания, которые делают вызов fetch асинхронным. .Then (s) возвращают обещание и присоединяют обратный вызов, который анализирует объект ответа. Затем он будет ждать в стеке вызовов перед выполнением. Поэтому мы пропускаем console.log («d»), потому что он находится внутри вызова fetch. Затем мы попадаем в console.log («e»), который находится за пределами обещаний в вызове fetch. Console.log («e») печатается на консоли. Затем, пока обещания находятся в стеке вызовов, он возвращается к handleSubmit в компоненте ListForm и попадает в код следующей строки. Console.log («g») выводится на консоль. И, наконец, console.log (‘d’) выводится на консоль. Причина, по которой console.log (‘d’) запускается последней, заключается в том, что обещания были в стеке вызовов, которые не могут выполняться, пока не будет выполнен весь остальной код.
С моральной точки зрения, это помогло мне просмотреть код по одной строке за раз, включая размещение console.log () повсюду, чтобы полностью понять, как выполняется код. Мое приложение небольшое, но в больших приложениях это может быть очень сложно. Также знайте функции, которые являются синхронными и асинхронными.
Спасибо за чтение!
