Урок 8. JavaScript. Как работает Async, Await. Работа с сервером c fetch
Vložit
- čas přidán 5. 07. 2019
- Эксклюзивный контент на моем Boosty: boosty.to/vladilen
Telegram: t.me/js_by_vladilen
Instagram: / vladilen.minin
Roadmap по каналу:
vladilen.notion.site/Roadmap-...
Урок 8. JavaScript. Как работает Async, Await. Работа с сервером c fetch
В ролике я расскажу о том, как работают операторы async await в Javascript на примере работы с сервером с методом fetch
Вы узнаете как применять async await и как обрабатывать ошибки, если они есть
Сложный JavaScript простым языком:
• Урок 1. JavaScript. Чт...
Эксклюзивный контент на моем Boosty: boosty.to/vladilen
Офигенное объяснение. Здорово, что приведено сравнение с промисами, тогда все понятно становится! Супер
Большущее спасибо :) Без таких знаний асинхронность не хило выносит мозг)))
Как всегда все четко и по теме. Владилен ты делаешь огромный вклад в развитие ру комьюнити, спасибо тебе =)
Благодарю за отзыв)
огромное спасибо за видео!!! такого понятного и простого объяснения async/await я еще не встречал. очень классные и понятные видео
Благодарю за отзыв, рад такому результату)
Владилен, спасибо. Благодаря твоему каналу время карантина вследствие чертового коронавируса проходит как нельзя плодотворно.
Я в свое время так намучался с получение данных с апи.... а тут было все так доступно. Очень полезно, спасибо тебе за контент!
Благодарю Вас Владилен! С Вами очень интересно изучать JavaScript!)
Согласен, у других смотрел так и не понял что такое promise, async and await, методы массивов, которые новые map и тд, а тут все сразу стало понятно, и операторы rest и spread туда же, столько полезных вещей которыми я раньше не пользовался, жаль конечно))
на мой взгляд самое доступное объяснение работы async/await в рунете. лайк/подписка
Отличное видео - аккуратное объяснение важных истин простым языком.
Спасибо за видео! Proxy теперь нужен)
Как ты круто объясняешь! Последовательно, по уровню сложности.
Спасибо! Как всегда все понятно.
Красавчик!
Блин, ты крут, человек! Учился по твоему ангуляр курсу, теперь вот доучиваю в ютубе. Супер!
Это лучший материал по JS на русскоязычном youtube.
Отдельно хотелось бы поблагодарить Вас Владилен за курс по Vue. Он превосходен. Он помог мне довольно быстро вникнуть во Vue.
Посоветовал его одному коллеге верстальщику, он также остался им очень доволен.
Спасибо Вам огромное! :)))
Спасибо тебе Владилен за твои видосы.
Спасибо Вам большое, Владилен. Очень доступно.
Влад, ты красавчик! Спасибо тебе за науку! Вкладываешь знания в наши бестолковые головы.
Не думаю, что они бестолковые, иначе как бы они нашли мой канал:)
Шучу конечно, но за отзыв спасибо
Владилен, спасибо за урок!
Спасибо, Добрый Человек!!!
Спасибо! Переписывал store для авторизации из урока по Vue CRM, там была готовая библиотека firebase, а мне надо было через API реализовывать. Это видео очень выручило!
Отлично обяснил, понятно и без лишних слов
Супер видео! Спасибо вам! Плейлист тоже классный!
Благодарю за отзыв)
Очень круто обьясняешь. Коротко и по делу!)) Pozdrawiam z Polski!!!
Пожалуй, самое понятное объяснение. Спасибо.
Спасибо за урок очень мощьный курс по JavaScript
Очень подробно разжевал!спасибо огромное за труд
Владилен ты не представляешь как ты мне помог этим уроком!!!!
Конструктивно и максимально доходчиво.
Владилен вы не поверите: но во время создания промиса вместо setTimeout(()=>r(),ms) можно просто записать setTimeout(r,ms); r - это есть resolve, и мы передаём ссылку на функцию в качестве колбека
Спасибо за урок!
Классно объяснил, браво! Спасибо!
Я что-то поняла, неужели, офигеть! но боюсь что окажется, что рано радуюсь, что все-таки не поняла, потому что я не могу поверить, что я наконец это поняла. Спасибо Вам
Это чертовски полезно
Твои уроки раскрывают суть каждой концепции. Ты описываешь проблему и механизм в языке, который эту проблему решает. Информация так усваивается намного лучше. В других уроках описывают некоторые факты о части языка и не говорят как это использовать и новичок не понимает как он это может применить. Спасибо большое за труд
спасибо за ролик! очень полезная информация
в прошлом году доходило долго, а в этом намного легче и уже сразу понятно)) очень информативные и понятные уроки) спасибо за труды
спасибо за такое прекрасное обьяснение!!!
Про веб воркеры было бы супер! Классный видос, лайк
про sharedArrayBuffer семафоры мютексы и атомарные операции.
Твоя мечта сбылась
ещё вебсокеты каеф
Люблю такие видосы. Где не льют 50 минут теорию со слайдами на своем птичьем наречии, а за 14 минут на практике показывают как, да чё. Спасибо автору!
Спасибо, все очень доступно!!!
Спасибо большое за видосы красавчик!
Владилен топ! Если у тебя будет своя школа, я пойду туда учиться :D
Your teaching is very good. Thank you
Опа новый видосик! 😋
Красава Вледилен!
Обожаю тебя!!!
Спасибо, урок действительно полезный. Впрочем, как всегда)
Благодарю)
Спасибо за видео!
Круто ! Спасибо)!
Спасибо большое! От души!!!
Спасибо! Лучший)
Спасибо. Про Webpack круто было бы послушать :)
Думаю сделаю быстрый курс по нему)
"Фетчить некоторые туду", буду теперь это говорить когда меня спрашивают чем я занимаюсь
ska, ты топ, Владилен
спасиобо
Спасибо за видео :)
Круто, спасибо!
Посмотрев этот ролик я прям осознал что такое асинхронность в жс и в чем разница между then и await (наконец таки)
Ура!)
Круто 👍
Спасибо, но это уже тяжеловато было понять) Усугубилось всё стрелочными функциями
Спасибо!
хороший урок
thank you again )
Благодарю!!
Все-таки Promise и async/await одна из самых сложных тем в JS. Но после таких уроков все становится сразу понятно
100%
Теперь уж точно прям очень нужен прокси
Спасибо
спасибо
Спасибо большое за видео) Очень доступно и понятно!!!
Владилен, вы не могли бы снять видео про pwa во vue-cli3? Или оно уже есть, а я не нашла на канале?
Усложнил все до невозможности. Не знаю насчёт остального, но это видео было максимально сложным для новичка
я чувствую себя максимально тупым последние несколько уроков
Владилен! Спасибо за ваши уроки. Я часто смотрю ваши уроки на iPhone. Нельзя ли поменять черный бэкграунд на белый, чтобы лучше был виден код? Спасибо!
красиво шпарит.
на двойной скорости послушал. всо чотко
всегда так - смотришь, всё понятно, начинаешь делать, ну нихуя не понятно‼ пока собственными ручками не сделаешь, хрен поймешь‼
Это всегда так ! )
сначала смотришь, потом делаешь, потом еще раз смотришь, благо youtube иногда подкидывает уже просмотренные ролики
я помню когда делал все через then только, понимал что это крутая штука что позволяет дождатся асинхронной функции, словить результат и далее его обрабатывать. ну как асинк и авейт. про промисы вобще не шарил думал промис = асинхронному методу. типа так называют в яваскрипте просто так ХД)
И это он еще не самый понятливый объяснятель)
@@yaroslavzef7267 а кто самый понятливый?
Самое главное, что смотря на 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")
```
Любишь ты все темы усложнять
Спасибо большое за отличное объяснение! Не совсем понял момент с
.then(() => {
return fetch(url)
}
.then(response => response.json())
fetch() возвращает Promise, then() оборачивает все что в return в новый Promise. Получается, что результат then() - Promise? Как тогда последующий then() вызывает у этого объекта json() ?
async/await это синтаксический сахар на генератор/промис, где генератор используется для превращения асинхронного кода в синхронный, а промис для выполнения асинхронного кода. То есть тут суть в генераторе, а промис деталь реализации генератора. Промис можно заменить на простой обратный вызов (callback).
Видосы огонь, Владилен, спасибо за работу)) Но не въехал зачем нужна задержка в 2сек.
Для наглядности. В реальных проектах никакие задержки не нужны.
А почему стоит await на response.json() , это ведь уже синхронная операция? И можно ли делать return в async методах?
Метод json() возвращает промис.
🤯👍
попробовал заменить в своем микропроекте .then на async/await и получилось даже еще более громоздко, может чуть читается легче, так и мне никто не мешает .then переносить на новую строку.
Спасибо) т.е. предпочтительнее пользоваться async / await, чем промисами напрямую. Или есть ситуации, когда async / await не получится использовать?
Я бы почти всегда их использовал, редко когда нужны именно промисы
Но стоит помнить, что еще не все бразуеры нативно поддерживают подобный синтаксис и лучше пропускать его через babel
👍👍👍
спас меня
Set & Map Weak Map, примеры использования следующее пожалуйста)
Быть может отдельный плейлист по ES6?
Владилен Минин, было круто, если сделали бы
Так же хорошая идея на счёт парсера на node js , на Ютубе нормальных видео нет вообще, а в статьях говорят только как спарсить в самой ноде а как это уже на свою html страницу вывести нет. Тут как раз и fetch будет нужен, потому что нужно будет как то делать запрос на сервер что бы получить эти данные
NodeJS на сервере, там не будет fetch
Скорее какой нибудь request
@@VladilenMinin ну если допустим есть парсер на ноде и он выводит текст только в терминале, то что бы его переместить себе в html нужно поднять сервер и сделать к нему запрос(тем же fetch) ,так ведь? Нода же не имеет доступ к дому, поэтому только так. И вот такого описания парсера с нуля и до момента вывода себе в html нету вообще нигде, ни в одном русском источнике
@@user-gu5ir3zs4v Все, что вы спарсите, кроме картинок, надо закидывать в базу. А дальше все работает как обычный сайт.
Малюсенький вопрос: я правильно понимаю, что работа всей страницы при наличии такого кода останавливается до того момента, пока не выполнится "виртуальный промис" в виде таймера delay? Или это просто отдельный поток где js выполняет для конкретной функции свой код и затем возвращает его? Ну, то есть, если мы присвоим переменной эту функцию, к ней можно будет обратиться только через 2 секунды, и всё это время скрипт будет недоступен?
Отличное видео, спасибо. Владилен, когда будут ваши авторские курсы на Udemy? :)
Привет, в июле будет первый курс)
@@NextgenSocialReptile Отлично! )
Map, WeakMap, Set, WeakSet :-) а то их почему то редко используют в практике
Слушай, ну это уже к ES6 относится
Много людей почему-то спрашивают. Может плейлист сделать?
10:15 зачем писать await repsonse.json() если мы уже ждем fetch который запишет результат в переменную response после того как отработает, по идее await для repsonse.json() уже не нужен, или я не прав? @Владилен Минин
без .json() ты не получишь тело ответа
Доброго времени суток Владилен!
Если у вас будет время, подскажите пожалуйста что такое нативная функция? Также нативность ?
Встроенная в сам язык
Спасибо, Владилен! Хорошо рассказываешь. Можешь сделать видео про Webassembly?У дотнэтчиков скоро выходит инструмент Blazor, как замена JS фреймворкам, да и в целом языку JS. Front - end они смогут писать на C#. Получится некий полноценный фулстэк из одного языка. Но насколько мне известно, им всё же придётся использовать JS для некоторых операций. Microsoft планирует в своих браузерах полностью заменить JS на webassembly (C#). Каково твоё мнение и что стоит ждать?
Пока я не очень знаком с этой темой, только слышал про нее
На текущий момент хочу сосредоточиться на JS - уж больно много материала хочу осветить
А дальше посмотрю, на что переходить
@@VladilenMinin Тогда жду курсы или уроки про React Native и Electron.
Добрый день, подскажите как дальше работать с data ? Или только внутри промиса и больше никак не вывести data в глобальную зону видимости?
Подскажите, а зачем второй раз прописывать await? Там же вроде как уже синхронно можно response в json перевести
Было бы оч круто освятить ещё такие темы: деструктуризация, rest, spread, каррирование, метод flat у объектов, мемоизация, полиморфы/полифиллы, monkey patching... Да много ещё чего вспомнить можно. Просто это часто на собесах спрашивают, хотя на практике многое из этого практически не используется. Но для понимания каверзи знать стоит. Впрочем, автору виднее
Так на канале почти все вещи эти освещены в других роликах
@@VladilenMinin а, тогда пардон) я недавно на вашем канале. Планирую пересмотреть много чего тут) p.s. смотрю на юдеми ваши курсы многие
Вливайся и добро пожаловать)
Помню как мучался с созданием небольшого API на NodeJS с использованием пакетов MySQL, fs и http(s), где нужно было просто вернуть файл, перед этим найдя его в БД. Вот там меня и выбесил mysql пакет со своим коллбэком и необходимостью передавать в него request из пакета http, чтобы вернуть пользователю данные. Благо в пакете mysql2 был предусмотрен синхронный метод 😅
Спасибо. А подскажите как сделать, что бы асинхронная функция ретернила полученные данные, а не возвращала просим.
Функция с меткой async всегда будет возвращать промис.
Вы можете, так сказать, распаковывать возвращаемый промис в другой функции через await. Проблема в том, что новая функция тоже должна быть async.
А как быть когда надо делать 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
а как это можно применить в цикле? К примеру при прохождении массива циклом, если данные подходят по условиям, нужно выполнить еще две функции которые делают fetch запросы и нужно чтобы была асинхронность, чтобы сперва выполнилась getFirstData() потом getSecondData() и цикл корректно отрабатывал
...можно вопрос, почему ты всегда объявляешь переменные тип CONST, есть же ещё и LET, VAR.
Заранее.... Благодарю за ответ!
Best practice