#заметка дня
В соседнем чате спросили, как получить заголовки (в смысле, сетевые) изображения или вообще любого запроса в React. Ну, content-type, например.
Да как и всегда:
Вот и песочница: https://codesandbox.io/s/affectionate-leaf-s76du?file=/src/App.js
#react #fetch #headers #hook
В соседнем чате спросили, как получить заголовки (в смысле, сетевые) изображения или вообще любого запроса в React. Ну, content-type, например.
Да как и всегда:
useEffect(() => {
async function fetchHeaders() {
const response = await fetch(
"https://cdn.pixabay.com/photo/2021/08/22/06/24/bird-6564286_960_720.jpg"
);
console.log(response.headers.get("content-type"));
}
fetchHeaders();
}, []);Вот и песочница: https://codesandbox.io/s/affectionate-leaf-s76du?file=/src/App.js
#react #fetch #headers #hook
#библиотека дня
Стандартный браузерный метод fetch, даром, что встроенный, представляет собой крайне удручающее зрелище, требующее огромное количество бойлерплейта — настроек — вокруг себя. Поэтому многие до сих пор предпочитают axios, просто чтоб не связываться.
И вот мой товарищ реализовал библиотеку extended-fetch
NPM: https://www.npmjs.com/package/extended-fetch
ГитХаб: https://github.com/glebcha/extended-fetch#readme
Слово автору:
Описание хттп клиента:
- имплементация с использованием нативного fetch (в будущих версиях nodejs можно использовать)
- возможность применять middleware для изменения запроса/ответа как всех типов запросов, так и каждого отдельно
- возможность прерывать запрос по таймауту
- возможность передать signal из созданного внешнего экземпляра AbortController
- модульная архитектура (легко разобраться и доработать)
- отсутствие зависимостей
- библиотечные типы
- es-модули и umd-бандл
- небольшой размер бибилиотеки < 4 KB
Песочница:
https://codesandbox.io/s/lingering-shape-8pml00
Давайте накидаем ему звёздочек да issues. Выглядит интересно, лично я попробую внедрить в один из своих проектов.
#js #fetch #diy
Стандартный браузерный метод fetch, даром, что встроенный, представляет собой крайне удручающее зрелище, требующее огромное количество бойлерплейта — настроек — вокруг себя. Поэтому многие до сих пор предпочитают axios, просто чтоб не связываться.
И вот мой товарищ реализовал библиотеку extended-fetch
NPM: https://www.npmjs.com/package/extended-fetch
ГитХаб: https://github.com/glebcha/extended-fetch#readme
Слово автору:
Описание хттп клиента:
- имплементация с использованием нативного fetch (в будущих версиях nodejs можно использовать)
- возможность применять middleware для изменения запроса/ответа как всех типов запросов, так и каждого отдельно
- возможность прерывать запрос по таймауту
- возможность передать signal из созданного внешнего экземпляра AbortController
- модульная архитектура (легко разобраться и доработать)
- отсутствие зависимостей
- библиотечные типы
- es-модули и umd-бандл
- небольшой размер бибилиотеки < 4 KB
Песочница:
https://codesandbox.io/s/lingering-shape-8pml00
Давайте накидаем ему звёздочек да issues. Выглядит интересно, лично я попробую внедрить в один из своих проектов.
#js #fetch #diy
npm
npm: extended-fetch
Extended http client based on fetch. Latest version: 1.9.0, last published: 3 months ago. Start using extended-fetch in your project by running `npm i extended-fetch`. There are no other projects in the npm registry using extended-fetch.
🤔14😢1
#фишка дня
Как тестировать асинхронный код, собственно,
Не знаю, зачем вам это может понадобиться (тесты, опять же), но Data URL придёт на помощь!
Просто подставьте что-то вроде
#fetch #data #trick
Как тестировать асинхронный код, собственно,
fetch, не имея доступа к интернету и не поднимая локальный сервер?Не знаю, зачем вам это может понадобиться (тесты, опять же), но Data URL придёт на помощь!
Просто подставьте что-то вроде
'data:,\uFEFF{"name":"htmlshit"}' вместо URL в fetch и наслаждайтесь.\uFEFF это BOM символ. Технически, его можно не включать.#fetch #data #trick
🔥23👍1
#статья дня
TIL, что браузерам можно указывать на приоритет сетевых операций: в fetch, в загрузке картинок, и в загрузке скриптов.
Да, браузеры и сами неплохо с этим справляются, вот только мы с вами гораздо умнее и можем с лёгкостью их запутать.
К примеру, очевидно, операция создания заказа и операция лога об этом действии должны иметь разный приоритет. В идеале, случиться в разных потоках, но это не всегда возможно.
Или какие-то картинки чуть более важные, чем другие. Хотелось бы иметь возможность отложить их загрузку, даже если браузер хочет решить иначе.
Для этого у нас есть свойство
А подробнее в статье Алекса МакАртура: https://www.macarthur.me/posts/priority-hints
Пока только в Chrome и уже очень скоро в Safari: https://developer.apple.com/documentation/safari-technology-preview-release-notes/stp-release-178#Web-API
#fetch #priority
TIL, что браузерам можно указывать на приоритет сетевых операций: в fetch, в загрузке картинок, и в загрузке скриптов.
Да, браузеры и сами неплохо с этим справляются, вот только мы с вами гораздо умнее и можем с лёгкостью их запутать.
К примеру, очевидно, операция создания заказа и операция лога об этом действии должны иметь разный приоритет. В идеале, случиться в разных потоках, но это не всегда возможно.
Или какие-то картинки чуть более важные, чем другие. Хотелось бы иметь возможность отложить их загрузку, даже если браузер хочет решить иначе.
Для этого у нас есть свойство
priority в методе fetch, атрибут fetchpriority для изображений и async и всё тот же fetchpriority в загрузке скриптов.А подробнее в статье Алекса МакАртура: https://www.macarthur.me/posts/priority-hints
Пока только в Chrome и уже очень скоро в Safari: https://developer.apple.com/documentation/safari-technology-preview-release-notes/stp-release-178#Web-API
#fetch #priority
👍11❤2
#библиотека дня
Стандартный метод fetch, даром, что встроенный, представляет собой крайне удручающее зрелище, требующее огромное количество бойлерплейта — настроек — вокруг себя.
Поэтому многие до сих пор предпочитают axios, просто чтоб не связываться.
Мой друг и, какое совпадение, подписчик решил эти вопросы реализовав библиотеку extended-fetch, о которой я даже писал, с этим же введением: https://t.me/htmlshit/1290
Слово автору:
А теперь у него нашлось немного времени, так что он обновил библиотеку чтобы можно было в дженерике передавать свой тип возвращаемых запросом данных
https://github.com/glebcha/extended-fetch/tree/master#custom-response-type
то есть чтобы можно было делать так
Если не передавать ничего в дженерике и выполнять
По-моему, хорошая альтернатива axios-у, если неохота тянуть лишнего.
Камон, котаны, как ещё опенсорсу пиариться?
#fetch #axios #pr
Стандартный метод fetch, даром, что встроенный, представляет собой крайне удручающее зрелище, требующее огромное количество бойлерплейта — настроек — вокруг себя.
Поэтому многие до сих пор предпочитают axios, просто чтоб не связываться.
Мой друг и, какое совпадение, подписчик решил эти вопросы реализовав библиотеку extended-fetch, о которой я даже писал, с этим же введением: https://t.me/htmlshit/1290
Слово автору:
если очень обобщенно - это попытка вынести в абстракцию над fetch наиболее востребованный функционал axios
цели просты - максимально возможное следование спецификации, "сквозная" типизация, ноль зависимостей, изоморфный код (да, в nodejs сейчас undici как имплементация fetch)
А теперь у него нашлось немного времени, так что он обновил библиотеку чтобы можно было в дженерике передавать свой тип возвращаемых запросом данных
https://github.com/glebcha/extended-fetch/tree/master#custom-response-type
то есть чтобы можно было делать так
const api = createHttpClient();
interface Book {
id: string,
description?: string,
}
api.get<Book>('/api/books/12’)
Если не передавать ничего в дженерике и выполнять
api.get('/api/books/12'), то вернется объединение типов
Promise<string | Record<string, unknown> | RequestInit | Blob | ArrayBuffer | FormData>
По-моему, хорошая альтернатива axios-у, если неохота тянуть лишнего.
Камон, котаны, как ещё опенсорсу пиариться?
#fetch #axios #pr
👍24🤡7
#статья дня
Плохо ли патчить глобальные методы? Казалось, что ещё со времён PrototypeJS и MooTools было понятно, что да.
Из-за них у нас String.prototype.includes() вместо String.prototype.contains().
Но так вышло, что аж три крупных проекта решили, что им-то всё можно :) И это React.js, Next.js и Bun.
Next.js и React.js оба патчили fetch. Причём, React по факту сделал это ради поддержки React Server Components, которые — сюрприз — на момент внедрения тоже были только в Next.
А Bun всё в тот же несчастный fetch добавил конфиг proxy.
Не будем углубляться в бизнес-решения, стоящие за этим, но React в итоге отказался от патчинга и ни в один релиз это так и не дошло.
Итак, статья по теме: https://kettanaito.com/blog/why-patching-globals-is-harmful
Выдержки:
1. Страдает поддержка
2. Теряется предсказуемость работы (особенно с тем, как это пытались сделать в React)
3. Предложенные API — они про решение бизнес-задач здесь и сейчас, но никак не про будущие процессы и обучение разработчиков.
4. Подобные решения — это лок на поставщика. Используете proxy в Bun — на ноду не слезете.
5. Если подобное внезапно наберёт популярность — как в случае с Prototype.js и MooTools, то уже спеку придётся подгонять под вендора.
В статье, естественно, даются примеры, как подобного избежать и немного больше исторического контекста.
#js #patch #fetch #react
Плохо ли патчить глобальные методы? Казалось, что ещё со времён PrototypeJS и MooTools было понятно, что да.
Из-за них у нас String.prototype.includes() вместо String.prototype.contains().
Но так вышло, что аж три крупных проекта решили, что им-то всё можно :) И это React.js, Next.js и Bun.
Next.js и React.js оба патчили fetch. Причём, React по факту сделал это ради поддержки React Server Components, которые — сюрприз — на момент внедрения тоже были только в Next.
А Bun всё в тот же несчастный fetch добавил конфиг proxy.
Не будем углубляться в бизнес-решения, стоящие за этим, но React в итоге отказался от патчинга и ни в один релиз это так и не дошло.
Итак, статья по теме: https://kettanaito.com/blog/why-patching-globals-is-harmful
Выдержки:
1. Страдает поддержка
2. Теряется предсказуемость работы (особенно с тем, как это пытались сделать в React)
3. Предложенные API — они про решение бизнес-задач здесь и сейчас, но никак не про будущие процессы и обучение разработчиков.
4. Подобные решения — это лок на поставщика. Используете proxy в Bun — на ноду не слезете.
5. Если подобное внезапно наберёт популярность — как в случае с Prototype.js и MooTools, то уже спеку придётся подгонять под вендора.
В статье, естественно, даются примеры, как подобного избежать и немного больше исторического контекста.
#js #patch #fetch #react
👍12
#статья дня
TIL, что браузерам можно указывать на приоритет сетевых операций: в fetch, в загрузке картинок, и в загрузке скриптов.
Да, браузеры и сами неплохо с этим справляются, вот только мы с вами гораздо умнее и можем с лёгкостью их запутать.
К примеру, очевидно, операция создания заказа и операция лога об этом действии должны иметь разный приоритет. В идеале, случиться в разных потоках, но это не всегда возможно.
Или какие-то картинки чуть более важные, чем другие. Хотелось бы иметь возможность отложить их загрузку, даже если браузер хочет решить иначе.
Для этого у нас есть свойство
А подробнее в статье Алекса МакАртура: https://www.macarthur.me/posts/priority-hints
Пока только в Chrome и Safari с версии 17.2: https://developer.apple.com/documentation/safari-technology-preview-release-notes/stp-release-178#Web-API
#fetch #priority #бородач
TIL, что браузерам можно указывать на приоритет сетевых операций: в fetch, в загрузке картинок, и в загрузке скриптов.
Да, браузеры и сами неплохо с этим справляются, вот только мы с вами гораздо умнее и можем с лёгкостью их запутать.
К примеру, очевидно, операция создания заказа и операция лога об этом действии должны иметь разный приоритет. В идеале, случиться в разных потоках, но это не всегда возможно.
Или какие-то картинки чуть более важные, чем другие. Хотелось бы иметь возможность отложить их загрузку, даже если браузер хочет решить иначе.
Для этого у нас есть свойство
priority в методе fetch, атрибут fetchpriority для изображений и async и всё тот же fetchpriority в загрузке скриптов.А подробнее в статье Алекса МакАртура: https://www.macarthur.me/posts/priority-hints
Пока только в Chrome и Safari с версии 17.2: https://developer.apple.com/documentation/safari-technology-preview-release-notes/stp-release-178#Web-API
#fetch #priority #бородач
👍13❤1🤩1
#статья дня
Мой товарищ, а по совместительству автор библиотеки extended-fetch, принёс довольно интересную тему для обсуждения.
Fetch API давно стал стандартным способом работы с HTTP-запросами в JavaScript, но его реализация в разных рантаймах может отличаться.
Особенно это заметно, когда речь заходит о поддержке HTTP/2: этот протокол позволяет улучшить производительность за счет мультиплексирования запросов.
Когда пишешь код в браузере, fetch воспринимается как что-то само собой разумеющееся. Он просто работает, поддерживает полный спектр HTTP, и никаких проблем не возникает.
Рассмотрим, как обстоят дела с HTTP/2 в популярных JavaScript-рантаймах: Node.js, Deno и Bun.
Спойлер: речь о поддержке HTTP/2 и экзотическом случае, при котором доступно общение с сервером без фоллбэка на HTTP/1.1.
🦕 Победитель — Deno. Этот рантайм обеспечивает полноценную поддержку HTTP/2 в fetch без дополнительных манипуляций.
🩼 Костыльный победитель — Node.js. Здесь fetch основан на библиотеке undici, которая изначально не поддерживает HTTP/2. Однако, можно воспользоваться самим undici, минуя стандартный fetch, и получить желаемый результат.
🌚 Проигравший — Bun. В этом рантайме более года открыто issue о поддержке HTTP/2, но пока что полноценной реализации нет.
Подытожим
Если вам нужна полноценная поддержка HTTP/2 в fetch, лучший выбор — Deno. В Node.js придется использовать обходные пути, а в Bun — просто подождать, пока разработчики добавят эту функциональность.
В общем, даже стандартные API могут работать по-разному в разных окружениях, поэтому всегда стоит проверять их поддержку перед использованием в продакшене.
Собственно, вот и статья: https://blog.disintegrator.dev/posts/http2-support-in-js-runtimes/
Там есть все примеры кода и клиента, и сервера.
Мнения?
#fetch #node #deno #bun
Мой товарищ, а по совместительству автор библиотеки extended-fetch, принёс довольно интересную тему для обсуждения.
Fetch API давно стал стандартным способом работы с HTTP-запросами в JavaScript, но его реализация в разных рантаймах может отличаться.
Особенно это заметно, когда речь заходит о поддержке HTTP/2: этот протокол позволяет улучшить производительность за счет мультиплексирования запросов.
Когда пишешь код в браузере, fetch воспринимается как что-то само собой разумеющееся. Он просто работает, поддерживает полный спектр HTTP, и никаких проблем не возникает.
Рассмотрим, как обстоят дела с HTTP/2 в популярных JavaScript-рантаймах: Node.js, Deno и Bun.
Спойлер: речь о поддержке HTTP/2 и экзотическом случае, при котором доступно общение с сервером без фоллбэка на HTTP/1.1.
🩼 Костыльный победитель — Node.js. Здесь fetch основан на библиотеке undici, которая изначально не поддерживает HTTP/2. Однако, можно воспользоваться самим undici, минуя стандартный fetch, и получить желаемый результат.
Подытожим
Если вам нужна полноценная поддержка HTTP/2 в fetch, лучший выбор — Deno. В Node.js придется использовать обходные пути, а в Bun — просто подождать, пока разработчики добавят эту функциональность.
В общем, даже стандартные API могут работать по-разному в разных окружениях, поэтому всегда стоит проверять их поддержку перед использованием в продакшене.
Собственно, вот и статья: https://blog.disintegrator.dev/posts/http2-support-in-js-runtimes/
Там есть все примеры кода и клиента, и сервера.
Мнения?
#fetch #node #deno #bun
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12❤3🤩1
#статья дня
Встроенная в браузеры функция выполнения HTTP-запросов
Топорная, если хотите.
Ошибки бросает только на ошибках сервера или соединения (404 — не ошибка), нужно самому формировать заголовки запроса, даже самому формировать строку с JSON или данными формы в urlencode...
Очень многие вместо неё как использовали, так и продолжают использовать тот же axios, кто-то берёт разные иные обёртки, как Tanstack Query aka React Query, а кто-то один раз написал свою реализацию обработки ошибок и прочего бойлерплейта — и забыл.
Так вот, позвольте вам напомнить, что таки есть причина для этой кондовости. По-порядку.
Чаще всего получение данных сводится к разрешению двух промисов:
Но почему? Почему fetch сразу данные-то не отдаёт? К чему эти танцы?
Так вот, всё дело в том, что мир не ограничивается гонянием джисонов по сети. Возможно, нужен просто текст. Возможно, решение нужно принять ещё до того, как заняться обработкой тела запроса. Возможно, бинарные данные. А, возможно, данные кусками или потоком — stream — который можно прервать в любой момент:
В любом случае, так или иначе, собственно, fetch возвращает промис с результатами запроса, а уже потом — дело за вами, как его обработать.
И вот хороший пример — от Тома Стивена: https://tomontheinternet.com/why-two-awaits/
В статье он даёт ссылку на код с демонстрацией: https://github.com/tom-on-the-internet/fetch-demonstration
Ну и я решил и в песочницу этот код запихать, для наглядности и понимания процесса: https://codesandbox.io/p/devbox/mvhrgz
Так что, возможно,
#fetch #http #stream
Встроенная в браузеры функция выполнения HTTP-запросов
fetch — штука достаточно кондовая. Топорная, если хотите.
Ошибки бросает только на ошибках сервера или соединения (404 — не ошибка), нужно самому формировать заголовки запроса, даже самому формировать строку с JSON или данными формы в urlencode...
Очень многие вместо неё как использовали, так и продолжают использовать тот же axios, кто-то берёт разные иные обёртки, как Tanstack Query aka React Query, а кто-то один раз написал свою реализацию обработки ошибок и прочего бойлерплейта — и забыл.
Так вот, позвольте вам напомнить, что таки есть причина для этой кондовости. По-порядку.
Чаще всего получение данных сводится к разрешению двух промисов:
let response = await fetch("/some-url")
let myObject = await response.json()
Но почему? Почему fetch сразу данные-то не отдаёт? К чему эти танцы?
Так вот, всё дело в том, что мир не ограничивается гонянием джисонов по сети. Возможно, нужен просто текст. Возможно, решение нужно принять ещё до того, как заняться обработкой тела запроса. Возможно, бинарные данные. А, возможно, данные кусками или потоком — stream — который можно прервать в любой момент:
async function readData(url) {
const response = await fetch(url);
for await (const chunk of response.body) {
// Do something with each "chunk"
}
// Exit when done
}
В любом случае, так или иначе, собственно, fetch возвращает промис с результатами запроса, а уже потом — дело за вами, как его обработать.
И вот хороший пример — от Тома Стивена: https://tomontheinternet.com/why-two-awaits/
В статье он даёт ссылку на код с демонстрацией: https://github.com/tom-on-the-internet/fetch-demonstration
Ну и я решил и в песочницу этот код запихать, для наглядности и понимания процесса: https://codesandbox.io/p/devbox/mvhrgz
Так что, возможно,
fetch хорош таким, какой он есть. Универсальным.#fetch #http #stream
👍17❤2