В настоящее время, благодаря функциям ES6+, таким как Fetch API, метод then(), синтаксис Asnyc/Await и библиотекам, таким как Axios, с асинхронностью в JavaScript относительно легко справиться, как только вы получите базовое понимание концепции. Однако так было не всегда.
Асинхронность — это концепция, согласно которой определенные действия будут занимать неопределенное время, и программа должна дождаться завершения действия, прежде чем обрабатывать его результат. Наиболее распространенное использование can для асинхронности — это выборка данных из внешнего источника, а затем манипулирование ими после их поступления. Другие варианты использования включают таймеры и доступ к файловой системе. Если выборка данных не обрабатывается должным образом, программа может попытаться получить доступ к данным, которые ей еще недоступны. Проблема такого рода заключается в том, почему реагирующие компоненты обычно извлекают данные в методе жизненного цикла ComponentDidMount() и почему иногда требуется рендеринг по условию, т. е. возврат данных только после того, как они станут доступными, а не попытка отобразить что-то, что там нет, что приведет к поломке программы.
До появления Fetch API собственным методом JavaScript для получения данных был XMLHttpRequest. Несмотря на броское название, у XMLHttpRequest было несколько проблем. Это было чрезвычайно многословно и требовало использования обратных вызовов для обработки различных ошибок или результатов. Это стало известно как ад обратных вызовов, поскольку асинхронный код требовал создания слоев обратных вызовов, которые чрезмерно усложняли код. Сам термин AJAX происходит от аббревиатуры асинхронного JavaScript и XML, хотя он приобрел более широкое значение, относящееся не только к XML, но и к другим типам запросов.
В библиотеке jQuery был набор встроенных методов для работы с запросами AJAX, которые были весьма популярны. jQuery в значительной степени ушел в безвестность из-за введения многих аналогичных функций в сам JavaScript и появления более надежных библиотек, таких как React, или фреймворков, таких как Angular. Функция $ajax() широко использовалась и имела более простой синтаксис, чем XMLHttpRequest, требующий только вызова $ajaxSetup() для установки назначенного URL-адреса, а затем последующие запросы AJAX отправлялись на этот URL-адрес до тех пор, пока не будет выполнена другая $ajaxSetup(). созданный.
Широкая популярность данных JSON вместо XML, а также введение Fetch API, синтаксиса Async/Await и, что важно, объектов Promise радикально изменили способ выполнения запросов AJAX в JavaScript. Данные JSON (нотация объектов JavaScript) стали стандартом де-факто для передачи информации через Интернет. Обещания, которые позволяют возвращать данные до того, как они будут обработаны с помощью метода then() или синтаксиса Async/Await, позволяют избежать необходимости в «аду обратных вызовов» и создают более чистый и понятный код.
Эти разработки значительно упростили работу с асинхронным JavaScript и являются благом для современной веб-разработки. Они также стандартизировали запросы AJAX, поскольку разработчики менее склонны использовать методы AJAX jQuery.
