Полное руководство по асинхронному JavaScript
2 года назад·7 мин. на чтение
На пути к тому, чтобы стать разработчиком JavaScript, вы, вероятно, столкнетесь с функциями обратного вызова, промисами (promise) и async/await.
JavaScript по своей сути является синхронным или однопоточным языком. Это означает, что каждое действие выполняется одно за другим, и каждое действие зависит от выполнения предыдущего.
Думайте об этом как о машинах, ожидающих на светофоре. Каждая машина должна ждать, пока заведется предыдущая.
Но что произойдет, если первая машина сломается? Должны ли все остальные машины ждать? У кого есть на это время?
Не лучше ли было бы, чтобы каждая машина не зависела от предыдущей? Почему нас должно волновать, если какая-то машина сломана? Если моя машина работает, почему я должен ждать, пока кто-нибудь заведет ее машину? Разве я не могу просто объехать ее?
Это и позволяет нам делать асинхронный JavaScript. Он создает для нас еще одну «полосу». Асинхронность означает, что если JavaScript должен дождаться завершения операции, он выполнит остальную часть кода во время ожидания. Мы можем переместить наши действия с основной линии и выполнять их в своем собственном темпе, позволяя им заниматься своими делами. И как мы этого добиваемся?
Используя обратные вызовы, промисы и
Мы также можем сделать обратные вызовы частью асинхронного JavaScript.
Асинхронный обратный вызов выполняется после выполнения функции высшего порядка, которая использует колбэк. Если наша машина сломается, мы отвезем ее к механику, после чего снова сможем ею пользоваться. Сначала нам нужно подождать некоторое время, чтобы починить машину. Смоделируем ожидание с помощью
JavaScript сначала выполнил синхронный код (в нашем случае вызов функции
Что ж, отлично, мы починили нашу машину и теперь можем на ней ездить.
Но что, если нашу машину нельзя починить? Как мы будем обрабатывать ошибки? А как насчет ремонта нескольких автомобилей каждый день?
Давайте посмотрим на это в действии.
У вас кружится голова, пытаясь понять это? Не волнуйтесь, вы не одиноки.
Есть причина, по которой это явление называется callback hell.
Кроме того, обратите внимание, что если одна из машин разбита, то есть ее не получается определить, другие машины даже не получат шанса на ремонт.
Чтобы создать промис в JavaScript, используйте ключевое слово
Но почему
Как видно из блока кода выше, мы используем
Как вы можете видеть, после каждого вызова метода
Как видите, ключевое слово
Используйте блок
Результат выполнения кода.const firstCar = 'first car'; const secondCar = 'second car'; console.log('Start ' + firstCar); console.log('Start ' + secondCar);
Start first car Start second car
Результат выполнения кода.const firstCar = 'broken'; const secondCar = 'second car'; if (firstCar === "broken") { throw Error("The first car is broken. Everybody stop."); } console.log('Start ' + firstCar); console.log('Start ' + secondCar);
Error: The first car is broken. Everybody stop.
async
/await
.
Функции обратного вызова (callback)
Обратные вызовы — это функции, вложенные в другую функцию в качестве аргумента. Их можно использовать как часть синхронного или асинхронного кода. Синхронный обратный вызов выполняется во время выполнения функции высшего порядка, которая использует обратный вызов.Результат выполнения кода.function startFirst(car, callback) { console.log("Start " + car); callback(); } // функция обратного вызова function startSecond() { console.log("Start second car"); } // передача функции как аргумент startFirst("first car", startSecond);
Start first car Start second car
setTimeout
, а затем мы сможем наслаждаться вождением нашей только что починенной машины.
Результат выполнения кода.function fixMyCar(car) { setTimeout(() => { console.log(`Fixing your ${car}.`); }, 1000); } function driveMyCar(car) { console.log(`Driving my new ${car}.`); } let myCar = "BMW x5"; fixMyCar(myCar); driveMyCar(myCar);
Driving my new BMW x5. Fixing your BMW x5.
driveMyCar()
), а затем через 1000 миллисекунд записал результат fixMyCar()
.
Но как мы можем водить машину, если она еще не починена?
Мы должны передать функцию driveMyCar()
в качестве колбэка функции fixMyCar()
. Таким образом, функция driveMyCar()
не будет выполняться до тех пор, пока автомобиль не будет отремонтирован.
Результат выполнения кода.function fixMyCar(car, callback) { setTimeout(() => { console.log(`Fixing your ${car}.`); callback(car); }, 1000); } function driveMyCar(car) { console.log(`Driving my new ${car}.`); } let myCar = "BMW x5"; fixMyCar(myCar, driveMyCar);
Fixing your BMW x5. Driving my new BMW x5.
Результат выполнения кода.function fixMyCar(car, success, failure) { setTimeout(() => { car ? success(car) : failure(car); }, 1000); } const car1 = "BMW x5"; const car2 = "Toyota RAV4"; const car3 = "Honda Civic"; fixMyCar( car1, function (car1) { console.log(`Fixed your ${car1}.`); fixMyCar( car2, function (car2) { console.log(`Fixed your ${car2}.`); fixMyCar( car3, function (car3) { console.log(`Fixed your ${car3}.`); }, function (car3) { console.log(`Your ${car3} car can not be fixed.`); } ); }, function (car2) { console.log(`Your ${car2} car can not be fixed.`); } ); }, function (car1) { console.log(`Your ${car1} car can not be fixed.`); } );
Fixed your BMW x5. Fixed your Toyota RAV4. Fixed your Honda Civic.
Результат выполнения кода.function fixMyCar(car, success, failure) { setTimeout(() => { car ? success(car) : failure(car); }, 1000); } const car1 = "BMW x5"; const car2 = undefined; const car3 = "Honda Civic"; fixMyCar( car1, function (car1) { console.log(`Fixing your ${car1}.`); fixMyCar( car2, function (car2) { console.log(`Fixing your ${car2}.`); fixMyCar( car3, function (car3) { console.log(`Fixing your ${car3}.`); }, function (car3) { console.log(`Your ${car3} car can not be fixed.`); } ); }, function (car2) { console.log(`Your ${car2} car can not be fixed.`); } ); }, function (car1) { console.log(`Your ${car1} car can not be fixed.`); } );
Fixing your BMWx5. Your undefined car can not be fixed.
Промисы (Promise)
Promise — это объект, который можно использовать для получения результата асинхронной операции, когда этот результат недоступен прямо сейчас. Поскольку код JavaScript выполняется неблокирующим образом, промисы становятся необходимыми, когда нам нужно дождаться какой-либо асинхронной операции, не задерживая выполнение остального кода. Промисы JavaScript — это объект, который может находиться в одном из трех состояний.- Pending (в ожидании) - обещание еще не выполнено (ваша машина у механика)
- Fulfilled (выполнено) - запрос выполнен успешно (автомобиль отремонтирован)
- Rejected (отклонено) - запрос не выполнен (автомобиль не может быть починен)
new
и внутри конструктора передайте функцию-исполнитель. Затем эта функция отвечает за разрешение или отклонение промиса.
Давайте представим следующий сценарий. Если нашу машину починят, то мы сможем отправиться в отпуск. Там мы можем осмотреть достопримечательности, затем мы можем сделать несколько снимков, опубликовать их в социальных сетях. Но если машину нельзя починить, то придется остаться дома.
Давайте напишем наши шаги.
- Механик обещает, что починит нашу машину
- Починить машину — значит отправиться в отпуск.
- Оказавшись там, мы можем отправиться на экскурсию
- Сделаем несколько фотографий
- После этого мы опубликуем их в социальных сетях
setTimeout
для имитации асинхронности.
Результат выполнения кода.const mechanicsPromise = new Promise( (resolve, reject) => { setTimeout(() => { const fixed = true; if (fixed) resolve("Car is fixed"); else reject("Car can not be fixed"); }, 2000); }); console.log(mechanicsPromise);
Promise { <pending> } [[Prototype]]: Promise [[PromiseState]]: "pending" [[PromiseResult]]: undefined
PromiseResult
- undefined
? Разве ваш механик не говорил вам, что попытается починить вашу машину? Нет, ваш механик вас не обманывал. Что мы забыли сделать, так это обработать промис. И как мы это делаем? Используя методы .then()
и .catch()
.
Результат выполнения кода.const mechanicsPromise = new Promise((resolve, reject) => { setTimeout(() => { const fixed = true; if (fixed) resolve("Car is fixed"); else reject("Car can not be fixed. Go home"); }, 2000); }); mechanicsPromise .then((message) => { console.log(`Success: ${message}`); }) .catch((error) => { console.log(error); });
[[Prototype]]: Promise [[PromiseState]]: "fulfilled" [[PromiseResult]]: Success: Car is fixed
.then()
для получения результата метода resolve()
и .catch()
для получения результата метода reject()
.
Наша машина починена, и теперь мы можем отправиться в отпуск и сделать все, что планировали.
Метод .then()
возвращает новое промис с результатом, преобразованным в значение. Мы можем вызвать метод .then()
для возвращенного промиса следующим образом:
Результат выполнения кода.const mechanicsPromise = new Promise((resolve, reject) => { setTimeout(() => { const fixed = true; if (fixed) resolve("Car is fixed"); else reject("Car can not be fixed"); }, 2000); }); mechanicsPromise .then((message) => { console.log(`Success: ${message}`); message = "Go sight seeing"; return message; }) .then((message) => { console.log(message); message = "Take some pictures"; return message; }) .then((message) => { console.log(message); message = "Posting pictures on social media"; console.log(message); }) .catch((error) => { console.log(error); }) .finally(() => { console.log("Go home"); });
Success: Car is fixed Go sight seeing Take some pictures Posting pictures on social media Go home
.then()
мы вызывали еще один .then()
с сообщением от предыдущего .then()
.
Мы также добавили .catch()
для обнаружения любых ошибок, которые могут возникнуть.
Если мы поедем или не поедем в отпуск, нам обязательно придется вернуться домой.
Это то, что делает .finally()
, этот метод всегда выполняется независимо от того, выполнено ли обещание или отклонено. Другими словами, метод .finally()
выполняется, когда обещание (promise) выполнено.
Наш код выглядит немного лучше, чем когда мы использовали колбэки. Но мы можем сделать это еще лучше с помощью специального синтаксиса под названием async
/await
. Это позволяет нам работать с промисами более удобным способом.
async
/await
async
/await
позволяет нам писать промисы, но код будет выглядеть синхронным, хотя на самом деле он асинхронный. Под капотом мы все еще используем Promise
. async
/await
— это синтаксический сахар, а это означает, что хотя он и не добавляет к нашему коду никаких новых функций, его приятнее использовать.
Результат выполнения кода.const mechanicsPromise = new Promise((resolve, reject) => { setTimeout(() => { const fixed = true; if (fixed) resolve("Car is fixed"); else reject("Car can not be fixed"); }, 2000); }); async function doMyThing() { let message = await mechanicsPromise; console.log(`Success: ${message}`); message = "Go sight seeing"; console.log(message); message = "Take some pictures"; console.log(message); message = "Posting pictures on social media"; console.log(message); console.log("Go home"); } doMyThing()
Success: Car is fixed Go sight seeing Take some pictures Posting pictures on social media Go home
await
заставляет функцию приостанавливать выполнение и ждать разрешенного промиса, прежде чем оно продолжится. Ключевое слово await
можно использовать только внутри асинхронной функции.
А что, если машина сломается? Как мне обрабатывать ошибки с этим новым синтаксисом?
Мы можем использовать блок try
/catch
.
Результат выполнения кода.const mechanicsPromise = new Promise((resolve, reject) => { setTimeout(() => { const fixed = false; if (fixed) resolve("Car is fixed"); else reject("Car can not be fixed"); }, 2000); }); async function doMyThing() { try { let message = await mechanicsPromise; console.log(`Success: ${message}`); message = "Go sight seeing"; console.log(message); message = "Take some pictures"; console.log(message); message = "Posting pictures on social media"; console.log(message); console.log("Go home"); } catch (error) { console.log(error); } } doMyThing();
Your car can not be fixed
try
/catch
только в том случае, если вызов помечен как await
. В противном случае исключение не будет поймано.12 популярных вопросов с ответами на JavaScript собеседовании
2 года назад·4 мин. на чтение
Эта статья предназначена для junior разработчиков, которые хотят получить свою первую работу в качестве JavaScript разработчиков.
1. Что такое JavaScript и для чего он используется?
Javascript - это высокоуровневый, динамичный и интерпретируемый язык программирования, широко используемый для многих сред, таких как интерфейс веб-сайтов, backend службы, desktop и мобильные приложения. Но чаще всего JavaScript используется для создания динамических и интерактивных веб-сайтов.2. Что такое замыкание в JavaScript?
Замыкание — это функция, которая имеет доступ к переменным своей внешней функции. Это важно, потому что это позволяет внутренней функции «запоминать» переменные из своей внешней области, поэтому она может продолжать получать к ним доступ и манипулировать ими даже после того, как внешняя функция была завершена.function outerFunction(x) { return function innerFunction(y) { return x + y; }; } const add5 = outerFunction(5); console.log(add5(3)); // 8
3. Как this
работает в JavaScript?
this
важное ключевое слово в JavaScript. Его значение определяется тем, как вызывается функция. Его можно задать явно с помощью call()
, apply()
или bind()
.
По умолчанию его значение внутри функции устанавливается в глобальный объект (в браузере это объект window
), за исключением того, когда функция вызывается как метод объекта.
В этом случае this
указывает на объект, методом которого он является.
4. Что такое поднятие (hoisting) в JavaScript?
В JavaScript поднятие — это поведение, при котором переменные и объявления функций в памяти автоматически перемещаются в верхнюю часть своей области. Что это значит? Ну, это означает, что эти переменные могут быть использованы до того, как они будут объявлены, и объявления функций также могут быть вызваны до их определения.5. В чем разница между var
, let
и const?
var
: Переменные, объявленные с помощьюvar
, имеют функциональную область действия, что означает, что к ним можно получить доступ только в рамках функции, в которой они были объявлены. Внешняя переменная затеняется, когда переменная с тем же именем объявляется во вложенной функции.let
: Пусть переменные имеют блочную область действия, что означает, что они доступны только в том блоке, в котором они объявлены. Объявление переменной с тем же именем во вложенном блоке приведет к затенению внешней переменной.const
: переменные, объявленные с помощьюconst
, также какlet
, имеют область действия блока, но их нельзя переназначить.
function example() { var x = 1; let y = 2; const z = 3; if (true) { var x = 4; let y = 5; const z = 6; } console.log(x); // 4 console.log(y); // 2 console.log(z); // 3 } example();
6. Какова разница между ==
и ===
?
Оператор равенства ==
выполняет принудительное приведение типа, что означает, что он попытается преобразовать операнды в один и тот же тип перед их сравнением. С другой стороны, оператор строгого равенства ===
, не выполняет приведение типа. Он возвращает значение true
только в том случае, если оба операнда имеют одинаковый тип и значение.
Например:
console.log(1 == '1'); // true console.log(1 === '1'); // false
7. В чем разница между null
и undefined
?
undefined
указывает, что переменная была объявлена, но ей не было присвоено значение. Значение null
представляет собой преднамеренное отсутствие какого-либо значения объекта. Другими словами, null
— это явно заданное значение, указывающее на отсутствие значения.
8. Что такое событие в JavaScript?
В JavaScript событие — это любое действие в браузере, например нажатие пользователем кнопки, загрузка страницы или обновленный элемент. Слушатели событий обычно обрабатывают события, позволяя разработчикам указывать функции, которые должны выполняться при возникновении события. Пример:const button = document.querySelector('button'); button.addEventListener('click', () => { console.log('Button was clicked!'); });
9. В чем разница между синхронным и асинхронным кодом в JavaScript?
Синхронный код выполняется блокирующим образом, что означает, что следующая строка кода будет выполнена после завершения текущей строки. С другой стороны, асинхронный код выполняется неблокирующим образом, что означает, что другой код может выполняться не ожидая завершения асинхронного кодом. Асинхронный код обычно реализуется в JavaScript с помощью обратных вызовов или Promises.10. Что такое промисы (Promise) в JavaScript?
Объект Promise — это объект, представляющий успешное или неудачное завершение асинхронной операции. Promise позволяет регистрировать обратные вызовы для получения уведомлений о завершении или сбое асинхронной операции, а также обрабатывать ошибки более удобно и централизованно. Например:const fetchData = () => { return new Promise((resolve, reject) => { setTimeout(() => { resolve('Data fetched!'); }, 1000); }); }; fetchData() .then(data => { console.log(data); }) .catch(error => { console.error(error); });
11. Что такое обратный вызов в JavaScript?
Функция обратного вызова передается в качестве аргумента другой функции и выполняется после завершения внешней функции. Разработчики могут использовать обратные вызовы для указания кода, который будет выполняться после завершения асинхронной операции. Пример:const fetchData = (callback) => { setTimeout(() => { callback('Data fetched!'); }, 1000); }; fetchData(data => { console.log(data); });
12. Что такое AJAX в JavaScript?
AJAX (асинхронный JavaScript и XML) — это метод выполнения асинхронных серверных запросов с веб-страницы без перезагрузки всей страницы. AJAX позволяет разработчикам динамически обновлять веб-страницу новыми данными без необходимости обновления страницы. Это достигается путем отправки HTTP-запроса из браузера на сервер и обновления только тех частей страницы, которые требуют его с ответом. Это улучшает взаимодействие с пользователем, поскольку страница не перезагружается, а обновляются только необходимые данные. Пример:Еще больше вопросов с собеседований можно найти здесь.const xhr = new XMLHttpRequest(); xhr.open('GET', 'https://api.example.com/data'); xhr.onreadystatechange = () => { if (xhr.readyState === XMLHttpRequest.DONE) { console.log(xhr.responseText); } }; xhr.send();