web-dev-qa-db-fra.com

Plusieurs champs avec la même clé dans les paramètres de requête (demande axios)?

Donc, le serveur (pas sous mon contrôle) nécessite une chaîne de requête comme ceci:

http://example.com/?foo=5&foo=2&foo=11

Mais axios utilise un objet JS pour envoyer les paramètres de requête:

axios.get('http://example.com/', { foo: 5 });

Et évidemment, un tel objet ne peut pas avoir plusieurs champs avec la même clé.

Comment puis-je envoyer une demande avec plusieurs champs avec la même clé?

javascriptparametersrequestaxios
12
Markus Meskanen

À partir de la documentation axios sur 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
},

Pour utiliser cela dans une requête, vous feriez

var request = {
  params: {
    foo: [5, 2, 11]
  }
}
axios.get('http://example.com/', request);

Le seul problème lié à l’utilisation d’une approche à objet simple est que les paramètres de tableau sont ajoutés en tant que

http://example.com/?foo[]=5&foo[]=2&foo[]=11

Pour obtenir une requête sans le [] comme vous le souhaitez, vous pouvez utiliser le 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);

Cela se traduira par une demande en tant que

http://example.com/?foo=5&foo=2&foo=11
15
nhydock

Dans Axios Request Config, vous pouvez remplacer la sérialisation des paramètres, puis utiliser module QS NPM pour sérialiser un tableau avec le mode repeat.

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
11
Ashwin Kumar

Si on utilise la commande ready URLSearchParams , la gestion de plusieurs valeurs de paramètres portant le même nom fonctionne également avec axios ... Je suppose que le support de IE est arrivé en 2017 ... Fonctionne également sur Safari, bien que les liens prétendent qu'il ne pourrait pas ..

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);
           })
     }
0
Yordan Georgiev