【JavaScript】Promiseについて

Question

超初歩的な質問をさせていただきます。
非同期処理の勉強をしておりまして、Promise関数のところで混乱しております。
自分なりの解釈をしてみたのですが、あっているかどうか教えていただけますと幸いです。
（勉強になるページ等教えていただければそちらを参考にして勉強します。）

混乱しているところ

promiseについての記事を読んでいて

var taskA = new Promise(function(resolve, reject) {
  setTimeout(function () {
    console.log('taskA');
    resolve(); //なんで実行されんねん
  }, 16);
});

4行目のresolveが実行される意味が分からない
→なんで'resolve'という関数が定義されとんねん
というところで混乱しております。

自分なりの解釈

例えば

(function(){
  const result = function(a,b,num) {
    if(num > 0 ){
      a();
    }else{
      b();
    }
  }

  const a = function(){
    console.log('aだよー');
  }

  const b = function(){
    console.log('bだよー');
  }

  result(a, b, 10);//結果は'aだよー'

}())

といった関数を考えてみると
1.'result'という関数を定義する
2.'a'と'b'という関数を定義する
3.'result'という関数を実行する
という順番になります。
これを少し書き換えると

(function(){
  const result = function(resolve, reject) {
    setTimeout(function () {
      resolve();
    }, 16);
  }

  const resolve = function(){
    console.log('aだよー');
  }

  const reject = function(){
    console.log('bだよー');
  }

  result(resolve, reject);//結果は'aだよー'

}())

という構文が出来上がりました。
ここで先ほどの'Promise'関数に当てはめてみると

Promise(function(resolve, reject) {
  setTimeout(function () {
    console.log('taskA');
    resolve();
  }, 16);
});

//と書かれた文は

function Promise(func){

  const result = func();
  /**
    const result = function(resolve, reject) {
      setTimeout(function () {
        console.log('taskA');
        resolve();
      }, 16);
    }
  **/

  const resolve = function(){
    //処理内容
  }

  const reject = function(){
    //処理内容
  } 

  result(resolve, reject);

}

と書き換えることができる
だから実行することができるのだ
と解釈しております。

いかがでしょうか。
皆様のご意見頂けますと嬉しいです。

Answer 1

result(a, b, 10);//結果は'aだよー'

resultとa,bの位置が逆です。
問題のコードでは、関数resultに実引数がありません。

---

Promiseを使わないコードを書けば、自ずと分かります。

function promiseCallback (resolve, reject) {
   setTimeout(function () {
     console.log('taskA');
     resolve(); //なんで実行されんねん
   }
}

function resolve () {
  console.log('success');
}

function reject {
  console.log('error');
}

// Promiseを使わない場合
promiseCallback(resolve, reject);

// Promiseを使う場合
new Promise(promiseCallback).then(resolve).catch(reject);

Promiseはコールバック関数を駆使して、完了(then)を検知しています。
正確に理解するには、PromiseのPolyfillコードを想定する必要がありますが、Promiseを使わないコールバック関数型コードを組んでみることである程度は理解が進むのではないかと思います。

Re: hirosnow さん

Comments

[hirosnow]

コールバック関数が肝となっているのですね。
理解していたつもりですが、教えていただいた内容を見ても分からない箇所があるので
参考となるサイトを見ながら、組んでみて理解度を深めたいと思います。
ありがとうございました。

[think49]

https://azu.github.io/promises-book/ のようなサイトを探していた、ということですが、『JavaScript Promiseの本』はPromiseの内部動作までは説明していませんので、質問者さんの求める答えは得られないと思います。
質問内容と解決内容が対応していないように思います。知りたかったのは「なぜ動くのか」ではなく、「どうやって使うのか」だったのでしょうか。

それから、『JavaScript Promiseの本』は掲示されていた https://qiita.com/toshihirock/items/e49b66f8685a8510bd76 からリングされていましたので、ご存じないとは思っていませんでした。

[hirosnow]

コメント遅くなってしまい申し訳ございません。

>質問内容と解決内容が対応していないように思います。知りたかったのは「なぜ動くのか」ではなく、「どうやって使うのか」だったのでしょうか。
「なぜ動くのか」というのが、知りたかったです。
ただ、その前にpromiseの使い方やコールバック関数について総合的に記述されているサイトも同時に知りたかったです。
（Promiseやコールバック関数についての理解が浅いためか、誤解を招くような書き方をしてしまい申し訳ありません。）

>それから、『JavaScript Promiseの本』は掲示されていた https://qiita.com/toshihirock/items/e49b66f8685a8510bd76 からリングされていましたので、ご存じないとは思っていませんでした。
見落としておりました。
これからはきちんと確認をしてから、こちらへ質問をするよう気を付けます。

ご丁寧にコメントをいただきましてありがとうございました。

Answer 2

JavaScript Promiseの本という
有名なサイト(無料の電子書籍)がありますので
こちらを読めばご理解いただけるかと思います。
http://azu.github.io/promises-book/

Comments

[hirosnow]

このようなサイトを探しておりました！
教えていただきありがとうございます。

Answer 3

単純にPromiseのコールバックの第1引数に与えた変数名を実行することで
非同期処理の同期作業ルーチンに進むというだけでは？

仮に

var taskA = new Promise(function(resolve, reject) {
  setTimeout(function () {
    console.log("doing A");
    resolve("done A");
  }, 30);
});
var taskB = new Promise(function(resolve, reject) {
  setTimeout(function () {
    console.log("doing B");
    resolve("done B");
  }, 10);
});
var taskC = new Promise(function(resolve, reject) {
  setTimeout(function () {
    console.log("doing C");
    resolve("done C");
  }, 20);
});
(async function(){
console.log('start');
await Promise.all([taskA,taskB,taskC]).then(function(ret){
  console.log(ret);
});
console.log('end');
})()

を実行すると、結果

start
doing B
doing C
doing A
Array(3) [ "done A", "done B", "done C" ]
end

となりますが、上記仮にresolve("done C")をコメントアウトすると
後ろに流れないので

start
doing B
doing C
doing A

までで処理が止まってしまいます

Comments

[yambejp]

イメージ的にはaddEventListenerのコールバックの第1引数が
イベントを渡すような感じですかね・・・むしろわかりにくいか

[hirosnow]

ソースまで書いていただき、ありがとうございます。
私の質問の意図としては'resolve'はどこも渡していないのに、どうして実行されるのだろう
といった点です。（日本語がおかしいかもしれませんが・・・）

イメージ的には何となく理解できました。
しっかり理解できるように他の方のサイトも参考にして勉強を進めたいと思います。
ありがとうございました。

[yambejp]

> 'resolve'はどこも渡していないのに、どうして実行されるのだろう

むしろ逆ですね、resolveは任意に実行しないとpromiseが完了しない
resolveという名前はPromiseの第1引数で渡す
という話です。
正確にはリゾルバとリジェクタなのでresolver,rejectorと書いた方が
より認識しやすいでしょう（逆にhoge,fugaでもなんでもいい）

[hirosnow]

ありがとうございます！
すごい腹落ちしました！

>むしろ逆ですね、resolveは任意に実行しないとpromiseが完了しない
実行しないとpromiseが完了しないという考え方がありませんでした。
本当にありがとうございます。

Answer 4

Promiseの実装です
https://github.com/then/promise/blob/master/src/core.js

Comments

[hirosnow]

サイトを教えていただき、ありがとうございます。
実装を確認して、挙動を理解できるように勉強したいと思います。