JSのfetechでres.json()の戻り値を配列に入れると結果が変わる

Question

下記の3つの自作関数それぞれの出力結果について、
test1ではpromiseの結果が出力されるのですが、
test2とtest3ではPromiseオブジェクトが出てしまうのが謎です。

返却値の出どころはすべて
const json = res.json();
なのですが。

なぜなのかご教示いただけますと幸いです。

'use strict';

const url = 'https://www.jma.go.jp/bosai/forecast/data/overview_week/130000.json';

const test1 = () => {
  fetch(url)
    .then((res) => {
      const json = res.json();
      return json;
    })
    .then((json) => {
      console.log(json); // {publishingOffice: "気象庁", ...
    });
};

const test2 = () => {
  fetch(url)
    .then((res) => {
      const json = res.json();
      return { json };
    })
    .then(({ json }) => {
      console.log(json); // Promise {<pending>}
    });
};

const test3 = () => {
  fetch(url)
    .then((res) => {
      const json = res.json();
      return [json];
    })
    .then((arr) => {
      const json = arr[0];
      console.log(json); // Promise {<pending>}
    });
};

test1();
test2();
test3();

Answer 1

json()自体がpromiseを返すのでthenで受ければ値をとれますが
[json()]はpromiseが入った配列を返すので、thenで受けても値は取り出せません

const url = 'https://www.jma.go.jp/bosai/forecast/data/overview_week/130000.json';
const test2 = () => {
  fetch(url).then(res=>new Promise(async resolve=>resolve({json:await res.json()}))).then(data=>console.log(data.json));
};
test2();
const test3 = () => {
  fetch(url).then(res=>new Promise(async resolve=>resolve([await res.json()]))).then(data=>console.log(data[0]));
};
test3();

もしくは

const url = 'https://www.jma.go.jp/bosai/forecast/data/overview_week/130000.json';
const test2 = () => {
  fetch(url).then(async res=>({json:await res.json().then(data=>data)})).then(data=>console.log(data.json));
};
test2();
const test3 = () => {
  fetch(url).then(async res=>[await res.json().then(data=>data)]).then(data=>console.log(data[0]));
};
test3();

Comments

[yuzunoha123]

回答ありがとうございます！json()はPromiseを返していたのですね！！

僕が見たことないasync-awaitのサンプルコードも載せていただきありがとうございます！