LaunchCartな日々

LaunchCartとともに歩む日々を綴った
ブログです

JavaScriptのPromiseメソッドチェーンを使った非同期処理

テクニック

JavaScriptのPromiseメソッドチェーンを使った非同期処理

ECサイトでは、Ajaxやイベントリスナなど、非同期処理を行う機会が多いと思いますが、非同期処理は

jQueryでは $.Deffered を使うことにより、連続する非同期処理をメソッドチェーンを使って簡潔に書くことができました。
これにより、非同期処理を連続させることで招かれることの多いコールバック地獄を回避し、見やすく柔軟性のあるコードを書くことができます。

コールバックを使った非同期処理

$.Defferedを使った非同期処理

 

ECMA Script 6以降の新しいJavaScriptでは、Promiseというオブジェクトを使うことで、標準でこれに似た仕組みを使うことができます。IE11を除くモダンブラウザで利用することができます。

JavaScriptのPromiseでは、ライブラリを使うことなくjQuery.Deffered() と同様の記述をすることが可能です。

JavaScriptのPromiseによる非同期処理

jQuery.Deffered ではインスタンスの.promise()メソッドや.resolve()メソッドを使っていたのに対して、JavaScriptのPromiseオブジェクトでは、Promiseのインスタンスを直接 return した上で、Promiseのコールバックの引数としてresolve()やreject()を実行します。

 

IE11で使えないので、まだ日本のPC向けでは使いづらいですが、海外向けの越境ECやスマホ向けでは使いやすい状況ですので、今後は積極的に利用する機会が増えそうです。

この記事を書いた人
Ninomiyaのアイコン

Ninomiya

Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。

資料ダウンロード

送信いただいたメールアドレス宛に、資料のダウンロードURLを送付いたします。