Чем заменить Axios в 2023-м

[@kosechok1]

Михаил, спасибо за уроки. Хотел бы попросить вас сделать урок по работе с аналогом interceptor для ky, да и для axios было бы интересно. еще интересует вариант когда надо делать несколько параллельных вызовов разных api, каждый из которых может вернуть код по которому надо делать редирект на авторизацию и надо прервать остальные

[@ЭзизК]

Михайл, привет. Очень очень жду полноценный курс с очень разными задачами в проекте по react native платный или нет без разницы) 👨‍💻

[@ivankondrashkin]

@@boycovclub зачем если есть флаттер)

[@olegsh2888]

Огонь! Свежий выпуск дайджеста годных либ от Михаила) Я, как старовер, предпочитаю fetch, но тут приятно удивился возможностями кастомизации. Либа понравилась

[@АлександрРак-о2з]

а староверы разве не XMLHttpRequest?

[@wh1teb1ack92]

@@АлександрРак-о2з не до конца старовер)

[@kawaikaino5277]

Очередной фреймворк, для замены такого же фреймворка, без негатива, но эта гонка в никуда

[@NotToday-o3m]

@Большой Брат хотел бы я иметь такого большого брата

[@evgeniynone5760]

По bundlephobia (которая вычисляет в сборке) axios имеет весь 30kb, против ky за 10kb. Разница не такая что бы заботиться

[@The14Some1]

И тем не менее, если для практики пилить крад чеклисты да телефонные справочники - самое оно.

[@АлексейИстомин-ц4о]

20kb это очень много

[@nicksqain4359]

@@The14Some1 и смысл для практики использовать, если многие не используют эту технологию, зачем тратить время

[@alekseykurylev]

Михаил, спасибо за видео. Добавляй пожалуйста в описание ссылки на библиотеки о которых рассказываешь :)

[@theodoredreiser470]

Спасибо за видео! Какую кнопку нажимаете на 8:28?)

[@mishanep]

Ctrl+пробел (на маке Cmd + пробел)

[@PutlerXLO]

Так аксиос весит 11кб min.gzip... Ну сэкономишь может пару кб ценой всеядности. Это ведь кэшируемая статика. Смешно на фоне размера медиаконтента фронта и месива реакт компонентов.

[@sergejg4773]

Добрый Михаил. Не могу понять как передать x-api-key а точнее в заголовок. try { const apiKey = API_KEY; const apiUrl = PrefixUrl; const response = await ky.get(apiUrl, { method:'GET', mode: 'no-cors', headers: { 'Authorization': `X-Api-Key: ${apiKey}`, }, }).json(); В консоле net::ERR_ABORTED 401 (Unauthorized) Документацию почитал но что-то не совсем там много понял.

[@mishanep]

Я не знаю о каком сервисе идет речь. Но на первый взгляд выглядит так, что вам просто не нужно использовать заголовок Authorization, потому что ваш заголовок называется иначе. headers: { 'X-Api-Key': apiKey, },

[@the_gorgeous_george]

Круто ! обязательно попробую на следующем проекта! Спасибо за труд!

[@limpchh]

Очень классное и полезное видео, спасибо Михаил! Буду теперь применять эту библиотеку)

[@_oxios_]

Спасибо за обзор. Впервые слышу про ky. Надо будет попробовать..

[@unknown.6914]

Благодарю за полезный контент Михаил

[@yani3933]

не увидел преимуществ перед аксиосом ретраи должны обрабатываться на уровень выше, например, как делает react-query, это не задача хттп клиента, имхо

[@anatolyrichman1044]

А зачем Axios заменять-то? Сегодня у нас есть XmlHttpRequest, Fetch API, есть еще обертка в виде Axios. Сегодня мы видим еще один инструмент - Ky. Бери что наиболее подходит под задачу и используй. Используй с умом, а не потому что хайпово. В контексте вашего видео, по названию, можно подумать, что Axios - лютое г..но, а вот Ky - вот это мощь и простота, хотя если присмотреться, то тоже самое.

[@DreamingDolphing]

Потому что неопытные программисты используют эту библиотеку просто чтобы отправить один get-запрос и вообще не думают о том, зачем они в проект её притащили. Потому что в каждом втором примере на Ютубе её использовал блогер вообще не задумываясь нужна она там или нет (в большинстве случаев не нужна абсолютно и лишняя зависимость). Кроме того у axios были проблемы с безопасностью.

[@grenadier4702]

Зачем вообще использовать что-то, где понадобится всего 20% функционала? Напиши свое решение за час (в случае с оберткой над fetch), добавь тесты, и готово. Если это серьезный проект, то это стоит того. Лучше, чем тащить лишнию зависимость

[@anatolyrichman1044]

@@grenadier4702 Согласен с вами на 100500%. Но, могу с уверенностью сказать, что мало кто хочет делать что-то свое и не каждый сможет это сделать на достаточно хорошем уровне. Убедился в этом много раз.

[@sas408]

Тоже самое, только по весу в 10 раз меньше, да

[@АнатолийГорбов-о1ь]

Спасибо за обзор новых технологий)) Кстати насчет React Native согласен с ниже комментарием, было бы очень интересно!

[@loginov2030]

без реакта уже никак не проверить библиотеку?)

[@awenn2015]

8:10 а что с мультипарт форм датой? Как обычно самому надо создавать, прокидывать и заголовки добавлять или там есть какие то заготовки ?

[@mishanep]

Content-Type установится автоматически. А FormData создавать самому, да.

[@awenn2015]

@@mishanep досмотрел ролик, крутая либа, как простую замену фечу можно использовать

[@larss2772]

Михаил, здравствуйте! Спасибо за видео, было интересно послушать о хорошей альтернативе "axios", надо будет опробовать её в действии)

[@ziyodillaj4080]

Спасибо большое! Крутая инфа

[@unicoxr5tj417]

да твою же)))))))) Axios - то половина не знает)))) Видосу лайк

[@mikeempire]

Ржу!)

[@aheroofourtime2415]

а другая половина только перешла на него и начало понимать и тут сразу: оно устарело(

[@unicoxr5tj417]

@@aheroofourtime2415 жиза

[@adamburke4496]

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

[@mishanep]

Спасибо. Я пытаюсь понять причину и экспериментирую с настройками. Пока удалось минимизировать эхо. Надеюсь и остальное удастся решить в ближайшее время.

[@Pavlusha1Kruglik]

Михаил, может знаете, как в их хуке beforeRequest изменить url. Он(url) у них readonly. Спасибо за видео.

[@mishanep]

Всё верно, url, как и большая часть объекта request, дается только на чтение. По логике, данный хук нужен для установки дополнительных заголовков, в том числе если нужно обновить токен. Оригинальный адрес запроса изменить вряд ли получится. А что за кейс такой, когда надо мутировать только что переданный url?

[@Pavlusha1Kruglik]

@@mishanep, например, для всех запросов get с одинаковым pathUrl добавить в search API key. Понятно, что можно сделать helper для params, но хотелось попробовать хуки этой библиотеки. Что-то вроде: if ( req.url.startsWith(any) && req.method === 'GET' ) { req.url = `${req.url}&key=${key}`

[@AlpinWeb]

Классная штука, надо попробовать. Главное название не забыть :D

[@pavelmelnik9952]

спасибо Михаил! рад вашему новому видео

[@AND-lc5ot]

Спасибо, узнал из вашего видео об этой чудесной библиотеке. Уже использую в своих проектах.

[@NoName-oh9fh]

Так библиотека такая же старая как и axios, там ничего нового и чего-то уникального нет.

[@protonys]

Очень интересно, спасибо!

[@vonderklaas]

Круто, спасибо

[@ViktorHugo-je6rq]

Спасибо Миша за новинку. С удовольствием послушал бы про pnpm, если это Вам знакомо

[@devkonin]

Я человек простой - вижу новый видос, делаю ветку в репозитории и открываю сандбокс )

[@michaeldeoz]

что-то webpack не хочет собирать проект если заменить axios на ky :(

[@mishanep]

Стало бы webpack пора заменить на vite =D А если серьезно, надо смотреть. Всё-таки есть различия между API библиотек и где-то нужно будет над опциями поработать, что-то добавить, что-то убрать.

[@michaeldeoz]

@@mishanep вот именно: надо смотреть, разбираться. А оно того стоит? Возможно есть смысл новый проект начинать с ky. А так: работает на axios - заказчик не жалуется - ну и пусть себе дальше работает.

[@nmteg]

Михаил, пожалуйста, расскажите подробнее про styled components, я видел у Вас видео на эту тему, но вы так, поверхностно и сквозь прошлись по ним, хотелось бы более углубленно, если это возможно. Огромное за спасибо за Ваши видео и всю работу

[@JackSteamBoy]

Михаил, добрый день, когда будут скидки на юдеми на ваши курсы? Приобрел бы js, react

[@mishanep]

Приветствую! На моем сайте mishanep.com ссылки на курсы идут сразу с действующим купоном. Несколько раз в году я делаю скидку побольше, но она действует всего 5 дней. В таких случаях я делаю рассылки и объявления. Пока не планировал на этот год даты для больших скидок.

[@JackSteamBoy]

@@mishanep спасибо большое, Михаил, что вы дошли до текущего момента в жизни таким замечательным человеком, желаю вам всего самого хорошего, от всего сердца!

[@JackSteamBoy]

@@mishanep и можно еще вопрос, на степике тоже есть задачи для практики в ходе обучения?

[@mishanep]

@@JackSteamBoy да, курс идентичный. Но на Степике другой тренажёр, и меньшее количество заданий идут с автотестами.

[@JackSteamBoy]

@@mishanep после вашего курса по js можно переходить на реакт или стоит еще попрактиковаться с js?

[@alexanderkomanov4151]

Спасибо вам!

[@daddyj2049]

Если не ошибаюсь Ку довольно старый пакет такой же как и axios, я бы не сказал, что это замена. Это альтернатива, но не замена. + Учитываем такое понятие как tree-shaking в современном frontend.

[@mulfyx]

такому говну как аксиос даже тришейк не поможет

[@Alexey_Ivanov]

А почему просто не использовать встроенный fetch?

[@awenn2015]

Потому что он унылый , работает но унылый, ручная обработка ошибок и тд

[@biLLie_wiLLie]

@@awenn2015 долой уныние)

[@mishanep]

Разработчики любят удобные абстракции, особенно когда есть готовые и надежные. Но многие сегодня работают с обычным fetch и пишут много похожего кода, который можно было бы не писать. Сам пишу, особенно по работе))) Но при возможности, использую абстракции.

[@СэмФишер-х4д]

помимо размера, есть ли еще какие-то преимуществу у Ky перед Axios?

[@mishanep]

Retry, hooks. У библиотеки отличается API. Там есть ещё что улучшать, безусловно, но в целом выглядит интересно.

[@СэмФишер-х4д]

@@mishanep спасибо!надо будет это попробовать

[@Delirium4Dude]

Ну не знаю.... Прям "хватит использовать axios"? есть ещё преимущества, корме экономии 20кб у библиотеки? Если это всё то спасибо, не нужно ) да и к тому же она на основе fetch, а значит её нужно полифилть и её преимущество станет ещё меньше

[@mishanep]

Основное преимущество - гибкий retry, если запрос не удался. Касаемо полифила - здесь надо смотреть список поддерживаемых браузеров. Сегодняшние фреймворки зачастую отказываются от поддержки старых браузеров и многие проекты идут в эту же сторону, чтобы не обмазываться полифиллами. Тогда и для fetch он не понадобится.

[@mulfyx]

в начале видео было сказано, что если вы не поддерживаете говно-легаси-браузеры, то не надо ничего полифилить, фетч во всех адекватных современных браузерах есть

[@димад-ъ4й]

а кто пользовался axios)? когда есть fetch)?

[@STELLS541]

Очень познавательно)

[@bronik04]

Спасибо за интересный контент! Очень бы хотелось видео про react query увидеть от вас!

[@mishanep]

Сам хочу)) Думаю в этом году доберусь и до него. Он классный.

[@olegsh2888]

@@mishanep тогда закину еще идею: сравнение RTK Query и TanStack Query)

[@diggerdog001]

Где можно прочитать про "вес" таких продуктов по подробнее чтобы не отвлекать от таких вопросов? Мне просто не понятно, я только учусь, почему 1.68 мб это считается много?

[@muradkhanibragimov1353]

Чем меньше весь проект будет весить после сборки, тем выше будет скорость первичной загрузки страницы для пользователя. Если есть возможность использовать вместо тяжелой библиотеки более легковесную и при этом не терять в функционале, то почему бы ей не воспользоваться ?

[@diggerdog001]

@@muradkhanibragimov1353 понял, спасибо

[@tomtomson8099]

Сам не так давно перевёл проект на ky. И тут сразу видео. Спасибо за популяризацию такой хорошей библиотеки

[@m.g.0416]

Михаил, на случай, если youtube будет заблочен в РФ, есть ли в планах скопировать контент на другой ресурс? Хоть на бусти, хоть еще куда (только не на рутьюб, плиз)

[@mishanep]

Я начинал выкладывать как раз не рутьюб)) Но там как-то тухленько. Бусти я не пользуюсь пока. Вообще я надеюсь, что люди умеют пользоваться vpn =) Но да, я периодически думаю над этой темой. Пока понимания нет. Я как-то делал опрос на эту тему, но тоже понимания после него не пришло.

[@sergeykudryashov9097]

Спасибо! А почему ты не делаешь ролики сразу в TS? Я тоже не фанат TS-a но волей-неволей пишут то все на нем.

[@WapSter92]

Хорошо, что ты не думающий человек)

[@skreepatch2473]

Выглядит очень хорошо

[@romanmed9035]

аксиос весит не больше 20кб в сжатом виде. в том пакаже вероятно тесты и еще что-то имеется.

[@kiritushka]

Разве 300-е запросы вылетают с ошибкой? По-моему только 400-е и 500-е

[@pilyugin]

Ну в целом интересная библа) надо запомнить)

[@TheKykp]

Михаил как вы так все делает превосходно? Вы в школе на 5-ки учились что ли?

[@art7653]

Круто 🔥🔥🔥🔥🔥🔥

[@dmitriikapustin3384]

делаешь запрос, формируешь объект Options для запроса. Можешь передать туда body, а можешь json. Это вроде одно и то же, но не совсем. 1. У запроса нет поля json 2. 2 источника правды вот вам и новая библиотека ку

[@iq240-1]

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

[@vitaercx]

Здравствуйте. Спасибо, что познакомили с библиотекой. Но, на мой взгляд, сравнение с axios необъективно. Вы несколько раз говорите, что "если бы мы работали с axios, нам бы пришлось делать это вручную". В итоге, код, который вы демонстрируете и есть Ручная обработка ошибок, через try catch. Если бы вы представили код обработки ошибок на axios, он был бы по размеру того же объема, может и меньше. Кроме этого, вы сказали, что библиотека имеет дефолтное реагирование на статусы ответа выше определенной цифры, т.е. за вас решает, что ошибка, а что нет. Не самое лучшее поведение.

[@mishanep]

Про ручную обработку ошибок я сравнивал с fetch (хотя мог и оговориться), так как он не выбросит ошибку сам, даже если получил ошибку от сервера (есть особые кейсы когда и fetch выбросит, но не будем об этом).

[@vitaercx]

@@mishanep ну да, по сравнению с fetch кода поменьше, в этом вы правы

[@goplay8874]

Ладно Михаил пилите учебное видео под вью на удеми ток 3 версии

[@erzhan225]

Спасибо

[@sergosipov]

А можно разъяснение тупоголовому, в чём для меня как пользователя библиотеки ky.js польза от того что он написан на TypeScript? Только в том что это "модно, молодёжно"? На мой непросвещённый взгляд, поскольку TypeScript транспилируемый язык, и то во что оно там натранспилируется в процессе сборки априори будет менее оптимально, чем то что будет сразу написано на ванильном JS. Ну ок, если мой проект также использует TypeScript, то при включении библиотеки в общий проект, возможно , за счёт какого-то переиспользования кода или каких-нибудь оптимизаций во время транспиляции потери памяти и производительности будут сведены на нет и я получу по сути эффективность ванильного JS, но в чём для меня то плюс от этого? Или может быть я что-то пропустил и браузеры уже во всю нативно исполняют TypeScript? Я понимаю интерес разработчика - наверное, писать на более развитом и современном языке ему нравится больше, и возможно он готов смириться с неизбежными при этом дополнительными трудностями на этапе отладке (или он хорошо знает как их успешно решать), но мне то какой от этого прок?

[@mishanep]

Когда библиотека сразу написана на TS или сама поставляет файл декларации, то не нужно дополнительно устанавливать типы и с большей вероятностью в типах не будет ошибок и не придется гадать про соответствие версий библиотеки и отдельных типов к ней. Ну а в целом, типы дают нам автоподсказки и зачастую даже не надо лезть в документацию - через файл декларации можно получить достаточно информации. Плюс мне нравится, что с типами библиотека не даст нам использовать ее неправильно и будет сигнализировать на все попытки забивать гвозди микроскопом.

[@sergosipov]

@@mishanep Ну что ж, доступно. Спасибо.

[@СергейК-б6н]

Ку💪😏

[@ПетрПетров-ж9е]

5:20

[@alexpermenev]

Как встречает Новый год нормальный человек: С Новым годом!!! Как встречает Новый год фронтендер: чем заменить все библиотеки, которые я использую

[@soulwind7577]

Круто, что она весит в 10 раз меньше, при этом предоставляет фактически такой же функционал как и axios, но при этом приносит что то новое. Обязательно попробую его в пет проекте, особенно понравилось, что можно отнаследоваться от другого инстанса и расширить его.

[@Програмист-щ2г]

хм рано залетел только смотрел про вит)

[@DreamingDolphing]

Сразу лайк. Наконец кто-то рассказывает, что axios давно не актуален и даже вреден.

[@izzy7541]

И подобных либ больше понравился wretch js. У него синтаксис приятнее

[@mishanep]

Глянул апишку. Согласен, приятно выглядит.

[@technozavrr]

Все что может эта либа уже давно может аксиос, да еще и на сервере работает, да еще и в старых браузерах. Не вижу смысла в новой библиотеке

[@mulfyx]

вступление, видимо, мимо ушей было? 😉

[@NotToday-o3m]

@@mulfyx ты тоже читаешь этих комментов?

[@eugenetroinov6489]

Не вводите людей в заблуждение размер 1.4mb включает 3 разных бандла для: 424K ./esm 256K ./browser 344K ./node т.к важно уточнить что в этот размер входят и мапы загрузка которых проиходит только при активном devtools а в обычном состоянии они не загружаются. т.е в зависимости от флагов в исходных бандл попадет только одна версия. При этом бандл "ky" имеет размер: 116K ./types 56K ./core 72K ./utils 36K ./errors 292K . Таким образом при ближайшем рассмотрении она получается даже больше чем axios однако для точной оценки нужно пропустить через сборщик и посмотреть размер полученного сегмента. Было бы очень странно если бы большой пласт опытных разработчиков стали бы использовать либу для запросов размером в 1.4 мегабайта. А ведь кто то на полном серьезе будет продвигать эту либу на работе аргументируя приведенными вами примерами без изучения предметной области. Советую на будуще проводить тщательные исследования т.к после просмотра видео как минимум у половины ваших подписчиков сложится неверное мнение о том как нужно проводить оценку размера используемых библиотек.

[@top-mma-news]

прикольная библиотека

[@pavelgilyakov6592]

Когда только посмотрел видео по использованию Axios

[@mishanep]

Axios всё ещё активно в ходу. Есть фреймворки, где он зашит по дефолту. Так что пригодится.

[@AntonioBenderas]

Ку! )

[@almaz1502]

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

[@grenadier4702]

Добро пожаловать в мир npm!

[@nade3282]

а че у нас куча библиотек для работы с запросами?

[@victormog]

Фабричный китай?.. 😄

[@mishanep]

Это логотип наводит на мысли о Китае?) Мне даже стало любопытно, потому как я не задаюсь обычно этим вопросом, и колоборейтор указан явно не китайский.

[@bronik04]

Там вроде на японском написано

[@victormog]

@@bronik04 про китайских программистов слышал, про индийских, даже про русских... про японских еще ни разу... 😁

[@aheroofourtime2415]

@@victormog они пишут на катане свой код) а если кому-то не понравится их код, они делают харакири себе. По этой причине и мало про них известно. (ЭТО ШУТКА)

[@victormog]

@@aheroofourtime2415 (последней фразой всё испортил) - ЭТО НЕ ШУТКА!

[@nade3282]

увы ky не может сделать элементарные вещи, которая должна деалть, это обидно

[@mishanep]

Например?

[@nade3282]

@@mishanep ну я думал в ней как в axios если переданный search параметр равен null то он не идет в запрос, но увы...

[@mulfyx]

​@@nade3282 null разве не значение???

[@xice111]

А ты смотрел сколько axios после билда весит?

[@Nini-sv1bd]

Вообще не впечатлило. Новый велосипед с некими опциями.

[@awenn2015]

6:18 кстати да, не очень удобная тема, самому все запросы проверять, не особо удобно после того же аксиоса

[@ms77grz]

👍👍

[@albalyu]

Использовать библиотеку ради использования библиотеки более современно, чем использовать библиотеку, которая до сих пор поддерживается (последний релиз у axios был позавчера)? Опять же, эта библиотека не способна решать какие-то запросы бизнеса более эффективно, чем axios.В распакованном виде ни одну ни другую в прод никто пихать не будет. Плюс на многих проектах запросы идут и с бэка и с фронта - на большинстве реальных проектов. И что, использовать на бэке что-то другое, только потому, что эта библиотека более современна, однако на бэке не работает? У разработки есть еще одна сторона - саппорт проектов, большинство из которых на axios. И которым надо заниматься не постоянно, но иногда такие задачи все-таки бывают. И насколько разработчику будет удобно сапортить один проект на axios, и пилить другой проект, используя другую библиотеку для запросов, которая не дает абсолютно никаких преимуществ? Вы не привели ни одной реальной причины, по которой можно считать axios устаревшей, а ky - более современной и актуальной. Тем более, переходить на нее. А что мне более всего не понравилось - в описании ролика нет ссылок ни на одну, ни на вторую библиотеку, что было бы уместно - весьма не профессионально для автора обучающих роликов.

[@kostyafrompiter]

Душно чет

[@user-888azim-97]

как же Axios надоел

[@kostyafrompiter]

крутой ролик, аж axios больше использовать не хочется, спасибо тебе.

[@user-hruser]

Нет смысла в ней, вам еще придется вручную вызывать json метод

[@mulfyx]

особрёшься вызвать метод?

[@lightinthedark5708]

Можно еще обратить внимание на wretch. У него интересный подход для использования.

[@nhrafun]

Новые технологии это конечно круто всегда. Но ради того, что кому-то впадло описать промис пилить целую библиотеку это прям сильно!

[@thechrom007]

Вообще не виду смысла в этой либе 🙄

[@bekat2265]

да заколебали уже. Дайте axios доучить

[@jonyonee]

Она имеет все полезные фичи от axios. Но мне нравиться что она лучше реализовано в этой библиотеке.

[@adamburke4496]

Распространять китайскую библиотека? +15 социального кредита! Удар!

[@ivanselyt]

ссылку на библиотеку религия не позволила оставить?

[@ДаниярБулдаков]

Автор видимо застрял где то в 2014/15 году.

[@NoName-oh9fh]

Поэтому его фамилия "Непомнящий". Забыл в каком году находится.

[@maxk.2076]

Хороший канал, но почему на русском? В 2023 надо ускорить уход от всего русского.

[@Me-ns4qk]

А почему на русском пишешь? 🤡

[@aheroofourtime2415]

@@Me-ns4qk устаревший подход просто - надо перехать на французи)

[@orionpro79]

@@Me-ns4qk чтобы ты понял)). А на каком тебе писать?

[@helplrewerse2925]

Зачем axios и ky если есть более продвинутые инструменты типа react query или rtk query?

[@mishanep]

Инструментов много и под задачи проекта выбираются разные. Есть еще SWR, который делает то же, что и react-query, но не имеет своей логики запросов и просит писать ее самому. Есть много проектов, где можно обойтись без этих крутых инструментов и использовать простые запросы.

[@usaAlexK]

Заменяем fetchем и все

[@alenache1]

👍👍👍👍👍

[@jamjam3337]

👏👍