Axios GET Запросить Param с пробелами - PullRequest
Новая
       34

Axios GET Запросить Param с пробелами

0 голосов
/ 08 октября 2019

Цель

Я хочу передать параметры запроса для запроса GET, используя axios. Значение параметра является переменной типа string и имеет пробел.

Проблема

Кажется, axios кодирует параметр в формате, который мой бэкэнд не понимает. Я провел исследование кодировки axios, и оказалось, что axios кодирует пробел в +, а не %20.

Пример

Допустим, у вас есть этот запрос: 

 const whitespace = "white space";
 const encodeWhitespace = encodeURI(whitespace);
 const noSpace = "no";

 axios.get('/api', {
   params: {
     'foo': 'bar',
     'bar': 'hello world',
     'space': whitespace,
     'encode': 'hello%20world', 
     'encoded': encodeWhitespace,
     'simple': noSpace
   }
}

Все параметры foo, bar, encode, simple работают и генерируют ответ с правильными данными. Параметры space, encoded не генерируют правильные данные. Запрос выполнен успешно с 200, но не возвращает данных.

Я создал такой же запрос в Postman с теми же запросами, чтобы посмотреть, возвращает ли GET ожидаемый результат, и он это делает. Я добавил %20 в Почтальон, и он возвращается просто отлично. Я добавил + в Почтальон, и это также возвращает ожидаемый результат.

Вопрос

Что может быть не так с реализацией переменной? Я не могу сделать это без такой переменной, как параметр bar, потому что значение передается функции (действие Redux). Любые идеи или мысли по этому поводу будут полезны. Пожалуйста, прокомментируйте, если нужна дополнительная информация.

1 Ответ

0 голосов
/ 08 октября 2019

Похоже, это проблема (или поведение сериализации параметров по умолчанию) библиотеки Axios.

Таким образом, чтобы преодолеть это, у вас есть 2 варианта.

  1. Определите параметры вашего запроса в самом URL 
const whitespace = "white space";
axios.get(`/api?space=${whitespace}`);
Напишите свой собственный paramsSerializer для построения строки запроса. 
const whitespace = "white space";
const encodeWhitespace = encodeURI(whitespace);
const noSpace = "no";

axios.get('/api', {
    params: {
        'foo': 'bar',
        'bar': 'hello world',
        'space': whitespace,
        'simple': noSpace
    },
    paramsSerializer: (params) => {
        // Sample implementation of query string building
        let result = '';
        Object.keys(params).forEach(key => {
            result += `${key}=${encodeURIComponent(params[key])}&`;
        });
        return result.substr(0, result.length - 1);
    }
});

Примечание: вышеуказанное значение paramsSerializer может быть определено также на глобальном уровне или на уровне экземпляра Axios. .

  • Глобальный уровень 
axios.defaults.paramsSerializer = (params) => { /* ... */ };
  • Уровень экземпляра 
let axInstance = axios.create({ paramsSerializer: (params) => { /* ... */ } })
...