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

แชร์
ฝัง
  • เผยแพร่เมื่อ 14 ต.ค. 2024

ความคิดเห็น •

  • @webstack-frontend1697
    @webstack-frontend1697  9 หลายเดือนก่อน

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

  • @pulyvil3909
    @pulyvil3909 หลายเดือนก่อน

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

    • @webstack-frontend1697
      @webstack-frontend1697  หลายเดือนก่อน

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

  • @fnder6492
    @fnder6492 5 หลายเดือนก่อน +2

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

  • @oleg5588
    @oleg5588 9 หลายเดือนก่อน +4

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

  • @_back_heart_
    @_back_heart_ 11 หลายเดือนก่อน +1

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

  • @ОлегУстинов-я6ж
    @ОлегУстинов-я6ж 8 หลายเดือนก่อน +3

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

  • @СергейКузнецов-щ5я
    @СергейКузнецов-щ5я ปีที่แล้ว +3

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

  • @RodionZherdev
    @RodionZherdev 10 หลายเดือนก่อน +1

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

  • @andrewsam224
    @andrewsam224 9 หลายเดือนก่อน +1

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

  • @daniyarzhanakhmetov7741
    @daniyarzhanakhmetov7741 ปีที่แล้ว +1

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

  • @geek2060
    @geek2060 ปีที่แล้ว +2

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

    • @webstack-frontend1697
      @webstack-frontend1697  ปีที่แล้ว

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

  • @andrewsam224
    @andrewsam224 9 หลายเดือนก่อน +1

    Спасибо.

  • @СергейКузнецов-щ5я
    @СергейКузнецов-щ5я ปีที่แล้ว +1

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

  • @2Extremum
    @2Extremum 5 หลายเดือนก่อน +1

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

    • @webstack-frontend1697
      @webstack-frontend1697  5 หลายเดือนก่อน

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

    • @2Extremum
      @2Extremum 5 หลายเดือนก่อน

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

  • @АнтонАнтуськов-е7о
    @АнтонАнтуськов-е7о ปีที่แล้ว +1

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

  • @haibova_irisha
    @haibova_irisha ปีที่แล้ว +1

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

    • @webstack-frontend1697
      @webstack-frontend1697  ปีที่แล้ว +1

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

  • @АнтонАнтуськов-е7о
    @АнтонАнтуськов-е7о ปีที่แล้ว +1

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

  • @andrewsam224
    @andrewsam224 9 หลายเดือนก่อน +1

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

  • @МарияРазумкова-у9у
    @МарияРазумкова-у9у ปีที่แล้ว +1

    спасибо

  • @LeonidLeskin
    @LeonidLeskin 6 หลายเดือนก่อน +1

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

    • @webstack-frontend1697
      @webstack-frontend1697  6 หลายเดือนก่อน

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

  • @олигТвистер
    @олигТвистер ปีที่แล้ว +1

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

    • @webstack-frontend1697
      @webstack-frontend1697  ปีที่แล้ว

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

    • @vitalex9383
      @vitalex9383 ปีที่แล้ว +1

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

    • @nikitsbozenko3396
      @nikitsbozenko3396 ปีที่แล้ว

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

    • @vitalyks
      @vitalyks ปีที่แล้ว

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

  • @unicoxr5tj417
    @unicoxr5tj417 ปีที่แล้ว +1

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

  • @GonzaVladimir
    @GonzaVladimir 9 หลายเดือนก่อน +1

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

    • @webstack-frontend1697
      @webstack-frontend1697  9 หลายเดือนก่อน

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

    • @GonzaVladimir
      @GonzaVladimir 9 หลายเดือนก่อน

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

    • @GonzaVladimir
      @GonzaVladimir 9 หลายเดือนก่อน

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

  • @YellowPanamka
    @YellowPanamka ปีที่แล้ว +1

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

    • @webstack-frontend1697
      @webstack-frontend1697  ปีที่แล้ว +1

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

  • @elmirweb6583
    @elmirweb6583 ปีที่แล้ว +1

    Летим

  • @denzor8
    @denzor8 ปีที่แล้ว +1

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

    • @webstack-frontend1697
      @webstack-frontend1697  ปีที่แล้ว

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

  • @Bugagych
    @Bugagych ปีที่แล้ว +6

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

  • @userbilas
    @userbilas ปีที่แล้ว +1

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

  • @ИгорьМедведев-ы6у
    @ИгорьМедведев-ы6у 11 หลายเดือนก่อน +1

    Супппппер)

  • @data-center-project
    @data-center-project 6 หลายเดือนก่อน

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

  • @alexanderkomanov4151
    @alexanderkomanov4151 ปีที่แล้ว +1

    like!

  • @ПавелКожевников-ш9н
    @ПавелКожевников-ш9н ปีที่แล้ว +1

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

  • @fedordostoevskiy4209
    @fedordostoevskiy4209 ปีที่แล้ว +1

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

    • @webstack-frontend1697
      @webstack-frontend1697  ปีที่แล้ว

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

  • @hiki7661
    @hiki7661 ปีที่แล้ว +1

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

    • @webstack-frontend1697
      @webstack-frontend1697  ปีที่แล้ว

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

    • @hiki7661
      @hiki7661 ปีที่แล้ว

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

    • @hiki7661
      @hiki7661 ปีที่แล้ว +1

      возможно кому-то понадобиться
      // тип для функции повторения запроса в котором получили ошибку о простроченном токене
      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
      @webstack-frontend1697  ปีที่แล้ว

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

    • @hiki7661
      @hiki7661 ปีที่แล้ว +1

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

  • @АлМ-ы8ъ
    @АлМ-ы8ъ 10 หลายเดือนก่อน +2

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

  • @yakovlev.r691
    @yakovlev.r691 3 หลายเดือนก่อน

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

  • @jklyfg9893
    @jklyfg9893 2 หลายเดือนก่อน

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

    • @webstack-frontend1697
      @webstack-frontend1697  หลายเดือนก่อน

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