Axios от А до Я. Полный курс в React приложении. Axios + TS

[@webstack-frontend1697]

Мой курс, в котором мы разберем самые важные темы для собеседования: boosty.to/webstack-fe/purchase/1940940?ssource=DIRECT&share=subscription_link

[@fnder6492]

мужчина! долго не мог понять что к чему, а теперь сяду кодить уже с полным пониманием, что я делаю)

[@webstack-frontend1697]

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

[@oleg5588]

Спасибо тебе. Качество материала на уровне. Желаю роста и продвижения!

[@webstack-frontend1697]

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

[@flaywar2363]

Отличный видеоролик, подробный.

[@ОлегУстинов-я6ж]

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

[@webstack-frontend1697]

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

[@pulyvil3909]

Спасибо большое, я теперь стала лучше понимать axios. Просто лучший!

[@webstack-frontend1697]

@@pulyvil3909 Спасибо за поддержку!

[@_back_heart_]

Изучал axios по документалке и по доках , но так и не понимал зачем эти страшные interceptors, на всех источниках их либо не упоминали либо расказывали расплывчато. Благодаря тебе я понял зачем они все таки нужны. Огромное спасибо.

[@webstack-frontend1697]

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

[@СашаАлександр-е4м]

Тоже изучал его года пол назад и до недавних пор пока не начал бэкенд писать на nest с генерации jwt не понимал ,зачем нужен этот проклятый interceptor.

[@СергейКузнецов-щ5я]

Я проработал видос сегодня. Огромное спасибо за него. Помимо axiosa немного начали проясняться вопросы, связанные с дженериками в TS. Особенно, когда ты показал дженерик-типы внутри get, post и других методов. Все супер доступно, после этого видоса про axios больше ничего искать и читать не нужно. Рекомендую всем для быстрого и доступного понимания этой либы. Пойду смотреть твои другие видосы, удачи!

[@webstack-frontend1697]

Спасибо за поддержку! Рад что мои видео полезны

[@АртемШелудяков-м4м]

@@webstack-frontend1697 Твои видео очень полезы )

[@daniyarzhanakhmetov7741]

Спасибо за видео! Просто огонь! С меня лайк, подписка, колокольчик!

[@webstack-frontend1697]

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

[@2Extremum]

29:50 - нужно withCredentials: false, указывать, тогда все нормально будет отдавать.

[@webstack-frontend1697]

А если креды авторизации в куках лежат, то без withCredential уже и не прокатит)

[@2Extremum]

@@webstack-frontend1697 Ну то понятно, я про конкретный пример из видео где просто тестируется функционал.

[@geek2060]

Лайк за аксиос и ждем видос по загрузке файлов на бек)

[@webstack-frontend1697]

Спасибо за поддержку. Думаю сделаю такой видос

[@andrewsam224]

Очень круто!!!

[@webstack-frontend1697]

Спасибо за поддержку)

[@RodionZherdev]

Очень классное видео, все по полочкам и я с нуля разобрался благодаря вам, спасибо

[@webstack-frontend1697]

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

[@АнтонАнтуськов-е7о]

Очень полезное видео, подписываюсь!)

[@webstack-frontend1697]

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

[@andrewsam224]

Крутяк!!!!!!

[@webstack-frontend1697]

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

[@СергейКузнецов-щ5я]

Спасибо за видео, ты крутой!

[@webstack-frontend1697]

Спасибо за поддержку

[@АнтонАнтуськов-е7о]

Большое спасибо!!!!

[@олигТвистер]

Спасибо за видео. Вы даете возможность не читая документацию погружаться в темы, причем достаточно глубоко. На фоне инфа цыган вроде ITcomasutry, выглядите гораздо убедительнее и компетентнее. Удачи в развитии канала

[@webstack-frontend1697]

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

[@vitalex9383]

А чем Вам Айти-камасутра не понравилась?

[@nikitsbozenko3396]

потому-что калл @@vitalex9383

[@vitalyks]

@@vitalex9383 ага, полностью солидарен. Димыч дает один из лучших бесплатных контентов. Возможно только разница в том, что кому-то нужен другой подход...

[@andrewsam224]

Спасибо.

[@GonzaVladimir]

да всё удобно фечём) обычно, не сказать что громоздко =) всё есть в learn javascript хорошими словами.

[@webstack-frontend1697]

Ну до тех пор пока не появится сложный проект, в котором: 1. придётся создавать несколько разных инстансов феча, с разными базовыми путями и хедерами, для общения с разными сервисами. Т.к. прокидывать их каждый раз по новой надоест, да и будеь дублированием кода 2. Потом надоест постоянно обрабатывать респонз методом json и захочется его вшить в эти инстансы 3. а затем появятся методы, которые надо обрабатывать как blob, и в итоге получится что ты написал свой axios или ky и потратил на это свое время вместо использования библиотеки) А так, для приложения работающего с парой методов api феч прекрасно подойдет

[@GonzaVladimir]

@@webstack-frontend1697 1) не совсем понял, ну в axios ты создаёшь и делаешь истансы, в fetch так же. URLSearchParams поможет. 2) ну если это json ты его так и обрабатываешь. получаешь ответ. обрабатываешь ошибки. 3) Обработка blob это та же обработка ответа вместо json. не вижу проблемы обрабатывать в fetch. Я вообще использую axios конечно. Но как по мне, там удобно обрабатывать ошибки. с этим я соглашусь. удобно использовать перехватчики. есть сразу написанные обработчики. Это правда что ты пишешь меньше и используешь уже кем то написанное. Но понимать fetch и ajax всё равно жизненно необходимо, особенно если поддерживаешь большие старые приложения

[@GonzaVladimir]

@@webstack-frontend1697 ты удалил мой коментарий?

[@ИгорьМедведев-ы6у]

Супппппер)

[@webstack-frontend1697]

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

[@Bugagych]

Нужен курс или миникурс React+Typescript+MST+ReactQuery+Routes+Правильная архитектура+деплой! Вот ни где нет подобного. Я даже купил бы.

[@webstack-frontend1697]

Спасибо. Учту пожелания

[@МарияРазумкова-у9у]

спасибо

[@LeonidLeskin]

Спасибо за ролик. Очень интересно и подробно. Подскажите кто знает как типизировать error который прилетает в catсh, он у axios имеет свою струкуру. Если я с сервера отправил себе 400 ошибку и в ней сообщения как мне их ловить, ts вообще не дает обращаться к error и дальше в глубину без типицации. а там в нутри есть еще error.responce.data куда я отправил сообщения с сервера но как туда попасть непонятно. только если any писать

[@webstack-frontend1697]

Спасибо за отзыв! В блоке catch можно сделать так If (isAxiosError(error)) { console.log(error.response.data) } И тип подхватится

[@userbilas]

спасибо, годно

[@webstack-frontend1697]

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

[@unicoxr5tj417]

Сразу лайк. В Аксиос надо уметь.

[@YellowPanamka]

очень полезное видео, а в каком вы показываете как строить архитектуру API?

[@webstack-frontend1697]

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

[@data-center-project]

11:52 Сиквалайзер ))

[@fedordostoevskiy4209]

Очень классное видео, молодец!!! Для фронтенд-новичков axios нифига не прост, если ещё и не знаешь что такое back. 👍👍👍 Как идея, можно сделать лист по react use, там тоже много интересного, но для новичков самостоятельно тяжеловато.

[@webstack-frontend1697]

Спасибо за поддержку! Хорошая идея

[@hiki7661]

А если обработал ошибку токена в интерцепторе и обновил токен, можно ли в интерцепторе написать что-бы если токен обновлен при ошибке то повторить запрос?

[@webstack-frontend1697]

Не пробовал. Кажется должно сработать. Думаю вам стоит поэкспериментировать

[@hiki7661]

@@webstack-frontend1697 та я вот пробую гуглю, ничего не могу найти, я так понял встроено эти никак не сделать, нужно свою функцию писать

[@hiki7661]

возможно кому-то понадобиться // тип для функции повторения запроса в котором получили ошибку о простроченном токене type TRefreshRequest = { method: keyof typeof axios; url: string; data?: any; } const refreshRequest = async (config: TRefreshRequest) => { // получаем с конфига ошибки данные по запросу const { method, url, data } = config; // повторяем запрос const res = await api[method](url, data); // возвращаем по нему дату return res.data; }; // api является кастомным инстансом api.interceptors.response.use( (res) => res.data, async (err) => { // если код ошибки 400 то идем по новый токен if (err.response.status === 400) { // fetchDataToken функция с запросом на получения токена возвращает инфу по токену const res = await fetchDataToken(); // добавляем в заголовок инфу по токену api.defaults.headers.Authorization = `${res.token_type} ${res.access_token}`; // возвращаем данные с повторного запроса return await refreshRequest(err.config); } } ); Надеюсь кому-то помог😅

[@webstack-frontend1697]

@@hiki7661 это круто. Спасибо!

[@hiki7661]

@@webstack-frontend1697 это вам спасибо что учите☺. Думаю сейчас записать мини курс для начинающих по реакту, не дадите советов начинающему?😅

[@haibova_irisha]

привет ! а бдут еще пректы вроде 'клон instagram'? очень крутой контент у Вас

[@webstack-frontend1697]

Здравствуйте. На большие курсы прямо сейчас не хватает времени, как и на одиночные видео. В ближайшее время, будет несколько одиночных видео. А полноценный курс пока в разработке

[@elmirweb6583]

Летим

[@denzor8]

Инстаграмм проект вы собираетесь продолжать ?😅

[@webstack-frontend1697]

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

[@alexanderkomanov4151]

like!

[@АлМ-ы8ъ]

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

[@webstack-frontend1697]

Понял, в будущем учту!

[@yakovlev.r691]

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

[@ПавелКожевников-ш9н]

лайк за аксиос

[@jklyfg9893]

Это правда, что Axios уже deprecated?

[@webstack-frontend1697]

@@jklyfg9893 последнее обновление было 7 дней назад. Не похоже на deprecated. Но ky сейчас "актуальнее"