質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

2回答

11648閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2016/07/22 20:40

(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に変換されて同じ動きをするはずですが。。。

お願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

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) }) })()

投稿2016/07/22 23:53

raccy

総合スコア21733

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

a の 第1引数の関数の引数に 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 です.
なぜなら,チェーンされず単純に2回逐次的に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を単純に2回連続で動作させているのではなく,一つの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 })

投稿2016/07/22 23:37

編集2016/07/22 23:48
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/07/25 14:01

> 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を返すのでできるの思ったのですが・・・
退会済みユーザー

退会済みユーザー

2016/07/28 06:15

then の返却値が Promise であって,then の第1引数である関数の引数は 前の Promise の result が入っているだけです.この場合,first には 111 が帰っています. ```js new Promise((resolve) => { resolve(111); }).then(result => { console.log(result); //=> 111 }); ``` then の引数は 関数です.その関数の第1引数には,resolve関数の引数の値が入ります. then の返却値が Promise です.なので `then(() => {}).then(() => {}) ....` と書くことができます.
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問