javasciptのpromiseのresolveとreturnの挙動について

Question

(function(){
  var a=Promise.resolve();
  var b=a.then(function(){
    console.log("first")
    resolve(44)
  }).then(function(d){
    console.log(d)
    console.log("sec")
  })
})()

とするとfirstしか呼ばれません。これはなぜでしょうか？
var aの代入により新しくプロミスが作られてresolveでfulfilled状態になり次のthenにわたってconsole.logが出てresolve(44)により次のpromiseに行くはずですが。。。

そしてこのresolve(44)をreturn 44に変えると正常に動きます。これはなぜでしょうか？
azuさんのproimse本によるとreturnされた値もresolve()のように、この例のようなintの44もpromiseに変換されて同じ動きをするはずですが。。。

お願いします。

Answer 1

resolve()という単独の関数はありません。あるのはPromise.resolve()です。ですので、resolev(44)の所で例外が発生し、それより先には進まなくなっています。しかし、promise内で起こった例外はpromiseで補足しないと外には影響しないため、普通の例外のようにコンソールにメッセージが表示される事もありません。

次のように書き換えて、例外が発生していることを確認してみてください。

(function(){
  var a=Promise.resolve();
  var b=a.then(function(){
    console.log("first")
    resolve(44)
  }).then(function(d){
    console.log(d)
    console.log("sec")
  }).catch(function(e){
    console.log("error")
    console.log(e)
  })
})()

Answer 2

a の 第１引数の関数の引数に resolve がないので不可能です．
そもそも未定義なものを参照しています．

おそらく下記のように書き換えることで期待した動作になると思います．

(function(){
  var a = Promise.resolve()
  var b = a.then(function() {
    console.log("first")
    Promise.resolve(44)
  }).then(function(d){
    console.log(d)
    console.log("sec")
  })
})()

//=> first
//=> undefined
//=> sec

return にすると，Promise の機能の一つであるチェーンが発動します．

このページのチェーン参照
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/then

上の例では，二回目のthenの引数である b は undefined です．
なぜなら，チェーンされず単純に２回逐次的にPromiseを動作させているためです．

then メソッドはPromiseを返すので、return を使うことで，thenの呼び出しを簡単に繋ぐことができます．

(function(){
  var a = Promise.resolve()
  var b = a.then(function() {
    console.log("first")
    return 44;
  }).then(function(d){
    console.log(d)
    console.log("sec")
  })
})()

//=> first
//=> 44
//=> sec

これは，Promise.resolve() で作った Promiseを単純に２回連続で動作させているのではなく，一つのPromiseをチェーンさせています（Promise.resolve().then() が 返却した Promise の .prototype.then() を 読んでいる）．

モダンなブラウザにある fetch API などがこのチェーンを有効活用していてわかり易い例の一つだと思います．

fetch('/users.html')
  .then(function(response) {
    return response.text()
  }).then(function(body) {
    document.body.innerHTML = body
  })

Comments

[退会済みユーザー]

> then メソッドはPromiseを返すので

new Promise(function(a){
a(111)
}).then(first=>{
console.log(first)
first(222)
}).then(second=>{
console.log(afa)
})

ということをやってみたのですができないです。。。firstがfunctionじゃないって怒られます。。。promise.resolveは新しくpromiseを返すのでできるの思ったのですが・・・

[退会済みユーザー]

then の返却値が Promise であって，then の第１引数である関数の引数は 前の Promise の result が入っているだけです．この場合，first には 111 が帰っています．

```js
new Promise((resolve) => {
resolve(111);
}).then(result => {
console.log(result); //=> 111
});
```

then の引数は 関数です．その関数の第１引数には，resolve関数の引数の値が入ります．

then の返却値が Promise です．なので `then(() => {}).then(() => {}) ....` と書くことができます．