js の fetch で値がとれない

Question

いつもお世話になっております。
laravel で API を準備し、js 側でクッキーの値を取得したいと思っています
値の取得自体は出来たのですが、変数に格納できません。どのようにすれば良いのかアドバイスお願いします

function getCookieSpecify () {
            fetch('/api/getcookie')
            .then(response => {
                return response.json();
            })
            .then(data => { // 
                console.log("1 cookie is " + data['cookie']);
                return data['cookie'];
            })
            .catch(error => { // 
                console.log(error);
            })
        }

        const cookie = getCookieSpecify()
        console.log("2 cookie is " + cookie);

        // 2 cookie is undefined
        // 1 cookie is kuki

２つ目の「then」の部分で値が取得できていると思っていたのですが、変数に入れて取得しようとすると 「undefined」になってしまいます。
これは Promise の処理が終了していないということなんでしょうか？

Answer 1

これは Promise の処理が終了していないということなんでしょうか？

違います。getCookieSpecifyが何も返り値を返していないので、const cookie = getCookieSpecify()として取れる値はundefinedです。

なお、fetchなど非同期で取れる値を、Promiseなどに包まない単純な値として同期的に返す方法は、ブラウザJavaScriptの枠内には存在しません。

Comments

[hiro114]

えぇっと、つまり自分の場合のコードだと処理の途中にも関わらずむりやりこじ開けて値を取り出そうとしている的な感じですかね？
抽象的ですみません…

Answer 2

getCookieSpecify がfetchの値を戻してないですね
その上でasync/awaitで管理しないとpromise処理が完了しません

//sample.json

{"cookie":"test"}

//sample.html

function getCookieSpecify () {
  return fetch('sample.json')
    .then(response => {
      return response.json();
    })
      .then(data => {
        console.log("1 cookie is " + data['cookie']);
        return data['cookie'];
      })
        .catch(error => {
          console.log(error);
        })
        }
(async()=>{
  const cookie = await getCookieSpecify();
  console.log("2 cookie is " + cookie);
})();

Comments

[hiro114]

えぇと、fetch（通信） の処理を、無名async関数（非同期）で行っているという認識であってますかね…？

[yambejp]

fetchの戻りをreturnするとgetCookieSpecify はpromiseを返すことになるので
asyncの中でawaitを設定して処理を待つ感じです

[hiro114]

あーーーー！　なるほど
スッキリしました！　ありがとうございますｍ（＿＿）ｍ