JQuery Ajax to Fetch

Question

В моем проекте есть функции-оболочки ajax.Я буду вызывать эту функцию-обертку для выполнения запросов ajax в моем приложении.Теперь я планирую изменить это, чтобы использовать fetch.Но так как я новичок, у меня возникли некоторые вопросы.Я считаю, что этот вопрос нам пригодится людям, которые планируют перейти с Jquery Ajax на Fetch.Вот код и вопросы.

Моя старая функция оболочки Jquery Ajax:

function ajaxGetAsync(requestUrl, postData, global, datatype) {
    try {
        var form = $('#__AjaxAntiForgeryForm');
        var token = $('input[name="__RequestVerificationToken"]', form).val();
        return $.ajax({
            type: "GET",
            cache: false,
            contentType: "application/json; charset=utf-8",
            dataType: datatype,
            url: requestUrl,
            async: true,
            global: global,
            headers: {
                "XSRF-TOKEN": $('#_AjaxAntiForgeryTokenForm input[name="__RequestVerificationToken"]').val()
            },
            data: postData,
            error: function (jqXhr, textStatus, errorThrown) {
                console.log(jqXhr);

                handleShowInformationBox('Error', errorThrown, 'OK');
            }
        });
    } catch (q) {
        ajaxIndicatorStop();
    }

    return false;
};

function ajaxFormPostAsync(requestUrl, form, global = true) {
    try {
        return $.ajax({
            type: "POST",
            url: requestUrl,
            async: true,
            global: global,
            headers: {
                "XSRF-TOKEN": $('#_AjaxAntiForgeryTokenForm input[name="__RequestVerificationToken"]').val()
            },
            data: new URLSearchParams(new FormData(document.querySelector(form))).toString(),
            success: function () {
                handleHideValidationErrors(form);
            },
            error: function (jqXhr, textStatus, errorThrown) {
                console.log(jqXhr);

                handleShowInformationBox('Error', errorThrown, 'OK');
            }
        });
    } catch (q) {
        ajaxIndicatorStop();
    }

    return false;
};

Вот как я настроил Ajax Globals для отображения / скрытия загрузчиков:

$(document).ajaxStart(function () {
    ajaxIndicatorStart('Loading');
});

$(document).ajaxStop(function () {
    ajaxIndicatorStop();
});

Теперь я вызываю указанный выше метод для получения HTML / JSON с сервера следующим образом:

$.when(ajaxGetAsync(url, { id: Id }, true, window.htmlDataType)).done((response) => {
      document.querySelector('#someDiv').innerHTML = response;                                
});

$.when(ajaxPostAsync(url, { id: Id }, true, window.jsonDataType)).done((response) => {
      console.log(response);                               
});

Обратите внимание, что я изменю тип данных на window.jsonDataType, чтобы получить данные JSON.Точно так же я называю мой ajaxFormPostAsync Это прекрасно работает.

Вот эквивалент извлечения:

Моя новая функция оболочки Fetch:

async function fetchGetAsync(requestUrl, postData, global, dataType) {
    return await fetch(requestUrl,
        {
            method: 'GET',
            cache: 'no-cache',
            headers: {
                'Content-Type': 'application/json; charset=utf-8',
                "XSRF-TOKEN": $('#_AjaxAntiForgeryTokenForm input[name="__RequestVerificationToken"]').val()
            },
            body: postData
        }
    ).catch(function (error) {
        console.log(error);
        handleShowInformationBox('Error', error, 'OK');
    });
}

async function fetchFormPostAsync(requestUrl, form, global) {
    return await fetch(requestUrl,
        {
            method: 'POST',
            cache: 'no-cache',
            headers: {
                "XSRF-TOKEN": $('#_AjaxAntiForgeryTokenForm input[name="__RequestVerificationToken"]').val()
            },
            body: new FormData(document.querySelector(form))
        })
        .then(function (response) {
            return response.json();
        })
        .catch(function (error) {
            handleShowInformationBox('Error', error, 'OK');
        });
}

Как настроить отображение глобалов/ скрыть загрузчики?Как указать тип данных в fetch api?

Я пытался вызвать вышеуказанный метод следующим образом:

await fetchGetAsync(url, { id: Id }, true, window.htmlDataType).then((response) => {
     document.querySelector('#someDiv').innerHTML = response;                                
})

await fetchFormPostAsync(url, targetForm).then(function (response) {
     console.log(response);            
});

Это выдает ошибку, как показано ниже:

Для GET:

TypeError: Не удалось выполнить «извлечение» для «Window»: запрос с методом GET / HEAD не может иметь тела.

Для POST:

Неожиданный конец ввода JSON

Как получить Json / Html, используя fect api, как я это делал ранее?

Просто начал изучать fetach api с моим существующим кодом.Пожалуйста, помогите, где я иду не так.

Answer 1

После некоторого изучения и работы вот как я реализовал fetch API-оболочки в своем проекте вместе с показом / скрытием счетчиков и удалением ajax оболочек.

Выборка GET-оболочки:

async function fetchGetAsync(requestUrl, postData, global, dataType) {
    let query = Object.keys(postData)
        .map(k => encodeURIComponent(k) + '=' + encodeURIComponent(postData[k]))
        .join('&');
    requestUrl = `${requestUrl}?${query}`;

    if (global) ajaxIndicatorStart('Loading');

    return await fetch(requestUrl,
        {
            method: 'GET',
            cache: 'no-cache',
            headers: {
                "XSRF-TOKEN": document.querySelector('input[name="__RequestVerificationToken"]').value
            }
        })
        .then((response) => {
            return dataType === window.constant.jsonDataType ? response.json() : response.text();
        })
        .catch((error) => {
            handleShowDefaultInformationBox(error, 'OK');
        })
        .finally(() => {
            if (global) ajaxIndicatorStop();
        });
}

Выборка POST-оболочки:

async function fetchFormPostAsync(requestUrl, form, global = true) {
    if (global) ajaxIndicatorStart('Loading');

    return await fetch(requestUrl,
        {
            method: 'POST',
            cache: 'no-cache',
            headers: {
                "XSRF-TOKEN": document.querySelector('input[name="__RequestVerificationToken"]').value
            },
            body: new URLSearchParams(new FormData(document.querySelector(form)))
        })
        .then((response) => {
            return response.json();
        })
        .catch((error) => {
            handleShowDefaultInformationBox(error, 'OK');
        })
        .finally(() => {
            if (global) ajaxIndicatorStop();
        });
}

аналогично вы можете создать fetch API-оболочки для других HTTP-глаголов и действий.

Затем позвоните из своего javascript, как показано ниже:

Вызов оболочки Fetch GET:

await fetchGetAsync(url, { id: Id }, true, window.constant.htmlDataType).then((response) => {
      document.querySelector('#someDiv').innerHTML = response;                                
})

Вызов оболочки Fetch POST:

await fetchFormPostAsync(url, targetForm).then((response) => {
     console.log(response);            
});

Благодаря charlietfl и Icepickle за руководство и поддержку.