Каким образом отправлять запросы с front на back на чистом js?

Question

[Yukan Mukimura]

Что будет лучше и в чем плбсы и минусы обоих?
1. Создание класса с статик методами которые выполняют одну задачу (например один получает онли название, другой всё).
2. Создание универсальной функции для get и post принимающие в себе header body и все такое.
Вот что я использую:

// На клиенте (JavaScript)
fetch('/some-route', {
  method: 'POST',
  body: JSON.stringify({ /* данные для отправки */ }),
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(response => response.json())
.then(data => {
  // Рендеринг данных на стороне клиента
  const messageElement = document.getElementById('message');
  messageElement.innerText = data.message;
})
.catch(error => console.error(error));

Comments

[Rise]

Это зависит от того в какой парадигме вы пишите код, если это ООП, то используют классы, если нет, то функции.

[Сергей delphinpro]

fetch и так уже абстракция. Незачем над ней еще одну городить.

[Yukan Mukimura]

Сергей delphinpro, По моему опыту fetch слишком много в коде занимает а также код становится слишком непонятным, масштабировать становится тяжелее. Мы тут говорим о ванильном js не забудь.

[Сергей delphinpro]

Yukan Mukimura, Тогда возьмите Axios (или подсмотрите его внешний апи и напишите сами)
Есть глобальные настройки для всех запросов.
Есть возможность задать отдельные настройки для текущего запроса
Есть общий метод выполнения запроса с максимальной настройкой
Есть отдельные методы-хелперы для типов запросов get(), post()

Напишете в виде класса, или набора функций - значения особого не имеет.

[Uno]

Yukan Mukimura, это ты не забудь прежде чем умничать. Ванильный js это XMLHttpRequest. а fetch это высокоуровневая обертка.

Что будет лучше

лучше для кого? для бэка лучше меньше нагрузки. В каком случае меньше нагрузки?

[Yukan Mukimura]

Uno, Я не умный во первых. Во вторых извините я с XMLHttpRequest не дружу, ну не получается у меня адекватно использовать его, под ванильный js я имею ввиду js без зависимостей и библиотек.

[Yukan Mukimura]

Сергей delphinpro, Хорошо мне напонили про это, я забыл совсем. Попробую.

[Rise]

я с XMLHttpRequest не дружу

Это плохо, потому что только он позволяет отслеживать прогресс загрузки. Поэтому в том же axios никакого fetch-а и нет.

[Yukan Mukimura]

Rise,

позволяет отслеживать прогресс загрузк

Если так то придется:(

[Rise]

Yukan Mukimura, тогда вы можете просто расширить встроенный класс и сделать свои методы:

class MyClass extends XMLHttpRequest {
    constructor() {}
    myMethod1() {}
    myMethod2() {}
}

[Yukan Mukimura]

Rise, Добавлю в свой арсенал.

[Сергей delphinpro]

Rise,

Это плохо, потому что только он позволяет отслеживать прогресс загрузки.

Есть у Axios события OnUploadProgress и OnDownloadProgress
https://github.com/axios/axios/blob/main/examples/...

[Александр]

Сергей delphinpro, ещё ky подаёт надежды, но он поверх fetch :)

[Дмитрий Беляев]

Ванильный js это XMLHttpRequest. а fetch это высокоуровневая обертка.

Uno, и то и другое - это браузерные api, к JS они отношения не имеют

Это плохо, потому что только он позволяет отслеживать прогресс загрузки

Rise, современный fetch умеет работать со стримами, на них не только прогресс можно отслеживать.

[Сергей delphinpro]

Александр, блин, я подумал это наша разработка с отсылкой к кин-дза-дза, а оказалось, это что-то японское...

[Yukan Mukimura]

Александр, А создатели этой библиотеки не спрашивали себя ЗАЧЕМ?

[Александр]

Yukan Mukimura, весит меньше, большинство задач решает. Я бы использовал.

[Aetae]

Yukan Mukimura, затем что писать стопицот раз fetch(shit).then(r => r.json()) бесит. Axios же построен на xmlhttp и часть более современных фич там просто физически отсутствует.

Собственно идеальная либа будет вынуждена юзать и fetch и xmlhttp, потому что в первом тоже отсутствует часть "старых и ненужных" фич.:)

[Rise]

Сергей delphinpro,

Есть у Axios события

Потому что это обертка над XMLHttpRequest.

[Rise]

Дмитрий Беляев,

fetch умеет работать со стримами, на них не только прогресс можно отслеживать.

А можете рабочий пример привести на fetch прогресса загрузки файла на сервер?

[Сергей delphinpro]

Rise,

А можете рабочий пример привести на fetch прогресса загрузки файла на сервер?

я же привел ссылку на официальную документацию с примером. Вам этого мало?

[Сергей delphinpro]

Aetae,

Собственно идеальная либа будет вынуждена юзать и fetch и xmlhttp, потому что в первом тоже отсутствует часть "старых и ненужных" фич.:)

Если вы не хотите узнать как их использовать, то это не значит, что их нет.

[Aetae]

Сергей delphinpro, вот не надо тут этого. Большинство да, можно повторить, но если нужна какая-то хитрая кодировка например кроме utf8, придётся через зад вывернуться. Особенно если на отправку. А в xmlhttp всё из коробки работает. Также, из того что помню, через fetch невозможно отправить запрос без заголовка origin, а через xmlhttp можно. Там ещё всякое было, но на самом деле это всё действительно не нужно в 99% случаев, потому и позабыл уже всё, но если вдруг - придётся повозиться.

[Rise]

Сергей delphinpro,

я же привел ссылку на официальную документацию с примером. Вам этого мало?

Вы думаете axios и fetch это одно и тоже? Это не одно и тоже. Наверно трудно вам это осознать, раз пишите как-то совсем не в тему. Но если вы так сильно хотите ответить вместо Дмитрий Беляев (теоретика, который куда-то пропал, как дело дошло до практики), то можете "рабочий пример привести на fetch прогресса загрузки файла на сервер" (самая распространенная задача), я был бы реально вам благодарен.

Если вы не хотите узнать как их использовать, то это не значит, что их нет.

Aetae, человек думает что axios это fetch, поэтому нет разницы между fetch и xmlhttprequest) Вот что происходит с людьми которые изучали js только по библиотекам и фреймворкам, а на чистом api никогда не писали.

fetch и так уже абстракция. Незачем над ней еще одну городить.

Похоже там всё еще хуже, только сейчас заметил, он называет абстракцией нативное api))

[Дмитрий Беляев]

А можете рабочий пример привести на fetch прогресса загрузки файла на сервер?
Rise, проще всего с загрузкой одиночного файла как тела запроса:

const file = document.querySelector('input[type="file"]').files[0];
const totalBytes = file.size;
let bytesUploaded = 0;
await fetch("<upload file url>", {
    method: "PUT",
    headers: {
        "Content-Type": "<file content type>"
    },
    body: file.stream().pipeThrough(new TransformStream({
        transform(chunk, controller) {
            controller.enqueue(chunk);
            bytesUploaded += chunk.byteLength;
            // report progress
        },
        flush(controller) {
            // report finish
        },
    })),
    duplex: "half", // нужно так как у нас не ReadableStream а TransformStream в body
});

С FormData чуть по заморочнее, придется ручками энкодить multipart/form-data в ReadableStream и там же считать прогресс. Зато можно делать много других интересных вещей, которые в устаревшем XMLHttpRequest недоступны, например формировать тело запроса на лету.

[Rise]

Дмитрий Беляев, спасибо.

Мда.. и что мы видим... fetch body теперь может принимать новый класс - ReadableStream.
Но.. здесь написано что это появилось в Chromium 105, т.е. совсем недавно, в том году.
Но.. здесь написано что это "experimental".
Но.. здесь написано что в Firefox и Safari не поддерживается.
Но.. здесь написано что это существовало и в XMLHttpRequest, о чем до сих пор кстати сохранилась информация в русском переводе на MDN.

Какие мы можем сделать выводы... Насколько я помню fetch существует с 2015-го года, когда в js стандарт завезли промисы, т.е. 8 лет. И все эти 8 лет секта свидетелей "устаревшего XMLHttpRequest" нам продвигает "современный" fetch как альтернативу. Но на дворе 2023 год, и до сих пор fetch не догнал по полному функционалу XMLHttpRequest, например в плане прогресса загрузки. А только сейчас появляются какие-то экспериментальные некроссбраузерные костыли, где еще надо ручками энкодить multipart, ну это полный ппц. Поэтому многие браузерные библиотеки до сих пор сидят на XMLHttpRequest, а новички не понимают что происходит. Ребята, ну это фиаско я считаю...

Что еще можно сказать... А может всё на самом деле проще?
Может не одно старее/новее другого, может это просто разное?
Может XMLHttpRequest это коллбэки и события, а fetch это промисы и потоки?
А то можно дойти до абсурда, ведь есть WebTransport, тогда придется устаревшими fetch и WebSocket называть...