Урок 8. JavaScript. Как работает Async, Await. Работа с сервером c fetch

Эксклюзивный контент на моем Boosty: boosty.to/vlad...
Telegram: t.me/js_by_vla...
Instagram: / vladilen.minin
Roadmap по каналу:
vladilen.notio...
Урок 8. JavaScript. Как работает Async, Await. Работа с сервером c fetch
В ролике я расскажу о том, как работают операторы async await в Javascript на примере работы с сервером с методом fetch
Вы узнаете как применять async await и как обрабатывать ошибки, если они есть
Сложный JavaScript простым языком:
• Урок 1. JavaScript. Чт...

[@VladilenMinin]

Эксклюзивный контент на моем Boosty: boosty.to/vladilen

[@АлексадрМироненко-ю8р]

Владилен, очень хорошо понимается материал благодаря твоим видео! Однозначно лучший контент. Если это возможно рассмотри систематизацию своих видео с дополнительными задачами по материалу. Уверен будет вообще пушечно

[@mgm_smile]

Как всегда все четко и по теме. Владилен ты делаешь огромный вклад в развитие ру комьюнити, спасибо тебе =)

[@VladilenMinin]

Благодарю за отзыв)

[@radikovichkz2470]

Владилен вы не поверите: но во время создания промиса вместо setTimeout(()=>r(),ms) можно просто записать setTimeout(r,ms); r - это есть resolve, и мы передаём ссылку на функцию в качестве колбека

[@Vlad-em1bx]

Это лучший материал по JS на русскоязычном youtube. Отдельно хотелось бы поблагодарить Вас Владилен за курс по Vue. Он превосходен. Он помог мне довольно быстро вникнуть во Vue. Посоветовал его одному коллеге верстальщику, он также остался им очень доволен. Спасибо Вам огромное! :)))

[@nikdanik]

Про веб воркеры было бы супер! Классный видос, лайк

[@realfootball338]

про sharedArrayBuffer семафоры мютексы и атомарные операции.

[@awenn2015]

Твоя мечта сбылась

[@bekzhan356]

ещё вебсокеты каеф

[@Wraith2401]

на мой взгляд самое доступное объяснение работы async/await в рунете. лайк/подписка

[@wininf0]

о арыстан ассалаумагалейкум братан

[@qazxswedc389]

огромное спасибо за видео!!! такого понятного и простого объяснения async/await я еще не встречал. очень классные и понятные видео

[@VladilenMinin]

Благодарю за отзыв, рад такому результату)

[@Fxgleb]

Посмотрев этот ролик я прям осознал что такое асинхронность в жс и в чем разница между then и await (наконец таки)

[@VladilenMinin]

Ура!)

[@nivaech]

Владилен, спасибо. Благодаря твоему каналу время карантина вследствие чертового коронавируса проходит как нельзя плодотворно.

[@hugor778]

Чудесно объяснил, благодарочка 🤙

[@nicksimmons4722]

в прошлом году доходило долго, а в этом намного легче и уже сразу понятно)) очень информативные и понятные уроки) спасибо за труды

[@АнтонПетренко-ш4ш]

Очень круто обьясняешь. Коротко и по делу!)) Pozdrawiam z Polski!!!

[@ИгорьИгорь-с3ю]

Люблю такие видосы. Где не льют 50 минут теорию со слайдами на своем птичьем наречии, а за 14 минут на практике показывают как, да чё. Спасибо автору!

[@Vlad-jp3co]

Твои уроки раскрывают суть каждой концепции. Ты описываешь проблему и механизм в языке, который эту проблему решает. Информация так усваивается намного лучше. В других уроках описывают некоторые факты о части языка и не говорят как это использовать и новичок не понимает как он это может применить. Спасибо большое за труд

[@АлексейМохров-е9н]

Все-таки Promise и async/await одна из самых сложных тем в JS. Но после таких уроков все становится сразу понятно

[@charliebrown5554]

100%

[@СтаниславСеменов-щ1п]

Конструктивно и максимально доходчиво.

[@ВладиславЦерковный]

Очень подробно разжевал!спасибо огромное за труд

[@mumin_f]

Спасибо! Переписывал store для авторизации из урока по Vue CRM, там была готовая библиотека firebase, а мне надо было через API реализовывать. Это видео очень выручило!

[@talas12341]

всегда так - смотришь, всё понятно, начинаешь делать, ну нихуя не понятно‼ пока собственными ручками не сделаешь, хрен поймешь‼

[@ХалидИбнВалид-т1э]

Это всегда так ! )

[@konstantinsoluyanov8505]

сначала смотришь, потом делаешь, потом еще раз смотришь, благо youtube иногда подкидывает уже просмотренные ролики

[@Lynatik001]

я помню когда делал все через then только, понимал что это крутая штука что позволяет дождатся асинхронной функции, словить результат и далее его обрабатывать. ну как асинк и авейт. про промисы вобще не шарил думал промис = асинхронному методу. типа так называют в яваскрипте просто так ХД)

[@yaroslavzef7267]

И это он еще не самый понятливый объяснятель)

[@ricojohn8249]

@@yaroslavzef7267 а кто самый понятливый?

[@kaelnlarien7623]

Самое главное, что смотря на 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") ```

[@МИСТЕРУГОЛЁК]

Спасибо, но это уже тяжеловато было понять) Усугубилось всё стрелочными функциями

[@АлександрМелянюк-ц9ю]

Спасибо, Добрый Человек!!!

[@svdl3000]

Отличное видео - аккуратное объяснение важных истин простым языком.

[@StalkerRaftik]

Усложнил все до невозможности. Не знаю насчёт остального, но это видео было максимально сложным для новичка

[@СтасикЛис]

я чувствую себя максимально тупым последние несколько уроков

[@lumeaceaiuluisrl6343]

Владилен, спасибо за урок!

[@alexandrskuratovich1394]

А почему стоит await на response.json() , это ведь уже синхронная операция? И можно ли делать return в async методах?

[@lidijajezova2025]

Метод json() возвращает промис.

[@27sosite73]

ska, ты топ, Владилен спасиобо

[@yasenclassen]

10:15 зачем писать await repsonse.json() если мы уже ждем fetch который запишет результат в переменную response после того как отработает, по идее await для repsonse.json() уже не нужен, или я не прав? @Владилен Минин

[@dreawmy2912]

без .json() ты не получишь тело ответа

[@parlaitaliano]

Я что-то поняла, неужели, офигеть! но боюсь что окажется, что рано радуюсь, что все-таки не поняла, потому что я не могу поверить, что я наконец это поняла. Спасибо Вам

[@СвятославДворський]

Блин, ты крут, человек! Учился по твоему ангуляр курсу, теперь вот доучиваю в ютубе. Супер!

[@null-lu8it]

Любишь ты все темы усложнять

[@Abdul-hy4cy]

Как ты круто объясняешь! Последовательно, по уровню сложности.

[@ammoney159]

Спасибо большое за видосы красавчик!

[@azalinka3721]

спасибо за такое прекрасное обьяснение!!!

[@phonty29]

Your teaching is very good. Thank you

[@MrVertu01]

Спасибо за урок!

[@temirkhanamanbaev42]

Классно объяснил, браво! Спасибо!

[@gorbulevsv]

Спасибо, все очень доступно!!!

[@dartoranges]

Владилен ты не представляешь как ты мне помог этим уроком!!!!

[@ВладХобта-ч3и]

Очень сложно для меня, плохо запоминается, что нибудь можете посоветовать, как разобраться в этой теме?

[@plan-4D]

Такая же фигня. Надо писать, писать и писать. ИМХО.

[@artemijeka]

Спасибо!

[@iznu3]

Спасибо за видео!

[@Nikita-hr6ss]

А как быть когда надо делать 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

[@damir-n1]

Спасибо Вам большое, Владилен. Очень доступно.

[@enotus_chang]

Пожалуй, самое понятное объяснение. Спасибо.

[@Pr0xytube]

Спасибо, урок действительно полезный. Впрочем, как всегда)

[@NextgenSocialReptile]

Благодарю)

[@ZhanOmar]

Помню как мучался с созданием небольшого API на NodeJS с использованием пакетов MySQL, fs и http(s), где нужно было просто вернуть файл, перед этим найдя его в БД. Вот там меня и выбесил mysql пакет со своим коллбэком и необходимостью передавать в него request из пакета http, чтобы вернуть пользователю данные. Благо в пакете mysql2 был предусмотрен синхронный метод 😅

[@Нормчё-е5у]

Спасибо большое за видео) Очень доступно и понятно!!! Владилен, вы не могли бы снять видео про pwa во vue-cli3? Или оно уже есть, а я не нашла на канале?

[@spiteman]

Пишу из 2021, вроде посмотрел внимательно урок по Promise и первый пример функции меня "убил наповал". Полез разбираться, что чего и как и в итоге, что получилось, для тех кто так же не понял как я: const delay = (ms) => new Promise((r) => setTimeout(r, ms)); Во первых это короче и даже понятнее. Итак что у нас происходит, пишу как все еще ученик: присваиваем переменной ссылку на безымянную стрелочную функцию с параметром ms она в свою очередь возвращает Promise, который возвращает по исполнении функцию setTimeout через ms миллисекунд.

[@vladislavivanov4124]

Спасибо! Лучший)

[@PizekattoX]

Отлично обяснил, понятно и без лишних слов

[@shaxanematov8516]

fetchAsyncTodos().then(console.log).catch(console.log) можно было и так писать вместо try, catch ведь эта функция всегда возвращает промис

[@web2905]

Спасибо за видео :)

[@ШамильАлисултанов-т6э]

Map, WeakMap, Set, WeakSet :-) а то их почему то редко используют в практике

[@VladilenMinin]

Слушай, ну это уже к ES6 относится Много людей почему-то спрашивают. Может плейлист сделать?

[@МаМмм-ь9х]

ToJson тоже возвращает promise?

[@АлександрКоковкин-о6п]

Видосы огонь, Владилен, спасибо за работу)) Но не въехал зачем нужна задержка в 2сек.

[@АлександрШейка-ц5ь]

Для наглядности. В реальных проектах никакие задержки не нужны.

[@sergion1323]

Почему в коде нет точек с запятой в конце строк?

[@sapperus]

Круто, спасибо!

[@FillPower]

Set & Map Weak Map, примеры использования следующее пожалуйста)

[@VladilenMinin]

Быть может отдельный плейлист по ES6?

[@FillPower]

Владилен Минин, было круто, если сделали бы

[@СерёгаСокольский]

Спасибо, Владилен! Хорошо рассказываешь. Можешь сделать видео про Webassembly?У дотнэтчиков скоро выходит инструмент Blazor, как замена JS фреймворкам, да и в целом языку JS. Front - end они смогут писать на C#. Получится некий полноценный фулстэк из одного языка. Но насколько мне известно, им всё же придётся использовать JS для некоторых операций. Microsoft планирует в своих браузерах полностью заменить JS на webassembly (C#). Каково твоё мнение и что стоит ждать?

[@VladilenMinin]

Пока я не очень знаком с этой темой, только слышал про нее На текущий момент хочу сосредоточиться на JS - уж больно много материала хочу осветить А дальше посмотрю, на что переходить

[@СерёгаСокольский]

@@VladilenMinin Тогда жду курсы или уроки про React Native и Electron.

[@jamilibrahimli190]

А зачем нам await delay(2000) внутри async функции ?

[@АлексейКлещёв-т4п]

Было бы оч круто освятить ещё такие темы: деструктуризация, rest, spread, каррирование, метод flat у объектов, мемоизация, полиморфы/полифиллы, monkey patching... Да много ещё чего вспомнить можно. Просто это часто на собесах спрашивают, хотя на практике многое из этого практически не используется. Но для понимания каверзи знать стоит. Впрочем, автору виднее

[@VladilenMinin]

Так на канале почти все вещи эти освещены в других роликах

[@АлексейКлещёв-т4п]

@@VladilenMinin а, тогда пардон) я недавно на вашем канале. Планирую пересмотреть много чего тут) p.s. смотрю на юдеми ваши курсы многие

[@VladilenMinin]

Вливайся и добро пожаловать)

[@Briz231]

Малюсенький вопрос: я правильно понимаю, что работа всей страницы при наличии такого кода останавливается до того момента, пока не выполнится "виртуальный промис" в виде таймера delay? Или это просто отдельный поток где js выполняет для конкретной функции свой код и затем возвращает его? Ну, то есть, если мы присвоим переменной эту функцию, к ней можно будет обратиться только через 2 секунды, и всё это время скрипт будет недоступен?

[@sekirogenshiro2210]

хороший урок

[@ИльяЖабров-и5ч]

Подскажите, а зачем второй раз прописывать await? Там же вроде как уже синхронно можно response в json перевести

[@dossh429]

Кстати, необходимо к переменной url в конце /1. Выглядит так const url = 'jsonplaceholder.typicode.com/todos/1'

[@Snake98365]

c 1 в конце не выводит сообщение дата

[@kuzub4ik]

а как это можно применить в цикле? К примеру при прохождении массива циклом, если данные подходят по условиям, нужно выполнить еще две функции которые делают fetch запросы и нужно чтобы была асинхронность, чтобы сперва выполнилась getFirstData() потом getSecondData() и цикл корректно отрабатывал

[@РоманБережной-щ4ы]

подскажите не пойму почему не работает такое 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

[@АнтонБ-щ8ю]

у меня одного ошибка "VM586:10 GET jsonplaceholder.typicode.com/todos net::ERR_FAILED" ?

[@independent3253]

Круто 👍

[@hmelii]

Если указать недействительную ссылку, то в catch выводится пустой объект. Как понять, какая ошибка пришла от сервера?

[@АлександрШейка-ц5ь]

Если ссылка не действительна, то и сервера никакого нет. Просто некому отвечать на запрос. Смотрите инфу в заголовках.

[@RewCSharp]

Спасибо за урок!

[@jobbers5451]

Спасибо. А подскажите как сделать, что бы асинхронная функция ретернила полученные данные, а не возвращала просим.

[@Stamp113]

Функция с меткой async всегда будет возвращать промис.

[@Stamp113]

Вы можете, так сказать, распаковывать возвращаемый промис в другой функции через await. Проблема в том, что новая функция тоже должна быть async.

[@Логовотестировщика]

Благодарю!!

[@bearvorkuta]

То есть кроме промиса, я не могу получить какие то данные через ретурн при вызове async функции?

[@Cat-zh6xx]

Получается .then не нужен?

[@ИльяИваник-ф8ф]

возникло 2 вопроса по этому видео: 1. await можно только к Promise применять? или к любой функции, результат работы которой может быть задержан (например appendChild тот же)? 2. promise позволяет передать какие-то данные в .catch, а конструкция try {} catch {} finally {}, как я понимаю, такой возможности не имеет?

[@grommaks]

1) Только к Promise :) await это условно тот же then (then только у промиса есть) 2) в catch приходит error как параметр try {} catch (error) {} Этот параметр error и есть наше значение из reject

[@ИльяИваник-ф8ф]

@@grommaks спасибо. понял))

[@dossh429]

Доброго времени суток Владилен! Если у вас будет время, подскажите пожалуйста что такое нативная функция? Также нативность ?

[@VladilenMinin]

Встроенная в сам язык

[@АртемАртеменко-й8б]

по тайп скрипту и ангуляру 8 чет будет?

[@VladilenMinin]

Скоро будет много ангуляра)

[@VladilenMinin]

@LuckyGamerTV Пока я фокусируюсь на frontend разработке и про базы в ближайшее время не планировал рассказывать Но ближе к осени вернуть и освещу эту тему

[@greenday5198]

а про axios есть что-нибудь у тебя? не могу найти

[@trueMoRoZ]

Не понятно, зачем response.json() возвращает promise. Какие там задержки могут быть, ведь это всего лишь форматирование ответа? Да и сам fetch уже возвращает promise. Promise в promise и promis'ом погоняет)

[@Fioletka_YT]

лаконичный вариант Владелина async function fetchTodos() { try { await delay(2000) console.log(await ( await fetch(url)).json()) } catch(err) { console.error(err) } }

[@rssreader90]

Как вернуть значение асинхронной функции?

[@Владислав-е6щ9ъ]

🤯👍

[@rvvvr]

спасибо

[@squabble3332]

я так понимаю, использование промисов или асинков является выбором чисто самого писателя? есть ли какие-то кардинальные различия, которые вынуждают выбрать тот или иной вариант ? Имхо вариант с асинками мне нравится больше, его использование не выстраивает бесконечную пирамиду и максимально понятно, что и где происходит. Или это и есть главный плюс?)

[@VladilenMinin]

Это просто синтаксис для удобной работы

[@squabble3332]

Благодарю, значит все правильно)

[@КостяКреон]

...можно вопрос, почему ты всегда объявляешь переменные тип CONST, есть же ещё и LET, VAR. Заранее.... Благодарю за ответ!

[@VladilenMinin]

Best practice

[@evgeniyn1542]

Отличное видео, спасибо. Владилен, когда будут ваши авторские курсы на Udemy? :)

[@NextgenSocialReptile]

Привет, в июле будет первый курс)

[@evgeniyn1542]

@@NextgenSocialReptile Отлично! )

[@yerassylkelsingazin2408]

Вот с этого видео как то тяжело пошло. Надо будет посидеть хорошенько.

[@DanReksar]

Спасибо) т.е. предпочтительнее пользоваться async / await, чем промисами напрямую. Или есть ситуации, когда async / await не получится использовать?

[@VladilenMinin]

Я бы почти всегда их использовал, редко когда нужны именно промисы Но стоит помнить, что еще не все бразуеры нативно поддерживают подобный синтаксис и лучше пропускать его через babel

[@inzoddex8312]

В каких случая все это можно применять? В авторизации например или где то еще?

[@trueMoRoZ]

Везде где возможны задержки и где можно распараллелить выполнение кода

[@damirkacineman538]

а нельзя ли всместо () => r() во второй строке писать просто r? Спрашиваю потому что заметил, что ты в нескольких уроках пишешь в подобных случаях стрелочку, спасибо за ответ)

[@АлександрШейка-ц5ь]

если вы напишете просто r - то получите указатель на функцию, если вы напишите r() - то заставите выполниться функцию и получите результат ее работы.

[@-it-kidys]

Шикарное объяснение! Огромное спасибо! Много видосов смотрел по промисам и синтаксическим сахаром над ними (async/await), но такой подачи не встречал ни в одном из роликов. У меня только остался вопрос, вот когда мы получаем читаем данные таким образом с REST API какого-нибудь и необходимо отслеживать ввод в текстовое поле и тут же отправлять запрос (событие onChange, например), то можно таким образом "надоесть" серверу с REST API и он может заблокировать запросы.. А вот как решать такого рода задачи?

[@VladilenMinin]

Это зависит от сервера и того, сколько он запросов позволяет принять КОнечно, лучше использовать debounce В rxjs это круто реализовано

[@-it-kidys]

@@VladilenMinin Не коснетесь этой специфики в своих уроках?

[@VladilenMinin]

@@-it-kidys Думаю запишу видео, тема не самая тривиальная

[@sergei_sergeevu4]

Возможно, это видео будет вам полезно) kzbin.info/www/bejne/e5aygZ-tftqYjM0

[@VladilenMinin]

@@sergei_sergeevu4 Автор не плохой кодер, но рассказывает мягко говоря так себе Даже мне тяжело было понять, о чем он

[@СергейР-д2ж]

Это как раз то что мне нужно понять, но я не понимаю.

[@skyguy8039]

Я не понимаю как async await транспилируется в Promise'ы. Хелп, плиз

[@lenurabduramanov7134]

Не знаю как вы, но я ничего не понял из этого видео

[@anti_middle_ages]

Я всё понял. Но я и раньше знал 😅

[@dariavarenka]

Я поняла, но пришлось немало гуглить. Не самый простой из уроков Владилена в общем

[@MetaphoricOwl]

не знаю Русский

[@vanyg4786]

Я раз 5 тему эту смотрел, сейчас пытаюсь вникнуть

[@rousiq]

Что делать с POST, DELETE, PUT запросами оставлю во внутреннем комменте

[@rousiq]

async () => { const url = 'jsonplaceholder.typicode.com/todos/1' const settings = { method: 'POST', headers: { Accept: 'application/json', 'Content-Type': 'application/json', } }; try { const fetchResponse = await fetch(url, settings); const data = await fetchResponse.json(); return data; } catch (e) { return e; } }

[@sqrAnton]

Про throw не упомянули....

[@delusio5638]

на промис можно повесить событие?

[@jonny185]

твоя ава давно тебе ответила)

[@МУСОР_ТВ]

​@@jonny185тудо