Асинхронное программирование — это в основном форма параллельного программирования, которая позволяет единице работы выполняться отдельно от основных блоков кода приложения, не блокируя другие операции. Это просто означает, что это метод написания кода для обеспечения одновременного выполнения кода.
Асинхронное программирование в javascript возможно и более эффективно при работе с такими технологиями, как AJAX и Fetch API, которые используются для внутренних или внешних HTTP-запросов к файлам, службам и API браузера/сервера. несколько ключевых концепций при работе с асинхронным кодом в javascript: обратные вызовы, обещания и Async/Await.
АЯКС и XHR
Асинхронный Javascript и XML (AJAX) — это не язык программирования, фреймворк или библиотека, а набор веб-технологий, которые асинхронно отправляют и получают данные с клиентского конечного сервера. Он незаметно выполняется без вмешательства или перезагрузки текущего состояния. веб-страницы.
Изображение выше представляет собой разницу между обычной процедурой запроса и процедурой рабочего процесса AJAX, где у нас ниже клиент, который представляет браузер, а над сервером, который может быть локальным или удаленным, обычно когда мы посещаем URL-адрес/ссылку в браузере, что происходит, если мы отправляем общий HTTP-запрос на сервер, который возвращает общий ответ, включая всю веб-страницу, тогда как с помощью AJAX мы можем делать запросы асинхронно за кулисами без перезагрузки всей страницы, и способ, которым это делается, заключается в том, чтобы сначала сделать асинхронный вызов javascript, который проходит через механизм AJAX, который затем использует объект XML HTTP Request (XHR) для отправки общего запроса на сервер, затем сервер возвращает данные обычно в формате JSON, но также может быть в формате XML, который затем проходит через механизм AJAX и возвращается в виде ответа Html, в данном случае это веб-страница без перезагрузки страницы.
Хотя XML включен в аббревиатуру AJAX, JSON заменил его по большей части, потому что он быстрее и проще, поэтому в этой статье я буду использовать JSON для демонстраций.
Объект XML HTTP Request (XHR) является основной технологией AJAX. Он предоставляется средой javascript браузера. Он позволяет передавать данные между клиентом и сервером или браузером и сервером. Он также может использоваться с другими протоколами, отличными от HTTP, и также может работать. с другими данными, кроме XML, такими как JSON и простые тексты, которые будут использоваться для демонстрации в этой статье.
Демонстрация обычного текста
Локальное получение текстовых данных с внутреннего сервера с использованием объекта XHR с этой Html Collection и этим файлом .txt .
см. демонстрацию кода ниже:
при этом используется свойство .open, которое принимает тип запроса GET, текстовый файл textData.txt и оператор true, который изображает его асинхронным, в качестве параметров, затем после того, как объект XHR установлен в метод .onload, который назначается функции, которая принимает в операторе условия, который гарантирует, что его HTTP-статус равен 200, а состояние готовности — 4 перед выводом результатов. Метод .send обеспечивает отправку объекта XHR на сервер для обработки, вы можете увидеть изображение результата кода ниже и протестировать его здесь:
Демонстрация JSON
Здесь мы будем получать данные JSON локально с внутреннего сервера, используя объект XHR с этой коллекцией HTML и этими файлами JSON: file1 и file2.
Чтобы напечатать одиночные данные jsondata, мы можем использовать эту процедуру, см. Представление кода ниже:
и чтобы получить вторые данные jsondata с несколькими реквизитами JSON, мы можем выполнить следующую процедуру:
Посмотрите на изображение результата кода ниже и проверьте также здесь:
Обычно вы будете иметь дело с внешними API, что означает, что вам придется извлекать данные извне, и процедура для этого аналогична тому, как мы извлекали их внутренне в этой статье, но из-за того, что каждый API отличается, я советую вам перейти через их документацию, но система всегда будет одной и той же.
Заключение
HTTP-запросы AJAX и XML являются более старыми технологиями, но очень надежными, а Fetch — более новым стандартом.
Большинство асинхронных кодов являются частью API или библиотеки, например:
. XHR и выборка
. JQuery AJAX и Axios
. Модуль файловой системы Node.js
Async/Await позволяет нам писать асинхронные коды/операции, такие как простые синхронные коды/операции, это лучший способ писать асинхронные коды.
HTML и XML связаны друг с другом, где HTML отображает данные и описывает структуру веб-страницы, XML хранит и передает данные, как JSON.
API-интерфейсы должны предоставить разрешение, прежде чем мы сможем их использовать, что известно как включенный CORS, который обеспечивает междоменную связь, в то время как для некоторых API требуется форма аутентификации, известная как OAUTH.
Все браузеры имеют среду javascript.
Существуют другие внутренние и внешние библиотеки/технологии и методы, которые можно использовать для выполнения HTTP-запросов, такие как Fetch API, Axios, Superagent, Node HTTP и JQuery, и это лишь некоторые из них.
Узнайте больше о кодах состояния HTTP и значениях состояния готовности здесь и здесь соответственно.
Задавайте вопросы для уточнения и вносите исправления и предложения, я ожидаю их.
