2020/01/15
JavaScriptのPromiseメソッドチェーンを使った非同期処理
ECサイトでは、Ajaxやイベントリスナなど、非同期処理を行う機会が多いと思いますが、非同期処理は
jQueryでは $.Deffered を使うことにより、連続する非同期処理をメソッドチェーンを使って簡潔に書くことができました。
これにより、非同期処理を連続させることで招かれることの多いコールバック地獄を回避し、見やすく柔軟性のあるコードを書くことができます。
コールバックを使った非同期処理
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | example1(function () { example2(function () { example3(function () { console.log('end example'); }); }); }); function example1 (callback) { setTimeout(function () { console.log('example 1'); callback(); }, 1000); } function exapme2 (callback) { setTimeout(function () { console.log('example 2'); callback(); }, 1000); } function exapme3 (callback) { setTimeout(function () { console.log('example 3'); callback(); }, 1000); } |
↓
$.Defferedを使った非同期処理
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | example1() .then(example2) .then(example3) .then(function () { console.log('end example'); }); function example1 () { var d = new $.Deferred; setTimeout(function () { console.log('example 1'); d.resolve(); }, 1000); return d.promise(); } function example2 () { var d = new $.Deferred; setTimeout(function () { console.log('example 2'); d.resolve(); }, 1000); return d.promise(); } function example3 () { var d = new $.Deferred; setTimeout(function () { console.log('example 3'); d.resolve(); }, 1000); return d.promise(); } |
ECMA Script 6以降の新しいJavaScriptでは、Promiseというオブジェクトを使うことで、標準でこれに似た仕組みを使うことができます。IE11を除くモダンブラウザで利用することができます。
JavaScriptのPromiseでは、ライブラリを使うことなくjQuery.Deffered() と同様の記述をすることが可能です。
JavaScriptのPromiseによる非同期処理
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | Promise.resolve() .then(example1) .then(example2) .then(example3) .then(() => { console.log('end example'); }); function example1 () { return new Promise ((resolve, reject) => { setTimeout(() => { console.log('example 1'); resolve(); }, 1000); }); } function example2 () { return new Promise ((resolve, reject) => { setTimeout(() => { console.log('example 2'); resolve(); }, 1000); }); } function example3 () { return new Promise ((resolve, reject) => { setTimeout(() => { console.log('example 3'); resolve(); }, 1000); }); } |
jQuery.Deffered ではインスタンスの.promise()メソッドや.resolve()メソッドを使っていたのに対して、JavaScriptのPromiseオブジェクトでは、Promiseのインスタンスを直接 return した上で、Promiseのコールバックの引数としてresolve()やreject()を実行します。
IE11で使えないので、まだ日本のPC向けでは使いづらいですが、海外向けの越境ECやスマホ向けでは使いやすい状況ですので、今後は積極的に利用する機会が増えそうです。
Author Profile
SHARE
