Какие пакеты посоветуете для работы с FormData?

Question

[d-virt]

Здравствуйте.

Для отправки запросов на сервер я использую пакет isomorphic-fetch.
Запрос могут быть: GET и POST.

С POST запросом все гораздо проще:

// для body можем использовать, как FormData так и объект ({})
    let data = new FormData();
    data.append('test', '1');

    fetch(path, {
        method  : 'POST',
        headers : {'X-Requested-With' : 'XMLHttpRequest'},
        body : data
    }).then(response => JSON.parse(response));

А вот с GET запросом чуть-чуть сложнее, т.к. параметры GET запроса мы должны положить в path (ссылку).

У меня имеются формы, которые требуются отправлять GET запросом (пример: фильтры для списков). Мне гораздо удобнее работать с параметрами формы через FormData:

let body = new FormData(document.getElementById("myForm"))

Вопрос: хочу из FormData конвертировать в GET параметры.
Посоветуйте, пожалуйста, какими пакетами это можно сделать (к сожалению, я пока ни чего достроенного не нашел) или есть варианты решить данный вопрос без конвертации ?

Спасибо!

Answer 1

[napa3um]

Для конструирования урлов лучше пользоваться объектами URL и URLSearchParams:

const url = new URL(path);
const searchParams = new URLSearchParams();

searchParams.append('test', '1');

url.search = searchParams.toString();

fetch(url, {
    method  : 'GET',
    headers : {'X-Requested-With' : 'XMLHttpRequest'}
})
.then(res => res.json())
.then(json => console.log(json));

Если хочется использовать именно FormData, то можно воспользоваться такой функцией для преобразования в URLSearchParams:

function formData2searchParams(formData) {
    const data = formData.getAll();
    const searchParams = new URLSearchParams();
    Object.keys(data).forEach(key => searchParams.append(key, data[key]));
    return searchParams;
}

Comments

[d-virt]

К сожалению, URLSearchParams и метод getAll() мало где поддерживается. Есть ли более менее достойные пакеты, которые эмулируют работу URLSearchParams и FormData ?

[napa3um]

d-virt: https://github.com/WebReflection/url-search-params , https://github.com/Jxck/URLSearchParams

[napa3um]

d-virt: https://github.com/form-data/form-data

[d-virt]

Спасибо.