###Javascriptにおけるpromise型って結局何がしたいのですか?
こちらを参考にしてみたが全く意味が分かりませんでした。
処理実行を並列して行って?処理時間短縮させたいんだなぁ。って感じのことは分かったんですが。
このサイトでの文章を見るとこんなことが記載されています。
Promiseは、欲しい値を待つ代わりに、その値の代替となるものを即座に得る方法を提案します。
私にはこの言葉の意味が全く持って不明です。
引数がないのに処理実行して、仮の戻り値を算出してるってことなのですか?
例えば掛け算で言うところの
2 × 2 = 4
をプロミス化すると
X × X = Y
ってことですか?
質問が不明瞭ですいません。
結局のところ知りたいことはプロミスのメリット・デメリットです。
お願いします。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答3件
0
ベストアンサー
例えば木の板と釘で犬小屋を作ろうとしたとき、以下の登場人物が居たとします。
- 板を買ってくるAくん
- 釘を買ってくるBくん
- 板を切るCくん
- 切った板を釘で組み立てるDくん
あなたは彼らに指示を与える立場です。この時あなたならどうしますか?
まず板と釘がないと始まりませんね。AくんとBくんにはすぐさま買い物に行ってもらいましょう。
ここで、あなたは2つ選択肢があります。
- Aくんの買い物が終わったらBくんに買い物に行ってもらう
- AくんもBくんも同時に出発してもらう
どう考えても後者のほうが効率的ですよね?わざわざBくんはAくんの帰りを待つ必要はありません。これが並列稼働です。AくんとBくんは同時に動いても全くお互いに支障がありません。だったら同時に動いてくれたほうが早いですよね?
CくんはAくんが板を買ってきてくれないと板を切ることができません。そこで、CくんはAくんの帰りを待つことになります。そしてDくんは、Bくんが帰ってきた上でCくんの作業も待たなければいけません。このように、ある作業が終わり次第次の作業を行う流れを簡単に制御するための構造がPromise型の役割です。
実際にプログラミングで表現してみました。
https://jsfiddle.net/h2zwfr2v/
JavaScript
1var doA = function(resolve, reject) { 2 //Aくんの作業(1秒で終わる) 3 console.log(new Date().toLocaleString() + " 板の買い物開始"); 4 setTimeout(function() { 5 console.log(new Date().toLocaleString() + " 板の買い物完了"); 6 resolve(); 7 }, 1000); 8}; 9var doB = function(resolve, reject) { 10 //Bくんの作業(5秒で終わる) 11 console.log(new Date().toLocaleString() + " 釘の買い物開始"); 12 setTimeout(function() { 13 console.log(new Date().toLocaleString() + " 釘の買い物完了"); 14 resolve(); 15 }, 5000); 16}; 17var doC = function(resolve, reject) { 18 //Cくんの作業(3秒で終わる) 19 console.log(new Date().toLocaleString() + " 板の切断開始"); 20 setTimeout(function() { 21 console.log(new Date().toLocaleString() + " 板の切断完了"); 22 resolve(); 23 }, 3000); 24}; 25var doD = function(resolve, reject) { 26 //Dくんの作業(3秒で終わる) 27 console.log(new Date().toLocaleString() + " 組み立て開始"); 28 setTimeout(function() { 29 console.log(new Date().toLocaleString() + " 組み立て完了"); 30 resolve(); 31 }, 3000); 32}; 33 34// Aくん、Bくんはすぐ買い物に行く 35var promiseA = new Promise(doA); 36var promiseB = new Promise(doB); 37// Aくんの買い物後、Cくんが作業する 38promiseA.then(function(){ 39 var promiseC = new Promise(doC); 40 // BくんとCくんの作業が終わり次第Dくんが作業する 41 Promise.all([promiseB, promiseC]).then(function() { 42 var promiseD = new Promise(doD); 43 }); 44});
投稿2017/04/19 01:33
総合スコア9206
0
Javascriptにおけるpromise型って結局何がしたいのですか?
ある処理が終了したときに何かを実行するという手順を、共通的な仕組みで綺麗に書きたい
というのが、promiseでやりたいことです。
メリットはコードを綺麗にかけること。デメリットはPromiseを知らないと理解しづらいコードになることです。
典型的な利用例は、ajax通信でサーバにリクエストを行い、それが終了したときに画面を更新するというものです。
ajax通信の場合は終了時の処理が1つしかないことが多いので、わかりやすい例として以下のような処理を行うサンプルを、Promise利用あり/なしで書いてみました。
3秒待つ
上が終了したとき、ログを出力
上が終了したとき、3秒待つ
上が終了したとき、ログを出力
上が終了したとき、3秒待つ
上が終了したとき、ログを出力
javascript
1// Promiseを使わない場合 2console.log("start"); 3setTimeout(() => { 4 console.log("3second"); 5 setTimeout(() => { 6 console.log("6second"); 7 setTimeout(() => { 8 console.log("9second"); 9 }, 3000); 10 }, 3000); 11}, 3000); 12 13// Promiseを使って書いた場合 14function wait3seconds() { 15 return new Promise((resolve) => setTimeout(() => resolve(), 3000)); 16} 17 18console.log("start"); 19Promise.resolve() 20.then(() => wait3seconds() ) 21.then(() => console.log("3seconds") ) 22.then(() => wait3seconds() ) 23.then(() => console.log("6seconds") ) 24.then(() => wait3seconds() ) 25.then(() => console.log("9seconds") );
投稿2017/04/19 01:17
総合スコア4524
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/04/19 03:04
2017/04/19 04:08
2017/04/19 06:08
0
単純に言えば(主に並行稼動する)非同期処理を待つ処理
sample
sampleつけときます
(IE対応のためpromisejsを読み込んでください、IE無視してよいなら不要です)
javascript
1<script src="https://www.promisejs.org/polyfills/promise-6.1.0.min.js"></script> 2<script> 3var a=0; 4var prm=[]; 5function test(){ 6 prm[0]= new Promise(function(resolver){ 7 setTimeout(function(){a+=1;console.log(a);resolver(this);},1000); 8 }); 9 prm[1]= new Promise(function(resolver){ 10 setTimeout(function(){a+=10;console.log(a);resolver(this);},2000); 11 }); 12 prm[2]= new Promise(function(resolver){ 13 setTimeout(function(){a+=100;console.log(a);resolver(this);},3000); 14 }); 15 Promise.all( prm ).then(function(){ 16 console.log("end"); 17 }); 18}; 19test(); 20</script> 21
投稿2017/04/19 00:55
編集2017/04/19 01:20総合スコア114585
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/04/19 02:26
2017/04/19 02:35
2017/04/19 02:37
2017/04/19 02:39
2017/04/19 02:45
2017/04/19 02:51
2017/04/19 02:55
2017/04/19 03:06