Как правильно переписать код с ajax jquery на fetch js?

Question

[Andy Koshman]

Подскажите пожалуйста, как правильно переписать данный код с jquery на js? Принцип более менее понятен, но застрял с body. Вычитал что если метод GET то body нельзя использовать, а мне как раз таки нужен GET и в body передать объект. Не могу понять этот момент.

function handlers() {
   let urlTariffCalculationPassenger = route(
     "TariffCalculationPassenger"
   );

   let TariffCalculationPassObj = {
     FreightID: FreightID.dataset.id,
     CabinCategoryID: cart.id,
     Age16: parseInt(countOne),
     Age12: parseInt(countTwo),
     Age5: parseInt(countThree),
     Age1: parseInt(countFour),
     Accommodation: acсommodationPass,
   };

   $.ajaxSetup({
     headers: {
       "X-CSRF-TOKEN": $('meta[name="_token"]').attr(
         "content"
       ),
     },
   });
   $.ajax({
     url: urlTariffCalculationPassenger,
     method: "GET",
     data: TariffCalculationPassObj,
     success: function(result) {
       if (result.result === 0) {
         alert("Tariff not found");
         console.log(result.result)
       } else {
         console.log(result);
         let res = 0;
         let sidebarItem = $(".sidebar-item");
         let tariffVal = $("#tariff-val");
         let sumPrice =
           parseInt(localStorage.getItem("price")) ||
           0;
         tariffVal.html(sumPrice);

         sidebarItem.each((item) => {
           res += result.sum;
           localStorage.setItem("price", res);
           let sumPrice =
             parseInt(
               localStorage.getItem("price")
             ) || 0;
           console.log(sumPrice);
           tariffVal.html(sumPrice);
         });
       }
     },
     error: function(error) {
       alert("error: ", error);
     },
   });
 }

Answer 1

[Александр Талалаев]

Ваши параметры TariffCalculationPassObj упаковываете в URLSearchParams:

const params = new URLSearchParams({
     FreightID: 1,
     CabinCategoryID: 2,
     Age16: parseInt(3),
     Age12: parseInt(4),
     Age5: parseInt(5),
     Age1: parseInt(6),
     Accommodation: 7,
   });

К url их добавляем:

const  url = `${route( "TariffCalculationPassenger" )}${params}`

Задаём опции для fetch

const xCSRFTOKEN =  document.querySelector('meta[name="_token"]').getAttribute("content")
const options = {
  method: 'GET',
  headers: {
    "X-CSRF-TOKEN": xCSRFTOKEN
  }
};

Ну и делаем запрос:
const response = await fetch(url, options)
Ну а дальше уже сами, в then обрабатываете то что вам нужно и тп и тд
PS надеюсь без опечаток, но суть вы поняли

Comments

[Andy Koshman]

Спасибо, вы ответили на мой вопрос.

Answer 2

[Алексей Ярков]

а мне как раз таки нужен GET и в body передать объект.

Уже задавали такой вопрос