Чем заменить Axios в 2023-м
HTML-код
- Опубликовано: 21 сен 2024
- Удобная абстракция для работы с запросами к серверу - это не только про axios. Библиотека ky предлагает отличный API и при этом весит в 10 раз меньше "народного любимца". Так стоит ли в 2023-м использовать axios? Или попробовать что-то более современное?
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru...
paypal.me/mish...
Михаил, спасибо за уроки. Хотел бы попросить вас сделать урок по работе с аналогом interceptor для ky, да и для axios было бы интересно. еще интересует вариант когда надо делать несколько параллельных вызовов разных api, каждый из которых может вернуть код по которому надо делать редирект на авторизацию и надо прервать остальные
Очередной фреймворк, для замены такого же фреймворка, без негатива, но эта гонка в никуда
Это пинок под зад axios. Чтоб не забывал что он тут не один. Такое было с npm и yarn, node и deno. Конкуренция это всегда хорошо стимулирует развиваться.
@@БольшойБрат-з4р хотел бы я иметь такого большого брата
Огонь! Свежий выпуск дайджеста годных либ от Михаила) Я, как старовер, предпочитаю fetch, но тут приятно удивился возможностями кастомизации. Либа понравилась
а староверы разве не XMLHttpRequest?
@@АлександрРак-о2з не до конца старовер)
Михайл, привет. Очень очень жду полноценный курс с очень разными задачами в проекте по react native платный или нет без разницы) 👨💻
Зачем Реакт натив) если есть Реакт капазитор) одна кодовая база, в рендере не значительно отстает уж поверь
@@boycovclub зачем если есть флаттер)
Михаил, спасибо за видео. Добавляй пожалуйста в описание ссылки на библиотеки о которых рассказываешь :)
А зачем Axios заменять-то? Сегодня у нас есть XmlHttpRequest, Fetch API, есть еще обертка в виде Axios. Сегодня мы видим еще один инструмент - Ky. Бери что наиболее подходит под задачу и используй. Используй с умом, а не потому что хайпово.
В контексте вашего видео, по названию, можно подумать, что Axios - лютое г..но, а вот Ky - вот это мощь и простота, хотя если присмотреться, то тоже самое.
Потому что неопытные программисты используют эту библиотеку просто чтобы отправить один get-запрос и вообще не думают о том, зачем они в проект её притащили. Потому что в каждом втором примере на Ютубе её использовал блогер вообще не задумываясь нужна она там или нет (в большинстве случаев не нужна абсолютно и лишняя зависимость). Кроме того у axios были проблемы с безопасностью.
Зачем вообще использовать что-то, где понадобится всего 20% функционала? Напиши свое решение за час (в случае с оберткой над fetch), добавь тесты, и готово. Если это серьезный проект, то это стоит того. Лучше, чем тащить лишнию зависимость
@@grenadier4702 Согласен с вами на 100500%. Но, могу с уверенностью сказать, что мало кто хочет делать что-то свое и не каждый сможет это сделать на достаточно хорошем уровне. Убедился в этом много раз.
Тоже самое, только по весу в 10 раз меньше, да
Круто ! обязательно попробую на следующем проекта! Спасибо за труд!
Очень классное и полезное видео, спасибо Михаил! Буду теперь применять эту библиотеку)
Спасибо за обзор. Впервые слышу про ky. Надо будет попробовать..
Спасибо за обзор новых технологий)) Кстати насчет React Native согласен с ниже комментарием, было бы очень интересно!
По bundlephobia (которая вычисляет в сборке) axios имеет весь 30kb, против ky за 10kb. Разница не такая что бы заботиться
И тем не менее, если для практики пилить крад чеклисты да телефонные справочники - самое оно.
20kb это очень много
@@The14Some1 и смысл для практики использовать, если многие не используют эту технологию, зачем тратить время
Спасибо большое! Крутая инфа
Сам не так давно перевёл проект на ky. И тут сразу видео. Спасибо за популяризацию такой хорошей библиотеки
да твою же))))))))
Axios - то половина не знает))))
Видосу лайк
Ржу!)
а другая половина только перешла на него и начало понимать и тут сразу: оно устарело(
@@aheroofourtime2415 жиза
Я человек простой - вижу новый видос, делаю ветку в репозитории и открываю сандбокс )
Так аксиос весит 11кб min.gzip... Ну сэкономишь может пару кб ценой всеядности. Это ведь кэшируемая статика. Смешно на фоне размера медиаконтента фронта и месива реакт компонентов.
Спасибо, узнал из вашего видео об этой чудесной библиотеке. Уже использую в своих проектах.
Так библиотека такая же старая как и axios, там ничего нового и чего-то уникального нет.
Спасибо Миша за новинку.
С удовольствием послушал бы про pnpm, если это Вам знакомо
Михаил, здравствуйте! Спасибо за видео, было интересно послушать о хорошей альтернативе "axios", надо будет опробовать её в действии)
спасибо Михаил! рад вашему новому видео
Михаил, спасибо за видео, но у Вас в этом видео периодически скачет громкость звука. Видимо, программа в которой вы пишите звук, автоматически пытается подстроиться под громкость вашего голоса и делает только хуже.
Спасибо. Я пытаюсь понять причину и экспериментирую с настройками. Пока удалось минимизировать эхо. Надеюсь и остальное удастся решить в ближайшее время.
не увидел преимуществ перед аксиосом
ретраи должны обрабатываться на уровень выше, например, как делает react-query, это не задача хттп клиента, имхо
Классная штука, надо попробовать. Главное название не забыть :D
Благодарю за полезный контент Михаил
Михаил, пожалуйста, расскажите подробнее про styled components, я видел у Вас видео на эту тему, но вы так, поверхностно и сквозь прошлись по ним, хотелось бы более углубленно, если это возможно.
Огромное за спасибо за Ваши видео и всю работу
без реакта уже никак не проверить библиотеку?)
Спасибо за интересный контент! Очень бы хотелось видео про react query увидеть от вас!
Сам хочу)) Думаю в этом году доберусь и до него. Он классный.
@@mishanep тогда закину еще идею: сравнение RTK Query и TanStack Query)
Ну не знаю.... Прям "хватит использовать axios"? есть ещё преимущества, корме экономии 20кб у библиотеки? Если это всё то спасибо, не нужно ) да и к тому же она на основе fetch, а значит её нужно полифилть и её преимущество станет ещё меньше
Основное преимущество - гибкий retry, если запрос не удался. Касаемо полифила - здесь надо смотреть список поддерживаемых браузеров. Сегодняшние фреймворки зачастую отказываются от поддержки старых браузеров и многие проекты идут в эту же сторону, чтобы не обмазываться полифиллами. Тогда и для fetch он не понадобится.
в начале видео было сказано, что если вы не поддерживаете говно-легаси-браузеры, то не надо ничего полифилить, фетч во всех адекватных современных браузерах есть
Очень интересно, спасибо!
Спасибо за видео! Какую кнопку нажимаете на 8:28?)
Ctrl+пробел (на маке Cmd + пробел)
Если не ошибаюсь Ку довольно старый пакет такой же как и axios, я бы не сказал, что это замена. Это альтернатива, но не замена. + Учитываем такое понятие как tree-shaking в современном frontend.
такому говну как аксиос даже тришейк не поможет
Круто, что она весит в 10 раз меньше, при этом предоставляет фактически такой же функционал как и axios, но при этом приносит что то новое. Обязательно попробую его в пет проекте, особенно понравилось, что можно отнаследоваться от другого инстанса и расширить его.
Круто, спасибо
делаешь запрос, формируешь объект Options для запроса. Можешь передать туда body, а можешь json. Это вроде одно и то же, но не совсем.
1. У запроса нет поля json
2. 2 источника правды
вот вам и новая библиотека ку
Ну в целом интересная библа) надо запомнить)
Спасибо вам!
Выглядит очень хорошо
Очень познавательно)
Как встречает Новый год нормальный человек: С Новым годом!!!
Как встречает Новый год фронтендер: чем заменить все библиотеки, которые я использую
а кто пользовался axios)? когда есть fetch)?
аксиос весит не больше 20кб в сжатом виде. в том пакаже вероятно тесты и еще что-то имеется.
Круто 🔥🔥🔥🔥🔥🔥
Здравствуйте. Спасибо, что познакомили с библиотекой. Но, на мой взгляд, сравнение с axios необъективно. Вы несколько раз говорите, что "если бы мы работали с axios, нам бы пришлось делать это вручную". В итоге, код, который вы демонстрируете и есть Ручная обработка ошибок, через try catch. Если бы вы представили код обработки ошибок на axios, он был бы по размеру того же объема, может и меньше. Кроме этого, вы сказали, что библиотека имеет дефолтное реагирование на статусы ответа выше определенной цифры, т.е. за вас решает, что ошибка, а что нет. Не самое лучшее поведение.
Про ручную обработку ошибок я сравнивал с fetch (хотя мог и оговориться), так как он не выбросит ошибку сам, даже если получил ошибку от сервера (есть особые кейсы когда и fetch выбросит, но не будем об этом).
@@mishanep ну да, по сравнению с fetch кода поменьше, в этом вы правы
Михаил как вы так все делает превосходно? Вы в школе на 5-ки учились что ли?
Ладно Михаил пилите учебное видео под вью на удеми ток 3 версии
Спасибо! А почему ты не делаешь ролики сразу в TS? Я тоже не фанат TS-a но волей-неволей пишут то все на нем.
Хорошо, что ты не думающий человек)
Разве 300-е запросы вылетают с ошибкой? По-моему только 400-е и 500-е
Когда только посмотрел видео по использованию Axios
Axios всё ещё активно в ходу. Есть фреймворки, где он зашит по дефолту. Так что пригодится.
Сразу лайк. Наконец кто-то рассказывает, что axios давно не актуален и даже вреден.
Спасибо! Со звуком что-то не то, лимитер как будто режет
8:10 а что с мультипарт форм датой? Как обычно самому надо создавать, прокидывать и заголовки добавлять или там есть какие то заготовки ?
Content-Type установится автоматически. А FormData создавать самому, да.
@@mishanep досмотрел ролик, крутая либа, как простую замену фечу можно использовать
Не вводите людей в заблуждение размер 1.4mb включает 3 разных бандла для:
424K ./esm
256K ./browser
344K ./node
т.к важно уточнить что в этот размер входят и мапы загрузка которых проиходит только при активном devtools а в обычном состоянии они не загружаются.
т.е в зависимости от флагов в исходных бандл попадет только одна версия.
При этом бандл "ky" имеет размер:
116K ./types
56K ./core
72K ./utils
36K ./errors
292K .
Таким образом при ближайшем рассмотрении она получается даже больше чем axios однако для точной оценки нужно пропустить через сборщик и посмотреть размер полученного сегмента.
Было бы очень странно если бы большой пласт опытных разработчиков стали бы использовать либу для запросов размером в 1.4 мегабайта.
А ведь кто то на полном серьезе будет продвигать эту либу на работе аргументируя приведенными вами примерами без изучения предметной области.
Советую на будуще проводить тщательные исследования т.к после просмотра видео как минимум у половины ваших подписчиков сложится неверное мнение о том как нужно проводить оценку размера используемых библиотек.
Михаил, на случай, если youtube будет заблочен в РФ, есть ли в планах скопировать контент на другой ресурс? Хоть на бусти, хоть еще куда (только не на рутьюб, плиз)
Я начинал выкладывать как раз не рутьюб)) Но там как-то тухленько. Бусти я не пользуюсь пока.
Вообще я надеюсь, что люди умеют пользоваться vpn =)
Но да, я периодически думаю над этой темой. Пока понимания нет. Я как-то делал опрос на эту тему, но тоже понимания после него не пришло.
Спасибо
А почему просто не использовать встроенный fetch?
Потому что он унылый , работает но унылый, ручная обработка ошибок и тд
@@awenn2015 долой уныние)
Разработчики любят удобные абстракции, особенно когда есть готовые и надежные. Но многие сегодня работают с обычным fetch и пишут много похожего кода, который можно было бы не писать. Сам пишу, особенно по работе))) Но при возможности, использую абстракции.
Михаил, добрый день, когда будут скидки на юдеми на ваши курсы? Приобрел бы js, react
Приветствую! На моем сайте mishanep.com ссылки на курсы идут сразу с действующим купоном. Несколько раз в году я делаю скидку побольше, но она действует всего 5 дней. В таких случаях я делаю рассылки и объявления. Пока не планировал на этот год даты для больших скидок.
@@mishanep спасибо большое, Михаил, что вы дошли до текущего момента в жизни таким замечательным человеком, желаю вам всего самого хорошего, от всего сердца!
@@mishanep и можно еще вопрос, на степике тоже есть задачи для практики в ходе обучения?
@@JackSteamBoy да, курс идентичный. Но на Степике другой тренажёр, и меньшее количество заданий идут с автотестами.
@@mishanep после вашего курса по js можно переходить на реакт или стоит еще попрактиковаться с js?
И подобных либ больше понравился wretch js. У него синтаксис приятнее
Глянул апишку. Согласен, приятно выглядит.
Михаил, может знаете, как в их хуке beforeRequest изменить url. Он(url) у них readonly.
Спасибо за видео.
Всё верно, url, как и большая часть объекта request, дается только на чтение. По логике, данный хук нужен для установки дополнительных заголовков, в том числе если нужно обновить токен. Оригинальный адрес запроса изменить вряд ли получится. А что за кейс такой, когда надо мутировать только что переданный url?
@@mishanep, например, для всех запросов get с одинаковым pathUrl добавить в search API key. Понятно, что можно сделать helper для params, но хотелось попробовать хуки этой библиотеки.
Что-то вроде:
if ( req.url.startsWith(any) && req.method === 'GET' ) {
req.url = `${req.url}&key=${key}`
что-то webpack не хочет собирать проект если заменить axios на ky :(
Стало бы webpack пора заменить на vite =D
А если серьезно, надо смотреть. Всё-таки есть различия между API библиотек и где-то нужно будет над опциями поработать, что-то добавить, что-то убрать.
@@mishanep вот именно: надо смотреть, разбираться. А оно того стоит? Возможно есть смысл новый проект начинать с ky. А так: работает на axios - заказчик не жалуется - ну и пусть себе дальше работает.
помимо размера, есть ли еще какие-то преимуществу у Ky перед Axios?
Retry, hooks. У библиотеки отличается API. Там есть ещё что улучшать, безусловно, но в целом выглядит интересно.
@@mishanep спасибо!надо будет это попробовать
Все что может эта либа уже давно может аксиос, да еще и на сервере работает, да еще и в старых браузерах. Не вижу смысла в новой библиотеке
вступление, видимо, мимо ушей было? 😉
@@mulfyx ты тоже читаешь этих комментов?
хм рано залетел только смотрел про вит)
Добрый Михаил. Не могу понять как передать 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) Документацию почитал но что-то не совсем там много понял.
Я не знаю о каком сервисе идет речь. Но на первый взгляд выглядит так, что вам просто не нужно использовать заголовок Authorization, потому что ваш заголовок называется иначе.
headers: {
'X-Api-Key': apiKey,
},
Вместо того, что бы решать реальные задачи в реальных проектах, разработчикам забивают головы бесконечным количеством новым библиотек, которые по сути делают одно и тоже. Наверное поэтому и назвалось сей чудо Ку - говорящее название
Добро пожаловать в мир npm!
а че у нас куча библиотек для работы с запросами?
Где можно прочитать про "вес" таких продуктов по подробнее чтобы не отвлекать от таких вопросов? Мне просто не понятно, я только учусь, почему 1.68 мб это считается много?
Чем меньше весь проект будет весить после сборки, тем выше будет скорость первичной загрузки страницы для пользователя. Если есть возможность использовать вместо тяжелой библиотеки более легковесную и при этом не терять в функционале, то почему бы ей не воспользоваться ?
@@muradkhanibragimov1353 понял, спасибо
5:20
А можно разъяснение тупоголовому, в чём для меня как пользователя библиотеки ky.js польза от того что он написан на TypeScript? Только в том что это "модно, молодёжно"? На мой непросвещённый взгляд, поскольку TypeScript транспилируемый язык, и то во что оно там натранспилируется в процессе сборки априори будет менее оптимально, чем то что будет сразу написано на ванильном JS. Ну ок, если мой проект также использует TypeScript, то при включении библиотеки в общий проект, возможно , за счёт какого-то переиспользования кода или каких-нибудь оптимизаций во время транспиляции потери памяти и производительности будут сведены на нет и я получу по сути эффективность ванильного JS, но в чём для меня то плюс от этого? Или может быть я что-то пропустил и браузеры уже во всю нативно исполняют TypeScript?
Я понимаю интерес разработчика - наверное, писать на более развитом и современном языке ему нравится больше, и возможно он готов смириться с неизбежными при этом дополнительными трудностями на этапе отладке (или он хорошо знает как их успешно решать), но мне то какой от этого прок?
Когда библиотека сразу написана на TS или сама поставляет файл декларации, то не нужно дополнительно устанавливать типы и с большей вероятностью в типах не будет ошибок и не придется гадать про соответствие версий библиотеки и отдельных типов к ней.
Ну а в целом, типы дают нам автоподсказки и зачастую даже не надо лезть в документацию - через файл декларации можно получить достаточно информации. Плюс мне нравится, что с типами библиотека не даст нам использовать ее неправильно и будет сигнализировать на все попытки забивать гвозди микроскопом.
@@mishanep Ну что ж, доступно. Спасибо.
Ку💪😏
прикольная библиотека
Вообще не впечатлило. Новый велосипед с некими опциями.
Новые технологии это конечно круто всегда. Но ради того, что кому-то впадло описать промис пилить целую библиотеку это прям сильно!
Можно еще обратить внимание на wretch. У него интересный подход для использования.
крутой ролик, аж axios больше использовать не хочется, спасибо тебе.
Использовать библиотеку ради использования библиотеки более современно, чем использовать библиотеку, которая до сих пор поддерживается (последний релиз у axios был позавчера)? Опять же, эта библиотека не способна решать какие-то запросы бизнеса более эффективно, чем axios.В распакованном виде ни одну ни другую в прод никто пихать не будет. Плюс на многих проектах запросы идут и с бэка и с фронта - на большинстве реальных проектов. И что, использовать на бэке что-то другое, только потому, что эта библиотека более современна, однако на бэке не работает? У разработки есть еще одна сторона - саппорт проектов, большинство из которых на axios. И которым надо заниматься не постоянно, но иногда такие задачи все-таки бывают. И насколько разработчику будет удобно сапортить один проект на axios, и пилить другой проект, используя другую библиотеку для запросов, которая не дает абсолютно никаких преимуществ? Вы не привели ни одной реальной причины, по которой можно считать axios устаревшей, а ky - более современной и актуальной. Тем более, переходить на нее. А что мне более всего не понравилось - в описании ролика нет ссылок ни на одну, ни на вторую библиотеку, что было бы уместно - весьма не профессионально для автора обучающих роликов.
Душно чет
как же Axios надоел
👏👍
А ты смотрел сколько axios после билда весит?
👍👍👍👍👍
Распространять китайскую библиотека? +15 социального кредита! Удар!
Фабричный китай?..
😄
Это логотип наводит на мысли о Китае?) Мне даже стало любопытно, потому как я не задаюсь обычно этим вопросом, и колоборейтор указан явно не китайский.
Там вроде на японском написано
@@bronik04 про китайских программистов слышал, про индийских, даже про русских... про японских еще ни разу... 😁
@@victormog они пишут на катане свой код) а если кому-то не понравится их код, они делают харакири себе. По этой причине и мало про них известно. (ЭТО ШУТКА)
@@aheroofourtime2415 (последней фразой всё испортил) - ЭТО НЕ ШУТКА!
да заколебали уже. Дайте axios доучить
Ку! )
Она имеет все полезные фичи от axios. Но мне нравиться что она лучше реализовано в этой библиотеке.
увы ky не может сделать элементарные вещи, которая должна деалть, это обидно
Например?
@@mishanep ну я думал в ней как в axios если переданный search параметр равен null то он не идет в запрос, но увы...
@@nade3282 null разве не значение???
6:18 кстати да, не очень удобная тема, самому все запросы проверять, не особо удобно после того же аксиоса
Нет смысла в ней, вам еще придется вручную вызывать json метод
особрёшься вызвать метод?
Вообще не виду смысла в этой либе 🙄
ссылку на библиотеку религия не позволила оставить?
Хороший канал, но почему на русском? В 2023 надо ускорить уход от всего русского.
А почему на русском пишешь? 🤡
@@Me-ns4qk устаревший подход просто - надо перехать на французи)
@@Me-ns4qk чтобы ты понял)). А на каком тебе писать?
Автор видимо застрял где то в 2014/15 году.
Поэтому его фамилия "Непомнящий". Забыл в каком году находится.
Заменяем fetchем и все
Зачем axios и ky если есть более продвинутые инструменты типа react query или rtk query?
Инструментов много и под задачи проекта выбираются разные. Есть еще SWR, который делает то же, что и react-query, но не имеет своей логики запросов и просит писать ее самому. Есть много проектов, где можно обойтись без этих крутых инструментов и использовать простые запросы.
👍👍