Google Apps Scriptで作った複数のAPIからのJSONP取得が面倒(コールバック関数をその分だけ用意する必要があるなど)かつjQuery拡張のjQuery-JSONPを使いたくなかったので、コールバック関数無しにJSONPからJSONを取得する関数をピュアなJavaScriptで作ってみました。この関数を使えば、もう、JSONP取得のためにわざわざコールバック関数を用意する必要はありません。
#大元のコード
JavaScript
//引数
//url: jsonpのurl
//cbName: jsonpを起動することになっているはずのコールバック関数の名前
function JSONP(url, cbName="callback") {
return new Promise(function(_r, _e) {
window[cbName] = function(j) {
delete window[cbName];
_r(j);
}
var s = document.createElement("script");
s.src = url;
document.head.appendChild(s);
s.onerror = function(e) {
delete window[cbName];
_e(e);
s.remove();
}
});
}
####minified版
JavaScript
function JSONP(url,cbName="callback"){return new Promise(function(i,r){window[cbName]=function(n){delete window[cbName];i(n)};var u=document.createElement("script");u.src=url;document.head.appendChild(u);u.onerror=function(n){delete window[cbName];r(n);u.remove()}})}
#使い方
JSONP関数はPromiseオブジェクトを返すので、返り値はthenで受けます。
分からない方のために念の為補足すると、thenの中に書かれた処理は、JSONPからJSONを取得した「直後」に起動します。
####JSONPのURL
JavaScript
var url = "https://script.google.com/macros/s/XXXXX/exec?callback=cbFunc";
//この例では、"cbFunc"がリクエストしたコールバック関数名
//サーバー側でコールバック関数名が指定されている(ヒエッ…)場合は、その名前を把握しておく
####使い方
JavaScript
/*使用例その1*/
JSONP(url, "cbFunc")
.then(function(r) {//jsonp読み込み成功時の処理
console.log(r);//返り値(r)はJSONオブジェクト
})
JavaScript
/*使用例その2*/
JSONP(url, "cbFunc")
.then(function(r) {
console.log(r);
})
.catch(function(e) {//jsonp読み込み失敗時の処理
console.log(e);//返り値(e)はonerrorのイベントオブジェクト
})
JavaScript
/*使用例その3-α*/
//コールバック関数名は被らないように
JSONP(url, "cbFunc")
.then(function(r) {
console.log(r);
JSONP(url, "cbFunc")
.then(function(r) {
console.log(r);
})
})
/*使用例その3-β*/
//IEを気にする必要が無いなら、アロー関数を使うのもアリ
JSONP(url, "cbFunc").then(r=>console.log(r),JSONP(url, "cbFunc_2").then(r=>console.log(r)));