

jqueryのajax通信にてjsonデータを複数同時に取得する関数を作成したいと考えております

URLとパラメータの連想配列を配列`request`に格納し、  
格納されている分だけ`getDataMultipul`メソッドにて実行  
全て取得した後に、処理を続行させる形の作りを検討しているのですが、

`when`で並列実行する方法と  
その結果を一度に取得し、配列に格納する方法が思いつかずやなんでおります。

何かいい方法ご存知でしたらご教授いただけませんでしょうか?

宜しくお願いいたします。

[code]

    var request = [
      {"url":"URLその1","params":{パラメータ1}},
      {"url":"URLその2","params":{パラメータ2}},
      {"url":"URLその3","params":{パラメータ3}},
      ・・・
    ]
    
    getDataMultipul(request).done(
      function(data){
        //成功時の処理
      }
    ).faile(function(){
      //失敗時の処理 
    });
    
    
    function getJson(request,params){
      var defer = $.Deferred();
    
      $.ajax({
        url         : request,
        type        : 'POST',
        data        : JSON.stringify(params),
        contentType : 'application/json',
        dataType    : 'json',
        success     : defer.resolve,
        error       : defer.reject,
        timeout     : TIMEOUT
       });
    
       return defer.promise();
    }
    
    
    function getDataMultipul(arr){
      var defer = $.Deferred();
      $.when(
        //配列に入っているURLとパラメータでデータを取得
        getJson(arr[0]["url"],arr[0]["params"]),
        getJson(arr[1]["url"],arr[1]["params"]),
        getJson(arr[2]["url"],arr[2]["params"]),
        …
      ).done(function(ret1,re2,re3・・・){
        //配列分全ての処理が完了したらresolve
        var returns = [
          ret1,
          ret2,
          ret3,
          …
        ]
        defer.resolve(returns);
      }).fail(function(){
        defer.reject() ;
      })
      return defer.promise();
    }
    
[/code]

追記  
Jqueryは2系、ECMA5.1にて開発を行っております。


CC BY-SA 3.0
2018-01-29T03:13:42.333
41274
2018-04-12T07:09:04.500
2018-01-29T04:54:08.977
27191
27191
question
javascript jquery
jquery の ajax 通信で json データを複数同時に取得したい


> その結果を一度に取得し、 **配列に格納する方法が思いつかず** やなんでおります。

これについてはes6の[rest
parameters](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions_and_function_scope/rest_parameters)、あるいはES5以下縛りがあれば[arguments](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions_and_function_scope/arguments)が利用できます。

そもそもjQueryのajaxはよっぽど古いバージョンでない限りPromiseを継承したものを（2系まではDeferredを）返すはずなので提示されているコードはなかなかの遠回りをしている気がします。

ネイティブなPromise,またはそのポリフィルとjQuery3.xを使った場合次のようなのでもいけるかと。

[code]

    const request = [
      {"url":"https://jsonplaceholder.typicode.com/posts/","params":{name: 'hoge'}},
      {"url":"https://jsonplaceholder.typicode.com/posts/","params":{name: 'fuga'}},
      {"url":"https://jsonplaceholder.typicode.com/posts/","params":{name: 'piyo'}},
    ]
    
    Promise.all(request.map(req=> {
      return $.ajax(req.url, {
        type: 'post',
        data: req.params
      })
    })).then(res=> {
      console.log(res)
    }).catch(function(err) {
      console.error(err)
    })
[/code]

[code]

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
[/code]

(上記スニペットではES6を使用しています)

* * *

ES5+jQuery 2.xで試してみました

[code]

    var request = [
      {"url":"https://jsonplaceholder.typicode.com/posts/","params":{name: 'hoge'}},
      {"url":"https://jsonplaceholder.typicode.com/posts/","params":{name: 'fuga'}},
      {"url":"https://jsonplaceholder.typicode.com/posts/","params":{name: 'piyo'}},
    ]
    
    // if use promise
    Promise.all(request.map(function(req) {
      return $.ajax(req.url, {
        type: 'post',
        data: req.params
      })
    })).then(function(res) {
      console.log(res)
    }).catch(function(err) {
      console.error(err)
    })
    
    // or $.when
    $.when.apply($,request.map(function(req) {
      return $.ajax(req.url, {
        type: 'post',
        data: req.params
      })
    })).done(function() {
      for(var i=0;i<arguments.length;i++) {
        console.log(arguments[i][0])
      }
    }).fail(function(err) {
      console.error(err)
    })
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
[/code]

うーんjQuery.whenちょっと気持ち悪い……


CC BY-SA 3.0
2018-01-29T04:32:46.973
41276
2018-01-29T05:24:22.330
2018-01-29T05:24:22.330
2376
2376
41274
answer