Владилен, очень хорошо понимается материал благодаря твоим видео! Однозначно лучший контент. Если это возможно рассмотри систематизацию своих видео с дополнительными задачами по материалу. Уверен будет вообще пушечно
Это лучший материал по JS на русскоязычном youtube. Отдельно хотелось бы поблагодарить Вас Владилен за курс по Vue. Он превосходен. Он помог мне довольно быстро вникнуть во Vue. Посоветовал его одному коллеге верстальщику, он также остался им очень доволен. Спасибо Вам огромное! :)))
Владилен вы не поверите: но во время создания промиса вместо setTimeout(()=>r(),ms) можно просто записать setTimeout(r,ms); r - это есть resolve, и мы передаём ссылку на функцию в качестве колбека
Твои уроки раскрывают суть каждой концепции. Ты описываешь проблему и механизм в языке, который эту проблему решает. Информация так усваивается намного лучше. В других уроках описывают некоторые факты о части языка и не говорят как это использовать и новичок не понимает как он это может применить. Спасибо большое за труд
Согласен, у других смотрел так и не понял что такое promise, async and await, методы массивов, которые новые map и тд, а тут все сразу стало понятно, и операторы rest и spread туда же, столько полезных вещей которыми я раньше не пользовался, жаль конечно))
Самое главное, что смотря на async await может показаться, что мы только ждём код и всё. НО, как и then, await не блокирует код, а просто откладывает выполнение действующей функции (или call stack если смотреть глобальнее) и продолжит выполнять код дальше Такой код выведет 3 1 4 2. Если уже поставить await верхнего уровня перед вызовом функции, то уже будет 3 1 2 4, так как мы уже дожидаемся этой функции и по сути смысла в асинхронности тогда нет. Код внутри промиса выполняется синхронно, поэтому туда реально нужно ложить то, чего вы хотите подождать типа запроса или того же setTimeout ```JavaScript async function f() { console.log("1") let promise = new Promise((resolve, reject) => { setTimeout(() => resolve("готово!"), 1000) }); let result = await promise; // будет ждать, пока промис не выполнится (*) console.log("2") alert(result); // "готово!" } console.log("3") f(); console.log("4") ```
Спасибо! Переписывал store для авторизации из урока по Vue CRM, там была готовая библиотека firebase, а мне надо было через API реализовывать. Это видео очень выручило!
Я что-то поняла, неужели, офигеть! но боюсь что окажется, что рано радуюсь, что все-таки не поняла, потому что я не могу поверить, что я наконец это поняла. Спасибо Вам
async/await это синтаксический сахар на генератор/промис, где генератор используется для превращения асинхронного кода в синхронный, а промис для выполнения асинхронного кода. То есть тут суть в генераторе, а промис деталь реализации генератора. Промис можно заменить на простой обратный вызов (callback).
Спасибо большое за отличное объяснение! Не совсем понял момент с .then(() => { return fetch(url) } .then(response => response.json()) fetch() возвращает Promise, then() оборачивает все что в return в новый Promise. Получается, что результат then() - Promise? Как тогда последующий then() вызывает у этого объекта json() ?
10:15 зачем писать await repsonse.json() если мы уже ждем fetch который запишет результат в переменную response после того как отработает, по идее await для repsonse.json() уже не нужен, или я не прав? @Владилен Минин
Владилен! Спасибо за ваши уроки. Я часто смотрю ваши уроки на iPhone. Нельзя ли поменять черный бэкграунд на белый, чтобы лучше был виден код? Спасибо!
Малюсенький вопрос: я правильно понимаю, что работа всей страницы при наличии такого кода останавливается до того момента, пока не выполнится "виртуальный промис" в виде таймера delay? Или это просто отдельный поток где js выполняет для конкретной функции свой код и затем возвращает его? Ну, то есть, если мы присвоим переменной эту функцию, к ней можно будет обратиться только через 2 секунды, и всё это время скрипт будет недоступен?
попробовал заменить в своем микропроекте .then на async/await и получилось даже еще более громоздко, может чуть читается легче, так и мне никто не мешает .then переносить на новую строку.
На 6:35 для тех кому трудно понять, как и мне, избавьтесь от setTimeoute. Пишите пустой промис const p = new Promise((resolve)=>resolve()). Сам setTimeoute путает, да до этого он нужен был, чтоб эмулировать ответ от сервера, но тут путает дополнительным синтаксисом. Для понимания порядка выполнения кода, лучше раcставить в разных частях console.log
Я правильно вас понимаю (12:15), что если не пользоваться Babel, то код async-await не будет скомпилирован и завершится с ошибкой? И что только Babel транспонирует async-await в колбэки и промисы? Или же в настоящее время это транспонирование происходит уже нативно без стороннего компилятора вроде Babel?
А как быть когда надо делать fetch запросы в цикле? Условно в коде который описал ниже, там где console.log хочу ещё помимо синхронно выполнить fetch запрос. Или вообще можно как-то более правильно чисто async await-ами всё переписать? let count = 0; function printer() { return new Promise(resolve => { setTimeout(()=>{ resolve(console.log('+2 sec...')) }, 2000) }); } (async _ => { console.log('Start') while (count
ну, и где же здесь асинхронность, если, как вы говорите, "await позволяет НЕ ПЕРЕХОДИТЬ К СЛЕДУЮЩЕЙ СТРОЧКЕ, ПОКА ПРОМИС НА ТЕКУЩЕЙ СТРОЧКЕ НЕ ВЫПОЛНИТСЯ"? Надеюсь, вы понимаете, что описали как раз синхронное (блокирующее) исполнение кода. Асинхронность - она ведь не столько про ожидание результата, сколько про возможность исполнения чего-либо другого во время ожидания результата.
Получаю масив ссылок на изображения. Нужно их слепить в одно. Нужно дождаться загрузку каждого склеить (делаю это через canvas). Обьект изображения имеет евент onload. Как мне сделать. Как наложить изображения попорядку когда .onload у промисе не работает!?
а как это можно применить в цикле? К примеру при прохождении массива циклом, если данные подходят по условиям, нужно выполнить еще две функции которые делают fetch запросы и нужно чтобы была асинхронность, чтобы сперва выполнилась getFirstData() потом getSecondData() и цикл корректно отрабатывал
возникло 2 вопроса по этому видео: 1. await можно только к Promise применять? или к любой функции, результат работы которой может быть задержан (например appendChild тот же)? 2. promise позволяет передать какие-то данные в .catch, а конструкция try {} catch {} finally {}, как я понимаю, такой возможности не имеет?
1) Только к Promise :) await это условно тот же then (then только у промиса есть) 2) в catch приходит error как параметр try {} catch (error) {} Этот параметр error и есть наше значение из reject
Пишу из 2021, вроде посмотрел внимательно урок по Promise и первый пример функции меня "убил наповал". Полез разбираться, что чего и как и в итоге, что получилось, для тех кто так же не понял как я: const delay = (ms) => new Promise((r) => setTimeout(r, ms)); Во первых это короче и даже понятнее. Итак что у нас происходит, пишу как все еще ученик: присваиваем переменной ссылку на безымянную стрелочную функцию с параметром ms она в свою очередь возвращает Promise, который возвращает по исполнении функцию setTimeout через ms миллисекунд.
подскажите не пойму почему не работает такое function buyIngridiens(){ return setTimeout(() => { console.log('купили продукты'); }, 4000) } function goingIngridients() { return setTimeout(() => { console.log(' принесли продукты домой '); }, 1000); async function vsePoPoryadku() { await buyIngridiens(); await goingIngridients(); } vsePoPoryadku() всегда порядок вывода зависит от setTimeout а не async/await
я помню когда делал все через then только, понимал что это крутая штука что позволяет дождатся асинхронной функции, словить результат и далее его обрабатывать. ну как асинк и авейт. про промисы вобще не шарил думал промис = асинхронному методу. типа так называют в яваскрипте просто так ХД)
Спасибо большое за видео) Очень доступно и понятно!!! Владилен, вы не могли бы снять видео про pwa во vue-cli3? Или оно уже есть, а я не нашла на канале?
Не понятно, зачем response.json() возвращает promise. Какие там задержки могут быть, ведь это всего лишь форматирование ответа? Да и сам fetch уже возвращает promise. Promise в promise и promis'ом погоняет)
Так же хорошая идея на счёт парсера на node js , на Ютубе нормальных видео нет вообще, а в статьях говорят только как спарсить в самой ноде а как это уже на свою html страницу вывести нет. Тут как раз и fetch будет нужен, потому что нужно будет как то делать запрос на сервер что бы получить эти данные
@@VladilenMinin ну если допустим есть парсер на ноде и он выводит текст только в терминале, то что бы его переместить себе в html нужно поднять сервер и сделать к нему запрос(тем же fetch) ,так ведь? Нода же не имеет доступ к дому, поэтому только так. И вот такого описания парсера с нуля и до момента вывода себе в html нету вообще нигде, ни в одном русском источнике
Эксклюзивный контент на моем Boosty: boosty.to/vladilen
Офигенное объяснение. Здорово, что приведено сравнение с промисами, тогда все понятно становится! Супер
Как всегда все четко и по теме. Владилен ты делаешь огромный вклад в развитие ру комьюнити, спасибо тебе =)
Благодарю за отзыв)
Владилен, очень хорошо понимается материал благодаря твоим видео! Однозначно лучший контент.
Если это возможно рассмотри систематизацию своих видео с дополнительными задачами по материалу.
Уверен будет вообще пушечно
Это лучший материал по JS на русскоязычном youtube.
Отдельно хотелось бы поблагодарить Вас Владилен за курс по Vue. Он превосходен. Он помог мне довольно быстро вникнуть во Vue.
Посоветовал его одному коллеге верстальщику, он также остался им очень доволен.
Спасибо Вам огромное! :)))
Владилен вы не поверите: но во время создания промиса вместо setTimeout(()=>r(),ms) можно просто записать setTimeout(r,ms); r - это есть resolve, и мы передаём ссылку на функцию в качестве колбека
Про веб воркеры было бы супер! Классный видос, лайк
про sharedArrayBuffer семафоры мютексы и атомарные операции.
Твоя мечта сбылась
ещё вебсокеты каеф
Твои уроки раскрывают суть каждой концепции. Ты описываешь проблему и механизм в языке, который эту проблему решает. Информация так усваивается намного лучше. В других уроках описывают некоторые факты о части языка и не говорят как это использовать и новичок не понимает как он это может применить. Спасибо большое за труд
в прошлом году доходило долго, а в этом намного легче и уже сразу понятно)) очень информативные и понятные уроки) спасибо за труды
на мой взгляд самое доступное объяснение работы async/await в рунете. лайк/подписка
о арыстан ассалаумагалейкум братан
Большущее спасибо :) Без таких знаний асинхронность не хило выносит мозг)))
Люблю такие видосы. Где не льют 50 минут теорию со слайдами на своем птичьем наречии, а за 14 минут на практике показывают как, да чё. Спасибо автору!
огромное спасибо за видео!!! такого понятного и простого объяснения async/await я еще не встречал. очень классные и понятные видео
Благодарю за отзыв, рад такому результату)
Чудесно объяснил, благодарочка 🤙
Я в свое время так намучался с получение данных с апи.... а тут было все так доступно. Очень полезно, спасибо тебе за контент!
Конструктивно и максимально доходчиво.
Владилен, спасибо. Благодаря твоему каналу время карантина вследствие чертового коронавируса проходит как нельзя плодотворно.
Благодарю Вас Владилен! С Вами очень интересно изучать JavaScript!)
Согласен, у других смотрел так и не понял что такое promise, async and await, методы массивов, которые новые map и тд, а тут все сразу стало понятно, и операторы rest и spread туда же, столько полезных вещей которыми я раньше не пользовался, жаль конечно))
Владилен топ! Если у тебя будет своя школа, я пойду туда учиться :D
Посмотрев этот ролик я прям осознал что такое асинхронность в жс и в чем разница между then и await (наконец таки)
Ура!)
Усложнил все до невозможности. Не знаю насчёт остального, но это видео было максимально сложным для новичка
я чувствую себя максимально тупым последние несколько уроков
Все-таки Promise и async/await одна из самых сложных тем в JS. Но после таких уроков все становится сразу понятно
100%
Спасибо. Про Webpack круто было бы послушать :)
Думаю сделаю быстрый курс по нему)
Спасибо за урок очень мощьный курс по JavaScript
Очень круто обьясняешь. Коротко и по делу!)) Pozdrawiam z Polski!!!
Влад, ты красавчик! Спасибо тебе за науку! Вкладываешь знания в наши бестолковые головы.
Не думаю, что они бестолковые, иначе как бы они нашли мой канал:)
Шучу конечно, но за отзыв спасибо
Очень подробно разжевал!спасибо огромное за труд
ska, ты топ, Владилен
спасиобо
Самое главное, что смотря на async await может показаться, что мы только ждём код и всё. НО, как и then, await не блокирует код, а просто откладывает выполнение действующей функции (или call stack если смотреть глобальнее) и продолжит выполнять код дальше
Такой код выведет 3 1 4 2. Если уже поставить await верхнего уровня перед вызовом функции, то уже будет 3 1 2 4, так как мы уже дожидаемся этой функции и по сути смысла в асинхронности тогда нет. Код внутри промиса выполняется синхронно, поэтому туда реально нужно ложить то, чего вы хотите подождать типа запроса или того же setTimeout
```JavaScript
async function f() {
console.log("1")
let promise = new Promise((resolve, reject) => {
setTimeout(() => resolve("готово!"), 1000)
});
let result = await promise; // будет ждать, пока промис не выполнится (*)
console.log("2")
alert(result); // "готово!"
}
console.log("3")
f();
console.log("4")
```
Спасибо за видео! Proxy теперь нужен)
Спасибо тебе Владилен за твои видосы.
"Фетчить некоторые туду", буду теперь это говорить когда меня спрашивают чем я занимаюсь
Как ты круто объясняешь! Последовательно, по уровню сложности.
Блин, ты крут, человек! Учился по твоему ангуляр курсу, теперь вот доучиваю в ютубе. Супер!
Владилен ты не представляешь как ты мне помог этим уроком!!!!
Отличное видео - аккуратное объяснение важных истин простым языком.
Спасибо! Переписывал store для авторизации из урока по Vue CRM, там была готовая библиотека firebase, а мне надо было через API реализовывать. Это видео очень выручило!
Я что-то поняла, неужели, офигеть! но боюсь что окажется, что рано радуюсь, что все-таки не поняла, потому что я не могу поверить, что я наконец это поняла. Спасибо Вам
Спасибо большое за видосы красавчик!
Спасибо, Добрый Человек!!!
спасибо за ролик! очень полезная информация
спасибо за такое прекрасное обьяснение!!!
Это чертовски полезно
Владилен, спасибо за урок!
Любишь ты все темы усложнять
Супер видео! Спасибо вам! Плейлист тоже классный!
Благодарю за отзыв)
Обожаю тебя!!!
async/await это синтаксический сахар на генератор/промис, где генератор используется для превращения асинхронного кода в синхронный, а промис для выполнения асинхронного кода. То есть тут суть в генераторе, а промис деталь реализации генератора. Промис можно заменить на простой обратный вызов (callback).
Your teaching is very good. Thank you
Спасибо за урок!
Спасибо большое за отличное объяснение! Не совсем понял момент с
.then(() => {
return fetch(url)
}
.then(response => response.json())
fetch() возвращает Promise, then() оборачивает все что в return в новый Promise. Получается, что результат then() - Promise? Как тогда последующий then() вызывает у этого объекта json() ?
10:15 зачем писать await repsonse.json() если мы уже ждем fetch который запишет результат в переменную response после того как отработает, по идее await для repsonse.json() уже не нужен, или я не прав? @Владилен Минин
без .json() ты не получишь тело ответа
Классно объяснил, браво! Спасибо!
Пожалуй, самое понятное объяснение. Спасибо.
Спасибо, все очень доступно!!!
Теперь уж точно прям очень нужен прокси
А почему стоит await на response.json() , это ведь уже синхронная операция? И можно ли делать return в async методах?
Метод json() возвращает промис.
Добрый день, подскажите как дальше работать с data ? Или только внутри промиса и больше никак не вывести data в глобальную зону видимости?
Спасибо большое! От души!!!
Владилен! Спасибо за ваши уроки. Я часто смотрю ваши уроки на iPhone. Нельзя ли поменять черный бэкграунд на белый, чтобы лучше был виден код? Спасибо!
Спасибо, но это уже тяжеловато было понять) Усугубилось всё стрелочными функциями
Малюсенький вопрос: я правильно понимаю, что работа всей страницы при наличии такого кода останавливается до того момента, пока не выполнится "виртуальный промис" в виде таймера delay? Или это просто отдельный поток где js выполняет для конкретной функции свой код и затем возвращает его? Ну, то есть, если мы присвоим переменной эту функцию, к ней можно будет обратиться только через 2 секунды, и всё это время скрипт будет недоступен?
Спасибо за видео!
попробовал заменить в своем микропроекте .then на async/await и получилось даже еще более громоздко, может чуть читается легче, так и мне никто не мешает .then переносить на новую строку.
Спасибо Вам большое, Владилен. Очень доступно.
На 6:35 для тех кому трудно понять, как и мне, избавьтесь от setTimeoute. Пишите пустой промис const p = new Promise((resolve)=>resolve()). Сам setTimeoute путает, да до этого он нужен был, чтоб эмулировать ответ от сервера, но тут путает дополнительным синтаксисом. Для понимания порядка выполнения кода, лучше раcставить в разных частях console.log
Отлично обяснил, понятно и без лишних слов
Подскажите, а зачем второй раз прописывать await? Там же вроде как уже синхронно можно response в json перевести
Я правильно вас понимаю (12:15), что если не пользоваться Babel, то код async-await не будет скомпилирован и завершится с ошибкой? И что только Babel транспонирует async-await в колбэки и промисы? Или же в настоящее время это транспонирование происходит уже нативно без стороннего компилятора вроде Babel?
Сейчас уже можно без Babel использовать
А как быть когда надо делать fetch запросы в цикле? Условно в коде который описал ниже, там где console.log хочу ещё помимо синхронно выполнить fetch запрос. Или вообще можно как-то более правильно чисто async await-ами всё переписать?
let count = 0;
function printer()
{
return new Promise(resolve => {
setTimeout(()=>{
resolve(console.log('+2 sec...'))
}, 2000)
});
}
(async _ => {
console.log('Start')
while (count
ну, и где же здесь асинхронность, если, как вы говорите, "await позволяет НЕ ПЕРЕХОДИТЬ К СЛЕДУЮЩЕЙ СТРОЧКЕ, ПОКА ПРОМИС НА ТЕКУЩЕЙ СТРОЧКЕ НЕ ВЫПОЛНИТСЯ"? Надеюсь, вы понимаете, что описали как раз синхронное (блокирующее) исполнение кода. Асинхронность - она ведь не столько про ожидание результата, сколько про возможность исполнения чего-либо другого во время ожидания результата.
Спасибо за урок!
Получаю масив ссылок на изображения. Нужно их слепить в одно. Нужно дождаться загрузку каждого склеить (делаю это через canvas). Обьект изображения имеет евент onload. Как мне сделать. Как наложить изображения попорядку когда .onload у промисе не работает!?
Почему в коде нет точек с запятой в конце строк?
красиво шпарит.
на двойной скорости послушал. всо чотко
а как это можно применить в цикле? К примеру при прохождении массива циклом, если данные подходят по условиям, нужно выполнить еще две функции которые делают fetch запросы и нужно чтобы была асинхронность, чтобы сперва выполнилась getFirstData() потом getSecondData() и цикл корректно отрабатывал
Спасибо, урок действительно полезный. Впрочем, как всегда)
Благодарю)
у меня одного ошибка "VM586:10 GET jsonplaceholder.typicode.com/todos net::ERR_FAILED" ?
То есть кроме промиса, я не могу получить какие то данные через ретурн при вызове async функции?
Спасибо за видео :)
возникло 2 вопроса по этому видео:
1. await можно только к Promise применять? или к любой функции, результат работы которой может быть задержан (например appendChild тот же)?
2. promise позволяет передать какие-то данные в .catch, а конструкция try {} catch {} finally {}, как я понимаю, такой возможности не имеет?
1) Только к Promise :) await это условно тот же then (then только у промиса есть)
2) в catch приходит error как параметр try {} catch (error) {} Этот параметр error и есть наше значение из reject
@@grommaks спасибо. понял))
Пишу из 2021, вроде посмотрел внимательно урок по Promise и первый пример функции меня "убил наповал". Полез разбираться, что чего и как и в итоге, что получилось, для тех кто так же не понял как я:
const delay = (ms) => new Promise((r) => setTimeout(r, ms));
Во первых это короче и даже понятнее. Итак что у нас происходит, пишу как все еще ученик:
присваиваем переменной ссылку на безымянную стрелочную функцию с параметром ms
она в свою очередь возвращает Promise, который возвращает по исполнении функцию setTimeout через ms миллисекунд.
Спасибо! Как всегда все понятно.
Красавчик!
Очень сложно для меня, плохо запоминается, что нибудь можете посоветовать, как разобраться в этой теме?
Такая же фигня. Надо писать, писать и писать. ИМХО.
Спасибо! Лучший)
Круто 👍
9:40 я не понял, почему операция получения .json() асинхронна? Мы ведь уже получили объект с сервера строкой выше.
Такая же история. Выглядит будто создатели перекурили со словами "а давайте напихаем промисы везде!"
@@trueMoRoZ Безумие программистов. Мол если IDE нам не помогает понять код, то мы придумаем гениальную свою идею. Сумасшествие и только.
thank you again )
а про axios есть что-нибудь у тебя? не могу найти
подскажите не пойму почему не работает такое
function buyIngridiens(){
return setTimeout(() => {
console.log('купили продукты');
}, 4000)
}
function goingIngridients() {
return setTimeout(() => {
console.log(' принесли продукты домой ');
}, 1000);
async function vsePoPoryadku() {
await buyIngridiens();
await goingIngridients();
}
vsePoPoryadku()
всегда порядок вывода зависит от setTimeout а не async/await
всегда так - смотришь, всё понятно, начинаешь делать, ну нихуя не понятно‼ пока собственными ручками не сделаешь, хрен поймешь‼
Это всегда так ! )
сначала смотришь, потом делаешь, потом еще раз смотришь, благо youtube иногда подкидывает уже просмотренные ролики
я помню когда делал все через then только, понимал что это крутая штука что позволяет дождатся асинхронной функции, словить результат и далее его обрабатывать. ну как асинк и авейт. про промисы вобще не шарил думал промис = асинхронному методу. типа так называют в яваскрипте просто так ХД)
И это он еще не самый понятливый объяснятель)
@@yaroslavzef7267 а кто самый понятливый?
ToJson тоже возвращает promise?
Спасибо большое за видео) Очень доступно и понятно!!!
Владилен, вы не могли бы снять видео про pwa во vue-cli3? Или оно уже есть, а я не нашла на канале?
Красава Вледилен!
Не понятно, зачем response.json() возвращает promise. Какие там задержки могут быть, ведь это всего лишь форматирование ответа? Да и сам fetch уже возвращает promise. Promise в promise и promis'ом погоняет)
Так же хорошая идея на счёт парсера на node js , на Ютубе нормальных видео нет вообще, а в статьях говорят только как спарсить в самой ноде а как это уже на свою html страницу вывести нет. Тут как раз и fetch будет нужен, потому что нужно будет как то делать запрос на сервер что бы получить эти данные
NodeJS на сервере, там не будет fetch
Скорее какой нибудь request
@@VladilenMinin ну если допустим есть парсер на ноде и он выводит текст только в терминале, то что бы его переместить себе в html нужно поднять сервер и сделать к нему запрос(тем же fetch) ,так ведь? Нода же не имеет доступ к дому, поэтому только так. И вот такого описания парсера с нуля и до момента вывода себе в html нету вообще нигде, ни в одном русском источнике
@@Скыбыдыщь Все, что вы спарсите, кроме картинок, надо закидывать в базу. А дальше все работает как обычный сайт.
Круто ! Спасибо)!
А зачем нам await delay(2000) внутри async функции ?
Доброго времени суток Владилен!
Если у вас будет время, подскажите пожалуйста что такое нативная функция? Также нативность ?
Встроенная в сам язык
fetchAsyncTodos().then(console.log).catch(console.log) можно было и так писать вместо try, catch ведь эта функция всегда возвращает промис