Встроенная в браузеры функцич выполнения HTTP-запросов fetch — штука достаточно кондовая.

#статья дня

Встроенная в браузеры функцич выполнения HTTP-запросов fetch — штука достаточно кондовая.

Очень многие вместо неё как использовали, так и продолжают использовать тот же 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