web-dev-qa-db-ja.com

クエリパラメータ（axiosリクエスト）で同じキーを持つ複数のフィールド？

したがって、バックエンド（私の制御下にない）には、次のようなクエリ文字列が必要です。

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

ただし、axiosはJSオブジェクトを使用して要求パラメーターを送信します。

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

そして明らかに、そのようなオブジェクトは同じキーを持つ複数のフィールドを持つことはできません。

同じキーを持つ複数のフィールドでリクエストを送信するにはどうすればよいですか？

javascriptparametersrequestaxios
20
Markus Meskanen

request config のaxiosドキュメントから

// `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
33
nhydock

Axiosリクエスト設定では、paramsのシリアル化をオーバーライドしてから、QS NPMモジュールを使用して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
16
Ashwin Kumar

Ready RLSearchParams を使用すると、同じ名前の複数のパラメーター値の処理がaxiosでも機能します... 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);
           })
     }
0
Yordan Georgiev