Встроенная в браузеры функция выполнения 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