#32 Асинхронные хуки - Vue.js: нюансы
HTML-код
- Опубликовано: 2 окт 2024
- Присоединяйтесь к нам в telegram t.me/vuejs_club
Видео создано благодаря подписчикам проекта на нашем Patreon.
Хотите чтобы контента было больше и чаще? Присоединяйтесь! / javascriptninja
А давай в этом году разбор CompositionAPI))))
А давайте залайкаем, чтобы Илья увидел
Вообще-то композишн не просто так упоминался в этом видео
Вводить в заблуждение заявление то что vue не работает с асинхронными хуками. Запрет делать асинхронные хуки заменяя async await на Promise resolve так же может ввести в залужение и приводить к аналогичным ошибкам.
Правильно говорить что Lifecycle Vue не дожидается завершения выполнения асинхронных хуков:
vm.data()
vm.created()
vm.render()
vm.mounted()
а не
await vm.data()
await vm.created()
await vm.render()
await vm.mounted()
Все это не означает что мы не можем делать функции хуков асинхронными, а означает что мы не можем приостановить жизненный цикл vue асинхронной функцией.
Кому надо будет делать в хуке (async ()=>{await ..})() Но это уже явное нарушение правил и будет за это отвечать 😁
Ура. Новые видики.
Ещё 2 способа решить проблему с ‘cannot read properties of null’:
1. в data описать структуру response. Вместо response: null
response: { users: null }
2. В v-for вместо response.users использовать computed => userList которая будет возвращать список пользователей и делать проверку на существование
userList() {
return _.get(this.response, ‘users’);
}
v-for=‘user in userList’
А мне ESLInt пишет, что ожидает return в computed, когда я пытаюсь что-то проверять. Наверное синтаксис неверный
@@Dostoevsky2012 значит есть вариант, когда нет ретурна, а он должен быть всегда явный
if (что-то) return то;
return это;
@@astrotrain нет, в том то и дело иф не дает поставить. Вообще линт ингода странные вещи выдает
@@Dostoevsky2012 не может быть такого,он ругается лишь тогда,когда возможно ничего не возвращается
@@ТимурКадырбеков-р1д я уже забросил разработку))
Первая реакция на новое видео курса vue.js - 😱😱🥳
Какая же красота. Спасибо тебе огромное, человек, спасаешь наше "поколение". Давай ещё, очень интересно.
Я эту фигню решал через response?.users)) все таки было понимание что мы до прихода респонса стучимся к свойству users у null)
Штука очень удобная, но выглядит если честно ужасно
Думаю, правильне будет говорить: "когда доходим до await наша функция возвращает Promice", а не просто "выходит из функции".
Насчёт асинхронного "created" соглашусь, так как сам хук желательно использовать для инициализации каких-то жизненно важных параметров для компонента. А вот с Mouth хуком уже нет, так как особой разницы между вызовом асинхронной функции из DOM событий или из хука - Попросту нет. Компонент инициализировался, дальше лишь идёт обработка событий шаблона.
А вообще, за саму лишь предоставленную возможность шаблону отрисовать null или undefined надо по рукам бить. Ты или ставишь условия для отрисовки шаблона на наличие хоть каких-то данных, либо инициализируешь данные-заглушку для шаблона в том же created хуке.
Наконец-то!!! )))) с возвращением!
Как решение:
- в начале блока created, ставильть loading = true;
- получать данные для компонента;
- в конце блока ставить loading = false, и рендерить компонент;
Для разработчика легче разобраться (и в дальнейшем можно использовать параметр loading при модификации компонента) и пользователю понятнее будет что компонент ожидает данные
Я как раз пользуюсь isLoading = true & false.
Спасибо!
I usually do it like this:
try{
this.isLoading = true;
this.data = await fetch()
this.isLoading = false;
}
catch(e){
this.error = e;
this.isLoading = false
}
It allows me to handle errors from the server and add a loading state to a template.
a nahuya ti na angliyskom pishesh?
@@lying6624, хорош! ❤🙏😂😎💖
@@lying6624 I don't have keyboard with Cyrillic leters
@@andreikniazev9407 then vse zbs brat, izvinayus'
ну да async await не делает js синхронным он всего лишь позволяет писать код как синхронный , то есть иногда поведение может не соответствовать ожиданиям , по этому я больше люблю на промисах. хотя есть места где с async await код выглядит намного приятнее (но понимать его иногда сложнее)
Мне кажется ответственность за ошибки связанные с неверным пониманием async/await лежит на самих людях, которые не удосужились погуглить что такое async/await перед тем, как его использовать
Код с async/await выглядит читабельнее, как по мне. Ну и async/await для повышения читабельности и удобства и был создан
Как всегда топ
Ну, то есть хук в этом смысле - просто функция, и ведет себя соответственно - синхронная - выполняется до return (явно или неявно),
- асинхронная - ''приостанавливается" до resolve() промиса (удаляется со стека в очередь микрозадач), а выполняется следующая по очереди(на стэке) функция.
Тоже самое хотел написать, переходим на уровень микро и макро тасков.
Крутяк
Поправте меня пожалуйста, это относиться только к Vue3? Попробовал на Vue2, промис дожидается через await в async created, все как положено. Чет подзапутался маленько.
Нет, все точно так же работает во вью2
Уже как год, полторая забыл что такое есть. Решаю подобные кейсы через свой promise-loader, который открывает default scoped slot с результатими промиса только после резолва этого самого промиса.
ураааа, продолжение!!! лайк не глядя...
Спасибо вам! Очень классный материал. Важные нюансы которые не упоминают другие курсы.
Ураа, наконец-то) Спасибо Илья!
c 2017 года юзаю вью и только сейчас это понял
Печально, конечно) 4 года..
но лучше поздно, чем наоборот
это что, кто-то новогоднюю ночь начинает с 7 декабря? 😆
А разве эта проблема не решится если вифорить не напрямую из даты, а создать computed, которое будет возвращать юзеров из даты?
А если тебе нужно что-то менять после выполнения асинхронного действия?
Спасибо за видео! Не до конца понял вы не рекомендовали использовать async/await в created а вместо этго прописывать прям Promise с then?
Нет. Я так делаю, но я это не рекомендую
@@JavaScriptNinja а как тогда вы посоветуете делать?
Экспорт дефолт надо обернуть в асинхронную функцию тогда будет работать. А асинхронные компоненты надо оборачивать в Suspense
Подскажите, это расширение VSCode которое убирает синие цвета? Если да, то как называется?
Судя по картинке на скриншоте, выход будет из функции когда она завершит await, но тогда если будет ошибка, завершение не произойдёт и будет ошибка, created дальше не вызовется
Спасибо, Илья "Клифхэнгер" Климов)
Немного упомянули Nuxt. В нём все же речь касательно не created, а об asyncData и fetch. При чем первый блокирует (ожидает) рендеринг пока не дождется промиса, а второй нет (я говорю о самой новой и актульной реализации, а не о депрекейтнутой).
Да уж, у реакта как всегда какая-то своя атмосфера, с реактерами невозможно общаться на одном языке
Илья, как всегда спасибо!
Теперь понял почему пришлось в проекте оборачивать все в if в какой-то неожиданный(как добавились async/await) момент :DDDD
Но напрашивается вопрос:
если не использовать async/await тогда мы скатываемся в коллбэк хэл,
когда на создание нам нужно отправить 2+ запросов зависящих от друг друга
А какой колбек Хэлл может быть в промисах? Там всегда 1 уровень вложенности
как называется то расшиирение с браузером в в VSC или это дефолтная опция ?
Это не visual studio code. Это stackblitz
Это было очень полезно. Спасибо!
Илья, а как у Вас подсветка стены организована? На диване, стене? Это стационарная или новогодняя (временная)
Стационарная. Лента от philips hue
использовать then конечно круто, но главное следить, что бы это не превращалось в большую вложенность таких колбеков :) (был на проекте где вложенность доходила до 7 колбеков, был тот еще ппц, несколько раз возвращался к этому коду, сгорел переписал на asynс/await )
Какая вложенность, это же промис
Было интересно
спс Илья
Ребята, кто в сообществе, есть хорошего уровня консультант? не бесплатно
ну так ты в чате в телеге и спроси, ютупчик консультанты не смотрют, им некада
12:00 "зачем он появился, какие проблемы решает, стоит ли его использовать везде"
С нетерпением буду ждать это видео. Особенно интересен ответ на последнюю часть.
Наконец то дождусь ответа от Ильи почему он так недолюбливает Composition.
Лично я в восторге от него, особенно от новой версии ""
проблема не в композишине, а в том что теперь у нас есть три стула
Мне тоже нравилась идея композишна пока я не попробовал пописать на нем хоть чуть сложные вещи к команде из всего навсего трёх человек. Композишн слишком низкоуровневый и не ограничивает программиста, в итоге очень легко наворотить такоооого. А когда это легко - так и происходит
Почему response сразу не заинитить пустым массивом, а не null?
Потому что это объект, а не массив
@@astrotrain Сосредоточься, будь внимательнее!
@@dasvas9383 какие ещё лозунги знаешь?
@@astrotrain для тебя, это бесплатный совет, ты опять что то путаешь, сосредоточься!
@@dasvas9383 понял, ты не в себе