このコードがなぜ動くのか

Question

function main(){
  a().then(fetch)
 // console.log(fetch)
  
}
function a(){
  return fetch("example.com",{method:"get"}).then(function(){return Promise.resolve("twitter.com")})
}
main()

これを実行してみるとなぜかmain関数の中のfetchが実行されます。
しかしfetchは関数オブジェクトなはずです。
関数オブジェクトは()がないと動かないと思っているのですがなぜなのでしょうか？

ドキュメントを見ても詳しいものは英文ばかりで・・・

またthenで

Answer 1

詳しくはPromiseの仕様をググらないとですが、とりあえずなぜ動くかを回答します。

fetch 実行してみると Promise オブジェクトが返って来ていたので、a 関数はfetch()の返り値であるPromiseオブジェクトのthenメソッドを実行してその返り値を返してるわけです。

Promise ではこんな感じでthenをつなげて書けます。

new Promise(function(a){a(1)})
    .then(function(b){console.log(b);return 2})
    .then(function(c){console.log(c)})
// 1
// 2

a()の返り値を通してますが、単純にthenをメソッドでつないでるのと一緒です。

質問のコードだとこういうことですね。

fetch("example.com",{method:"get"})
    .then(function(){return Promise.resolve("twitter.com")})
    .then(fetch)

then に渡された関数は内部で実行されます。
なので () はなくても実行されます。

引数に何が入るのかや返り値がどうなるのかは、試してみると結構簡単に理解できると思います。

Promiseに限らず関数を渡すといろいろな条件で実行してくれるのは JavaScript には多いです。

var f = function(x){console.log(x)}
;[1,2,3].forEach(f)

ところでfetch APIってもうつかえたんですね。

Comments

[退会済みユーザー]

.then(fetch)では上から"twitter.com"という文字列が降ってくると思うのですがこれは内部でどうやって取得しているのでしょうか？

[lazex]

自己解決されたようですが、他の人もみるかもしれないということで、一応回答しときます。

```
new Promise(function(a){a()})
.then(function(b){return 2})
.then(function(c){console.log(c)})
// 2
```
の例で分かる通り、return した 2 が次の then の引数に入ります。

また、Promise.resolveの返り値を返した時も同じく 2 が 2 つめの then の引数に入っています。
```
new Promise(function(a){a()})
.then(function(b){return Promise.resolve(2)})
.then(function(c){console.log(c)})
// 2
```

Promise.resolve の返り値は Promise オブジェクトなので疑問に思うかもしれませんが、
then の返り値が Promise オブジェクトの場合は、その Promise が成功していれば Promise の値が使われます。

なぜこうなってるかですが then に渡す関数が非同期に何か処理したいときのためです。

```
new Promise(function(a){a()})
.then(function(b){
console.log(+new Date())
return new Promise(function(resolve){
setTimeout(resolve, 5000)
})
})
.then(function(c){
console.log(+new Date())
})
// 1451393635423
// 1451393640433
```

このように 5秒してから次の then を実行するためにそうなってます。

`Promise.resolve(1)` と `new Promise(function(resolve){resolve(1)})` は一緒です。

Answer 2

なんだか結局自分でも何が言いたいのかわからなくなってきたので事故解決にします。
fetchがプロミスを返し、thenで取得するのはわかっていたし、thenは第一引数がurlで第二引数がオプションというのは仕様書を見ればかいてありました。

回答していただいた皆様ありがとうございます。

Comments

[think49]

「既知の事実」だけが回答だったとしても解決に至るまでのヒントを貰えたのなら回答された中からベストアンサーを選ぶのが筋ではないかと思います。
少なくとも私なら直接的な回答が得られなくてもヒントを貰っただけでベストアンサーに選びます。
厳しい事をいうようですが、「既知の事実」が初めから質問文に書かれてあれば、回答された方が無駄な回答(記事の事実を指摘する事)をしなくて済んだともいえます。
個人的な見解としては、この質問はメソッドチェーンの仕組みが頭の中で整理できていない事に起因しているような気もしますが…。

[KoichiSugiyama]

自己解決されたのは結構ですが、今後同様の疑問を持った利用者が過去のQ&Aを検索した際に、利用価値のある内容になるように、回答として価値がないベストアンサーが上位に表示されないよう評価を下げさせていただきました。

Answer 3

JSあまり詳しくないのですが、回答してみます。
より詳しい解説は、JSに詳しい回答者さまの回答をお待ちいただければ。

これは、コールバックを行うための仕組みのようですね。
コールバックとは、後でその関数を呼び出してもらうために、関数オブジェクトを渡しておく手法です。

おそらく、then関数に関数オブジェクトを渡すことで、then関数の中で任意のタイミングでその関数を呼び出せるようにしているんだと思います。

...

下記のページは、直接の解説があるわけではないですが、参考になるかも知れません。

JavaScript - Promiseと仲良くなって気持ち良く非同期処理を書こう - Qiita
http://qiita.com/progre/items/03626b7f4655007d8cb2