Как передавать дополнительные параметры массивом в fetch?

498
29 декабря 2017, 02:25

Есть экшн(использую react+redux)например:

export const getUsers = ()  => (dispatch, getState) => {
    let url = 'request?path=/user_params&params%5Bgroups%5D%5B%5D=main&params%5Bgroups%5D%5B%5D=users_relations_user';
    return fetch(url, {
        credentials: 'same-origin',
        method: 'GET',
    }).then(response => response.json())
        .then(json => dispatch(receiveUsers(json))).catch(function (error) {
            console.log('Request failure: ', error);
        });
};

В данном случае в url я захардкодил параметры. Ранее в jquery эти параметры передавал с помощью массива:

$.ajax({
 data: array,
 url: ...})

А в массив уже прописывал параметры:

a = {
 groups: [
   'main',
   'users_relations_user'
 ]
}

Можно ли так сделать в whatwg-fetch(использую его). Если да, то как?

Answer 1

Метод fetch принимает вторым аргументом объект init, в котором есть свойство body. Через него можно передать данные (тело) запроса, в том числе в виде параметров URL - для этого используется интерфейс URLSearchParams. Он конечно не может как jquery делать строку параметров из массива. Вам придется вручную (либо в цикле) добавлять каждый параметр методом append или set. Либо сразу передать готовую строку параметров в конструктор URLSearchParams.

Замечание: свойство body можно использовать только для запросов с данными (POST, PUT, ...). Для GET запросов его нельзя использовать.

Answer 2

К счастью, всё уже написано до нас :-)

import { stringify  } from 'qs';
const queryParams = {
  user: 'test',
  userParams: {
    name: 'test',
    values: [1,2,3]
  }
}
const host = 'http://localhost/123';
const url = `${host}/${stringify(queryParams)}`;
http://localhost/123/user=test&userParams%5Bname%5D=test&userParams%5Bvalues%5D%5B0%5D=1&userParams%5Bvalues%5D%5B1%5D=2&userParams%5Bvalues%5D%5B2%5D=3
READ ALSO
Добавление элементов в разметку
javascript

Добавление элементов в разметку

Как с помощью JS динамически добавлять новые контроллы (input, div и тд) ? Пробую так :

 248
Как передать arguments вложенной функции?
javascript

Как передать arguments вложенной функции?

Нужно сделать функцию, которая принимает две функции (простые матоперации), объединяет их в одну и возвращает её

 360
PhpStorm не знает переменную currentScript — «Unresolved variable currentScript». Как сделать так, чтобы он знал ее и не выдавал Warning'ов?
javascript

PhpStorm не знает переменную currentScript — «Unresolved variable currentScript». Как сделать так, чтобы он знал ее и не выдавал Warning'ов?

PhpStorm не знает переменную currentScript — «Unresolved variable currentScript»Как сделать так, чтобы он знал ее и не выдавал Warning'ов? Вот скриншот:

 301
Как быстро расставить точки с запятой, имея 10000 строк кода…?
javascript

Как быстро расставить точки с запятой, имея 10000 строк кода…?

Коротко:

 325