Promise.allでjsonpデータを取得しようとすると、callbackが未定義扱いされてしまう

Question

Promise.allを利用してjsonpデータを並行で取得しようとしたのですが、最後に記述したPromise以外は"Uncaught ReferenceError: callback is not defined"とcallbackが未定義扱いのエラーが発生してしまいます。

$(function() {
  Promise.all([promise(), promise()]).then(function(values) {
    console.log(values);
  });
});

function promise() {
  var def = $.Deferred();

  $.ajax({
    type: 'GET',
    url: './js/data.jsonp',
    dataType: 'jsonp',
    jsonpCallback: 'callback'
  }).fail(function(jqXHR, textStatus, errorThrown) {
    def.resolve("fail");
  }).done(function(data) {
    def.resolve("done");
  });

  return def.promise();
}

jsonpのデータは次のものを読み込んでいます。

callback(
{
	"hoge": "foo"
}
);

JQueryのバージョン3.1.1です。

jsonデータであれば、問題なく読み込めるのですが、jsonpだとエラーが発生してしまいます。
不足している処理内容がありましたら、ご教授のほどよろしくお願いいたします。

Answer 1

JSONPの呼ぶ関数名がcallbackで固定なのが原因です。

JSONPが1回であれば、$.ajaxのパラメータとしてjsonpCallback: 'callback'を指定することで対応できます（リファレンス）。

しかし、同じものを2つ呼び出すとうまく動きません。同じ関数を2回定義するわけにも行かない（JSONP=「グローバルに定義された関数を呼ぶ」ことでデータを受け渡しする）ので仕方ないのですが、JSONP以外の方法を使う、あるいはコールバックの関数名を変えられるようにするなどの対応が必要となります。

Comments

[ap2]

分かりやすい回答ありがとうございます。コールバックの関数名を動的にすることで対応しようと思います。

Answer 2

callbackという関数を定義しないといけないと思いますが。
ですので、複数を並行して実行すると支障が出ると予想されます。