diff options
Diffstat (limited to 'files/ru/learn/javascript/asynchronous/async_await/index.html')
| -rw-r--r-- | files/ru/learn/javascript/asynchronous/async_await/index.html | 24 |
1 files changed, 12 insertions, 12 deletions
diff --git a/files/ru/learn/javascript/asynchronous/async_await/index.html b/files/ru/learn/javascript/asynchronous/async_await/index.html index 9882acfa58..bef0f49847 100644 --- a/files/ru/learn/javascript/asynchronous/async_await/index.html +++ b/files/ru/learn/javascript/asynchronous/async_await/index.html @@ -86,7 +86,7 @@ hello().then(alert);</pre> <p>Конечно, на практике код выше бесполезен, но в учебных целях он иллюстрирует синтаксис асинхронных функций. Теперь давайте перейдем к реальным примерам.</p> -<h2 id="Переписываем_Promises_с_ипользованием_asyncawait">Переписываем Promises с ипользованием async/await</h2> +<h2 id="Переписываем_Promises_с_использованием_asyncawait">Переписываем Promises с использованием async/await</h2> <p>Давайте посмотрим на пример из предыдущей статьи:</p> @@ -154,15 +154,15 @@ myFetch().then((blob) => { <h3 id="Минуточку_а_как_это_все_работает">Минуточку, а как это все работает ?</h3> -<p>Вы могли заметить, что мы обернули наш код в функцию и сделали ее асинхронной с помощью acync. Это было обязательно - нам надо создать контейнер, внутри которого будет запускаться асинхронный код и будет возмоность дождаться его результата с помощью await, не блокируя остальной код нашего скрипта.</p> +<p>Вы могли заметить, что мы обернули наш код в функцию и сделали ее асинхронной с помощью acync. Это было обязательно - нам надо создать контейнер, внутри которого будет запускаться асинхронный код и будет возможность дождаться его результата с помощью await, не блокируя остальной код нашего скрипта.</p> -<p>Внутри <code>myFetch()</code> находится код, который слегка напоминает версию на Promise, но есть важные отличия. Вместо того, чтобы писать цепочку блоков <code>.then()</code> мы просто использует ключевое слово <code>await</code> перед вызовом promise-based функции и присваиваем результат в переменную. Ключеовое слово <code>await</code> говорит JavaScript runtime приостановить код в этой строке, не блокируя остальной код скприта за пределами асинхронной функции. Когда вызов promise-based функции будет готов вернуть результат, выполнение продолжится с этой строки дальше.<br> +<p>Внутри <code>myFetch()</code> находится код, который слегка напоминает версию на Promise, но есть важные отличия. Вместо того, чтобы писать цепочку блоков <code>.then()</code> мы просто использует ключевое слово <code>await</code> перед вызовом promise-based функции и присваиваем результат в переменную. Ключевое слово <code>await</code> говорит JavaScript runtime приостановить код в этой строке, не блокируя остальной код скрипта за пределами асинхронной функции. Когда вызов promise-based функции будет готов вернуть результат, выполнение продолжится с этой строки дальше.<br> <br> Пример:</p> <pre class="brush: js notranslate">let response = await fetch('coffee.jpg');</pre> -<p>Значение Promise, которое вернет <code>fetch()</code> будет присвоено переменной <code>response</code> только тогда, когда оно будет доступно - парсер делает паузу на данной строке дожидаясь этого момента. Как только значение доступно, парсер переходит к следующей строке, в которой создается объект <code><a href="/en-US/docs/Web/API/Blob">Blob</a></code> из результата Promise. В этой строке, кстати, также используется <code>await</code>, потому что метод <code>.blob()</code> также возвращет Promise. Когда результат готов, мы возвращаем его наружу из <code>myFetch()</code>.</p> +<p>Значение Promise, которое вернет <code>fetch()</code> будет присвоено переменной <code>response</code> только тогда, когда оно будет доступно - парсер делает паузу на данной строке дожидаясь этого момента. Как только значение доступно, парсер переходит к следующей строке, в которой создается объект <code><a href="/en-US/docs/Web/API/Blob">Blob</a></code> из результата Promise. В этой строке, кстати, также используется <code>await</code>, потому что метод <code>.blob()</code> также возвращает Promise. Когда результат готов, мы возвращаем его наружу из <code>myFetch()</code>.</p> <p>Обратите внимание, когда мы вызываем <code>myFetch()</code>, она возвращает Promise, поэтому мы можем вызвать <code>.then()</code> на результате, чтобы отобразить его на экране.<br> <br> @@ -229,7 +229,7 @@ myFetch().then((blob) => { <h2 id="Await_и_Promise.all">Await и Promise.all()</h2> -<p>Как вы помните, асинхронные функции построены поверх <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">promises</a>, поэтому они совместимы со всеми возможностями последних. Мы легко можем подождать выполнение <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all">Promise.all()</a></code>, присвоить результат в переменную и все это сделать используя синхронный стиль. Опять, вернемся к <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html">примеру, рассмотреному в предыдущей статье</a>. Откройте пример в соседней вкладке, чтобы лучше понять разницу.</p> +<p>Как вы помните, асинхронные функции построены поверх <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">promises</a>, поэтому они совместимы со всеми возможностями последних. Мы легко можем подождать выполнение <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all">Promise.all()</a></code>, присвоить результат в переменную и все это сделать используя синхронный стиль. Опять, вернемся к <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html">примеру, рассмотренному в предыдущей статье</a>. Откройте пример в соседней вкладке, чтобы лучше понять разницу.</p> <p>Версия с async/await (смотрите <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-all-async-await.html">live demo</a> и <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-all-async-await.html">source code</a>), сейчас выглядит так:</p> @@ -298,7 +298,7 @@ displayContent() <p>Асинхронные функции с async/await бывают очень удобными, но есть несколько замечаний, о которых полезно знать.</p> -<p>Async/await позволяет вам писать код в синхронном стиле. Ключевое слово <code>await</code> блокирует приостанавливает выполнение ptomise-based функции до того момента, пока promise примет статуc fulfilled. Это не блокирует код за пределами вашей асинхронной функции, тем не менее важно помнить, что внутри асинхронной функции поток выполнения блокируется.<br> +<p>Async/await позволяет вам писать код в синхронном стиле. Ключевое слово <code>await</code> блокирует приостанавливает выполнение ptomise-based функции до того момента, пока promise примет статус fulfilled. Это не блокирует код за пределами вашей асинхронной функции, тем не менее важно помнить, что внутри асинхронной функции поток выполнения блокируется.<br> <br> Ваш код может стать медленнее за счет большого количества awaited promises, которые идут один за другим. Каждый <code>await</code> должен дождаться выполнения предыдущего, тогда как на самом деле мы хотим, чтобы наши Promises выполнялись одновременно, как если бы мы не использовали async/await.<br> <br> @@ -320,7 +320,7 @@ displayContent() ... }</pre> -<p>В каждом примере функция записывает время начала исполнения и сколько времерни понадобилось на испольние <code>timeTest()</code> промисов, вычитая время в момент запуска функции из времени в момент разрешения обещаний:</p> +<p>В каждом примере функция записывает время начала исполнения и сколько времени понадобилось на исполнение <code>timeTest()</code> промисов, вычитая время в момент запуска функции из времени в момент разрешения обещаний:</p> <pre class="brush: js notranslate">let startTime = Date.now(); timeTest().then(() => { @@ -329,7 +329,7 @@ timeTest().then(() => { alert("Time taken in milliseconds: " + timeTaken); })</pre> -<p>Далее представленна асинхронная функция <code>timeTest()</code> различная для каждого из примеров.</p> +<p>Далее представлена асинхронная функция <code>timeTest()</code> различная для каждого из примеров.</p> <p>В случае с медленным примером <code>slow-async-await.html</code>, <code>timeTest()</code> выглядит:</p> @@ -339,7 +339,7 @@ timeTest().then(() => { await timeoutPromise(3000); }</pre> -<p>Здесь мы просто ждем все три <code>timeoutPromise()</code> напрямую, блокируя выполнение на данного блока на 3 секунды прии каждом вызове. Все последующие вызовы вынуждены ждать пока разрешится предыдущий. Если вы запустите первый пример (<code>slow-async-await.html</code>) вы увидите alert сообщающий время выполнения около 9 секунд. </p> +<p>Здесь мы просто ждем все три <code>timeoutPromise()</code> напрямую, блокируя выполнение на данного блока на 3 секунды при каждом вызове. Все последующие вызовы вынуждены ждать пока разрешится предыдущий. Если вы запустите первый пример (<code>slow-async-await.html</code>) вы увидите alert сообщающий время выполнения около 9 секунд. </p> <p>Во втором <code>fast-async-await.html</code> примере, функция <code>timeTest()</code> выглядит как:</p> @@ -353,9 +353,9 @@ timeTest().then(() => { await timeoutPromise3; }</pre> -<p>В данном случае мы храмим три объекта <code>Promise</code> в переменных, каждый из которых может разрешиться независимо от других.</p> +<p>В данном случае мы храним три объекта <code>Promise</code> в переменных, каждый из которых может разрешиться независимо от других.</p> -<p>Ниже мы ожидаем разрешения промисов из объекта в результат, так как они были запущенны одновременно, блокируя поток, то и разрешатся одновременно. Если вы запустите вроторой приимер вы увидите alert, сообщающий время выполнения около 3 секунд.</p> +<p>Ниже мы ожидаем разрешения промисов из объекта в результат, так как они были запущенны одновременно, блокируя поток, то и разрешатся одновременно. Если вы запустите второй пример вы увидите alert, сообщающий время выполнения около 3 секунд.</p> <p>Важно не забывать о быстродействии применяя await, проверяйте количество блокировок.</p> @@ -363,7 +363,7 @@ timeTest().then(() => { </p><h2 id="Asyncawait_class_methods">Async/await class methods</h2> -<p>В качестве последнего замечания, вы можете использовать <code>async</code> перед методами классов или объектов, вынуждая их возвращать promises. А также await внутри методов объявленных такиим образом. Посмотрите на пример <a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance#ECMAScript_2015_Classes">ES class code, который мы наблюдали в статье object-oriented JavaScript</a>, и сравниете его с модифицированной (асинхронной) <code>async</code> версией ниже:</p> +<p>В качестве последнего замечания, вы можете использовать <code>async</code> перед методами классов или объектов, вынуждая их возвращать promises. А также await внутри методов объявленных таким образом. Посмотрите на пример <a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance#ECMAScript_2015_Classes">ES class code, который мы наблюдали в статье object-oriented JavaScript</a>, и сравните его с модифицированной (асинхронной) <code>async</code> версией ниже:</p> <pre class="brush: js notranslate">class Person { constructor(first, last, age, gender, interests) { |