【JavaScript】Promiseのthenメソッドの挙動について ちょっとした確認

この記事はJavaScript経験浅く、Promise勉強したての人が書いています。
間違い等ございましたら、指摘やアドバイス等いただけると嬉しいです。

thenメソッドはPromiseオブジェクトを返す。

なのでチェーンすることが可能です。

例えばサーバーからfetchメソッドを使ってjson形式のデータを取得してみる

fetch('https://jsonplaceholder.typicode.com/users')
.then(function(response){
    return response.json();
})
.then(function(json){
    console.log(json);
});

①

まずこのコードをconsole.logで出力すると以下のようになる。

fetch('https://jsonplaceholder.typicode.com/users')

Promiseオブジェクトを返している。そのため後にthenメソッドを続けることができる。
またPromiseResultの値がResponseオブジェクトになっている。

②

次にこのコードの戻り値をconsole.logで出力すると以下のようになる。

.then(function(response){
    return response.json();
})

thenメソッドの引数にコールバック関数を使用しており、そのコールバック関数の引数であるresponseに①のPromiseResultの値が格納されている。

上記でも書いたようにthenメソッドはPromiseを返す。注目するべき点はコールバック関数内でreturnした値(response.json)がPromiseResultの値となっていること。
つまり①→②のようにPromiseResultの値を 後に続くthenメソッドのコールバック関数の引数の値として利用することができる。

補足

例えばthenのコールバック関数の戻り値にPromiseを指定したらどうなるのか試してみた。

console.log(
    fetch('https://jsonplaceholder.typicode.com/users')
    .then(function(response){
    //return response.json();
    return Promise.resolve(100);
})
);