Несколько полей с одним ключом в параметрах запроса (запрос axios)?
Таким образом, бэкэнд (не под моим контролем) требует строку запроса следующим образом:
http://example.com/?foo=5&foo=2&foo=11
Но axios
использует объект JS для отправки параметров запроса:
axios.get('http://example.com/', { foo: 5 });
И, очевидно, такой объект не может иметь несколько полей с одним и тем же ключом.
Как отправить запрос с несколькими полями с одним ключом?
Ответы
Ответ 1
From the axios documentation on the request config
// 'params' are the URL parameters to be sent with the request
// Must be a plain object or a URLSearchParams object
params: {
ID: 12345
},
Чтобы использовать это в запросе, вы должны сделать
var request = {
params: {
foo: [5, 2, 11]
}
}
axios.get('http://example.com/', request);
Единственная проблема с использованием подхода простого объекта состоит в том, что параметры массива добавляются как
http://example.com/?foo[]=5&foo[]=2&foo[]=11
Чтобы получить запрос без []
, как вы хотите, вы можете использовать URLSearchParams
var params = new URLSearchParams();
params.append("foo", 5);
params.append("foo", 2);
params.append("foo", 11);
var request = {
params: params
};
axios.get('http://example.com/', request);
Это приведет к запросу как
http://example.com/?foo=5&foo=2&foo=11
Ответ 2
В конфигурации запроса Axios вы можете переопределить сериализацию параметров, а затем использовать модуль QS NPM для сериализации массива с режимом повтора
let params = { foo: [5, 2] }
axios.get('path/to/api/',{params}) // URL : https://path/to/api?foo[]=5&foo[]=2
let myAxios = axios.create({
paramsSerializer: params => Qs.stringify(params, {arrayFormat: 'repeat'})
})
myAxios.get('path/to/api/',{params}) // URL : https://path/to/api?foo=5&foo=2
Ответ 3
Добавление более подробной информации к принятому ответу @nhydock.
Когда вы делаете
var request = {foo: [5, 2, 11] }
axios.get('http://example.com/', запрос);
Для приложения Django вы можете получить их как
self.request.query_params.getlist('foo')
также.
Ответ 4
Если вы используете готовые URLSearchParams, обработка нескольких значений параметров с тем же именем работает и с аксиомами... Я предполагаю, что поддержка IE появилась в 2017 году... Работает и с Safari, хотя ссылки утверждают, что это не так.,
function getUrlParams(){
// handles multiple param values with the same name
var url_params = new URLSearchParams();
if( window.location.toString().indexOf("?") != -1) {
window.location.search.split('?')[1].split('#')[0]
.replace(/([^=&]+)=([^&]*)/g, function(m, key, value) {
var attr = decodeURIComponent(key)
var val = decodeURIComponent(value)
url_params.append(attr,val);
});
} else {
// create a default set of params - you might not need this one ...
url_params = { some_param:"some_value" };
}
return url_params ;
}
function getBackEndData(url_params, back_end_url){
// the replace is just a fancy way of converting front-end to back-end call
return axios.get( back_end_url , { params: url_params } )
.then(response => {
return response.data ;
})
.catch(function(error) {
return error.response ;
console.log(error.response.data);
})
}
Ответ 5
Отказ от ответственности: я никогда не использовал Axios и не мог найти ссылки в документации. Это все еще стоит попробовать. Лично я бы реализовал его таким образом в библиотеке.
Также возможно передать массивы в качестве значений для параметра:
axios.get('http://example.com/', { foo: [1, 2, 3, 4, 5] });