ECMAScript6とは
一応ちょっとだけ説明しておくと、 ECMAScript（エクマスクリプト）は、Ecma Internationalによって標準化されたスクリプト言語で、バージョン6が2015 年 6 月 17 日に標準仕様として発行されました。（以下、ES6と呼びます）
ES6ではconstやlet、デフォルトパラメータ、arrow function、Set/Map,Symbolなど 新しい仕様がたくさん追加されていますが、今回はPromiseを使ってみたいと思います。
ちなみに各ブラウザの実装状況は以下のサイトで確認できます。 https://kangax.github.io/compat-table/es6/
Promiseとは
Promiseは非同期処理を抽象化したオブジェクトとそれを操作する仕組みです。 細かくは以下のサイトを見てもらったほうが早いでしょう！
JavaScript Promises: There and back again - HTML5 Rocks
Promiseを使ってJSONPを実装してみた
具体的な活用方法が思いつかなかったので、とりあえず簡単なところで アドテクで割とよく使われるJSONPでデータを取得する処理をPromiseを使って実装してみました。
- リクエスト先 http://yebisupress.dac.co.jp/wp-content/uploads/2015/07/jsonp.js 内容 （単純にcallbackするだけのjsです）
[code language="javascript"] callback({ result : "Hello ES6!" }) [/code]
ES6(Promise)を利用しない場合
[code language="javascript"] var jsonp = function(url, success, failure) { window.callback = function(res){ success(res) }; var base = document.getElementsByTagName("script")[0]; var obj = document.createElement("script"); obj.async = true; obj.src = url; obj.onerror = function(){ failure("Request Error") }; base.parentNode.insertBefore(obj,base); }; jsonp( "http://yebisupress.dac.co.jp/wp-content/uploads/2015/07/jsonp.js", // リクエストが成功したときの処理 function(res){ console.log(res.result) }, // 失敗したときの処理 function(err){ console.log(err) } ); [/code]
ES6(Promise)を利用した場合
[code language="javascript"] var jsonp = function(url) { return new Promise(function (resolve, reject) { window.callback = function(res){ resolve(res) }; var base = document.getElementsByTagName("script")[0]; var obj = document.createElement("script"); obj.async = true; obj.src = url; obj.onerror = function(){ reject("Request Error") }; base.parentNode.insertBefore(obj,base); }); }
var p = jsonp("http://yebisupress.dac.co.jp/wp-content/uploads/2015/07/jsonp.js") .then(function(res){ console.log(res.result) }).catch(function(err){ console.log(err) }); [/code]
成功した場合には「resolve」、失敗した場合には「reject」を実行しています。 また、実行時には「.then」,「.catch」で成功/失敗時の処理を行っています。
スッキリしたような、全然そんなことないような。。。 サンプルコードが悪かったかな。
