Изучал axios по документалке и по доках , но так и не понимал зачем эти страшные interceptors, на всех источниках их либо не упоминали либо расказывали расплывчато. Благодаря тебе я понял зачем они все таки нужны. Огромное спасибо.
Я проработал видос сегодня. Огромное спасибо за него. Помимо axiosa немного начали проясняться вопросы, связанные с дженериками в TS. Особенно, когда ты показал дженерик-типы внутри get, post и других методов. Все супер доступно, после этого видоса про axios больше ничего искать и читать не нужно. Рекомендую всем для быстрого и доступного понимания этой либы. Пойду смотреть твои другие видосы, удачи!
Здравствуйте. На большие курсы прямо сейчас не хватает времени, как и на одиночные видео. В ближайшее время, будет несколько одиночных видео. А полноценный курс пока в разработке
Спасибо за ролик. Очень интересно и подробно. Подскажите кто знает как типизировать error который прилетает в catсh, он у axios имеет свою струкуру. Если я с сервера отправил себе 400 ошибку и в ней сообщения как мне их ловить, ts вообще не дает обращаться к error и дальше в глубину без типицации. а там в нутри есть еще error.responce.data куда я отправил сообщения с сервера но как туда попасть непонятно. только если any писать
Спасибо за видео. Вы даете возможность не читая документацию погружаться в темы, причем достаточно глубоко. На фоне инфа цыган вроде ITcomasutry, выглядите гораздо убедительнее и компетентнее. Удачи в развитии канала
@@vitalex9383 ага, полностью солидарен. Димыч дает один из лучших бесплатных контентов. Возможно только разница в том, что кому-то нужен другой подход...
Ну до тех пор пока не появится сложный проект, в котором: 1. придётся создавать несколько разных инстансов феча, с разными базовыми путями и хедерами, для общения с разными сервисами. Т.к. прокидывать их каждый раз по новой надоест, да и будеь дублированием кода 2. Потом надоест постоянно обрабатывать респонз методом json и захочется его вшить в эти инстансы 3. а затем появятся методы, которые надо обрабатывать как blob, и в итоге получится что ты написал свой axios или ky и потратил на это свое время вместо использования библиотеки) А так, для приложения работающего с парой методов api феч прекрасно подойдет
@@webstack-frontend1697 1) не совсем понял, ну в axios ты создаёшь и делаешь истансы, в fetch так же. URLSearchParams поможет. 2) ну если это json ты его так и обрабатываешь. получаешь ответ. обрабатываешь ошибки. 3) Обработка blob это та же обработка ответа вместо json. не вижу проблемы обрабатывать в fetch. Я вообще использую axios конечно. Но как по мне, там удобно обрабатывать ошибки. с этим я соглашусь. удобно использовать перехватчики. есть сразу написанные обработчики. Это правда что ты пишешь меньше и используешь уже кем то написанное. Но понимать fetch и ajax всё равно жизненно необходимо, особенно если поддерживаешь большие старые приложения
На самом деле я хотел выпустить финальный видос с рассказом о том как вы можете сами его продолжить. Так как дальше пойдёт просто повторение одних и тех же механник, которые мы попробовали. В ближайшее время этот видос я выкачу
Очень классное видео, молодец!!! Для фронтенд-новичков axios нифига не прост, если ещё и не знаешь что такое back. 👍👍👍 Как идея, можно сделать лист по react use, там тоже много интересного, но для новичков самостоятельно тяжеловато.
А если обработал ошибку токена в интерцепторе и обновил токен, можно ли в интерцепторе написать что-бы если токен обновлен при ошибке то повторить запрос?
возможно кому-то понадобиться // тип для функции повторения запроса в котором получили ошибку о простроченном токене 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); } } ); Надеюсь кому-то помог😅
Просто нет видео, где существует одна сущность в бд и к ней применяется 4 крада. Вот ты создал 101 пост, состояние обновил? Вот что интересно и нужно, как на ts по папкам красиво бегать, пользоваться крадами и обновляя состояние не рендерить страницу
Мой курс, в котором мы разберем самые важные темы для собеседования:
boosty.to/webstack-fe/purchase/1940940?ssource=DIRECT&share=subscription_link
Спасибо большое, я теперь стала лучше понимать axios. Просто лучший!
@@pulyvil3909 Спасибо за поддержку!
мужчина! долго не мог понять что к чему, а теперь сяду кодить уже с полным пониманием, что я делаю)
Спасибо за поддержку!
Спасибо тебе. Качество материала на уровне.
Желаю роста и продвижения!
Спасибо за поддержку!
Изучал axios по документалке и по доках , но так и не понимал зачем эти страшные interceptors, на всех источниках их либо не упоминали либо расказывали расплывчато.
Благодаря тебе я понял зачем они все таки нужны. Огромное спасибо.
Спасибо за поддержку!
Спасибо большое, очень полезно и доступно!
Спасибо за поддержку!
Я проработал видос сегодня. Огромное спасибо за него. Помимо axiosa немного начали проясняться вопросы, связанные с дженериками в TS. Особенно, когда ты показал дженерик-типы внутри get, post и других методов. Все супер доступно, после этого видоса про axios больше ничего искать и читать не нужно. Рекомендую всем для быстрого и доступного понимания этой либы. Пойду смотреть твои другие видосы, удачи!
Спасибо за поддержку! Рад что мои видео полезны
@@webstack-frontend1697 Твои видео очень полезы )
Очень классное видео, все по полочкам и я с нуля разобрался благодаря вам, спасибо
Спасибо за поддержку!
Очень круто!!!
Спасибо за поддержку)
Спасибо за видео! Просто огонь! С меня лайк, подписка, колокольчик!
Спасибо за поддержку!
Лайк за аксиос и ждем видос по загрузке файлов на бек)
Спасибо за поддержку. Думаю сделаю такой видос
Спасибо.
Спасибо за видео, ты крутой!
Спасибо за поддержку
29:50 - нужно withCredentials: false, указывать, тогда все нормально будет отдавать.
А если креды авторизации в куках лежат, то без withCredential уже и не прокатит)
@@webstack-frontend1697 Ну то понятно, я про конкретный пример из видео где просто тестируется функционал.
Очень полезное видео, подписываюсь!)
Спасибо за поддержку!
привет ! а бдут еще пректы вроде 'клон instagram'? очень крутой контент у Вас
Здравствуйте. На большие курсы прямо сейчас не хватает времени, как и на одиночные видео. В ближайшее время, будет несколько одиночных видео. А полноценный курс пока в разработке
Большое спасибо!!!!
Крутяк!!!!!!
Спасибо за поддержку!
спасибо
Спасибо за ролик. Очень интересно и подробно.
Подскажите кто знает как типизировать error который прилетает в catсh, он у axios имеет свою струкуру. Если я с сервера отправил себе 400 ошибку и в ней сообщения как мне их ловить, ts вообще не дает обращаться к error и дальше в глубину без типицации. а там в нутри есть еще error.responce.data куда я отправил сообщения с сервера но как туда попасть непонятно. только если any писать
Спасибо за отзыв!
В блоке catch можно сделать так
If (isAxiosError(error)) {
console.log(error.response.data)
}
И тип подхватится
Спасибо за видео. Вы даете возможность не читая документацию погружаться в темы, причем достаточно глубоко. На фоне инфа цыган вроде ITcomasutry, выглядите гораздо убедительнее и компетентнее. Удачи в развитии канала
Спасибо за поддержку!
А чем Вам Айти-камасутра не понравилась?
потому-что калл
@@vitalex9383
@@vitalex9383 ага, полностью солидарен. Димыч дает один из лучших бесплатных контентов. Возможно только разница в том, что кому-то нужен другой подход...
Сразу лайк. В Аксиос надо уметь.
да всё удобно фечём) обычно, не сказать что громоздко =) всё есть в learn javascript хорошими словами.
Ну до тех пор пока не появится сложный проект, в котором:
1. придётся создавать несколько разных инстансов феча, с разными базовыми путями и хедерами, для общения с разными сервисами. Т.к. прокидывать их каждый раз по новой надоест, да и будеь дублированием кода
2. Потом надоест постоянно обрабатывать респонз методом json и захочется его вшить в эти инстансы
3. а затем появятся методы, которые надо обрабатывать как blob, и в итоге получится что ты написал свой axios или ky и потратил на это свое время вместо использования библиотеки)
А так, для приложения работающего с парой методов api феч прекрасно подойдет
@@webstack-frontend1697 1) не совсем понял, ну в axios ты создаёшь и делаешь истансы, в fetch так же. URLSearchParams поможет.
2) ну если это json ты его так и обрабатываешь. получаешь ответ. обрабатываешь ошибки.
3) Обработка blob это та же обработка ответа вместо json. не вижу проблемы обрабатывать в fetch.
Я вообще использую axios конечно. Но как по мне, там удобно обрабатывать ошибки. с этим я соглашусь. удобно использовать перехватчики. есть сразу написанные обработчики. Это правда что ты пишешь меньше и используешь уже кем то написанное. Но понимать fetch и ajax всё равно жизненно необходимо, особенно если поддерживаешь большие старые приложения
@@webstack-frontend1697 ты удалил мой коментарий?
очень полезное видео, а в каком вы показываете как строить архитектуру API?
Спасибо за поддержку. В плейлесте с курсом по React разработке очень много работы с API
Летим
Инстаграмм проект вы собираетесь продолжать ?😅
На самом деле я хотел выпустить финальный видос с рассказом о том как вы можете сами его продолжить. Так как дальше пойдёт просто повторение одних и тех же механник, которые мы попробовали. В ближайшее время этот видос я выкачу
Нужен курс или миникурс React+Typescript+MST+ReactQuery+Routes+Правильная архитектура+деплой!
Вот ни где нет подобного. Я даже купил бы.
Спасибо. Учту пожелания
спасибо, годно
Спасибо за поддержку!
Супппппер)
Спасибо за поддержку!
11:52 Сиквалайзер ))
like!
лайк за аксиос
Очень классное видео, молодец!!! Для фронтенд-новичков axios нифига не прост, если ещё и не знаешь что такое back. 👍👍👍 Как идея, можно сделать лист по react use, там тоже много интересного, но для новичков самостоятельно тяжеловато.
Спасибо за поддержку!
Хорошая идея
А если обработал ошибку токена в интерцепторе и обновил токен, можно ли в интерцепторе написать что-бы если токен обновлен при ошибке то повторить запрос?
Не пробовал. Кажется должно сработать. Думаю вам стоит поэкспериментировать
@@webstack-frontend1697 та я вот пробую гуглю, ничего не могу найти, я так понял встроено эти никак не сделать, нужно свою функцию писать
возможно кому-то понадобиться
// тип для функции повторения запроса в котором получили ошибку о простроченном токене
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);
}
}
);
Надеюсь кому-то помог😅
@@hiki7661 это круто. Спасибо!
@@webstack-frontend1697 это вам спасибо что учите☺. Думаю сейчас записать мини курс для начинающих по реакту, не дадите советов начинающему?😅
Автор, я понимаю что у тебя хороший монитор, но чтобы мало-мальски увидеть текст на твоем видео приходится его на весь экран разворачивать
Понял, в будущем учту!
Просто нет видео, где существует одна сущность в бд и к ней применяется 4 крада. Вот ты создал 101 пост, состояние обновил? Вот что интересно и нужно, как на ts по папкам красиво бегать, пользоваться крадами и обновляя состояние не рендерить страницу
Это правда, что Axios уже deprecated?
@@jklyfg9893 последнее обновление было 7 дней назад. Не похоже на deprecated. Но ky сейчас "актуальнее"