Каким образом отправлять запросы с 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

[Сергей 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, Хорошо мне напонили про это, я забыл совсем. Попробую.

[Yukan Mukimura]

Rise,

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

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

[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, потому что в первом тоже отсутствует часть "старых и ненужных" фич.:)

[Сергей delphinpro]

Rise,

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

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

[Сергей delphinpro]

Aetae,

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

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

[Aetae]

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

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

А можете рабочий пример привести на 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 недоступны, например формировать тело запроса на лету.