fetch で async/await 使う例 使わない例

await/async 使わない例

import * as cookie from "cookie"

export async function getServerSideProps(context) {
  let headers_cookie = context.req.headers.cookie;

  if (headers_cookie === undefined) {
    headers_cookie = "";
  }

  const parsedCookies = cookie.parse(headers_cookie);
  
  let url = "http://localhost:3001/api/v1/auth/sessions";

  await fetch(url, {
     headers: {
       "access-token": parsedCookies._access_token,
       client: parsedCookies._client,
       uid: parsedCookies._uid
     }
   })
   .then(response => {
     return response.json();
   })
   .then(data => {
     console.log("Data: " + JSON.stringify(data));
   })
   .catch(error => {
     console.log("失敗しました");
   });

  return { props: { name: "omusubi" } };
}

await/async 使う例

import * as cookie from "cookie"

export async function getServerSideProps(context) {
  let headers_cookie = context.req.headers.cookie;

  if (headers_cookie === undefined) {
    headers_cookie = "";
  }

  const parsedCookies = cookie.parse(headers_cookie);
  
  let url = "http://localhost:3001/api/v1/auth/sessions";

  const response = await fetch(url, {headers: {
      "access-token": parsedCookies._access_token,
      client: parsedCookies._client,
      uid: parsedCookies._uid
    }
  })

  const data = await response.json();

  if(data.status === 500) {
    return {
      redirect: {
        destination: "/signin",
        permanent: false,
      },
    }
  }

  return { props: { name: "omusubi" } };
}

参考記事

fetch呼び出しでasync/awaitを使わないパターン、使うパターン – 2021年9月21日
https://qiita.com/jun1s/items/d0a234700a14bf910065

Promiseの使い方、それに代わるasync/awaitの使い方 – 2020年3月12日
https://qiita.com/suin/items/97041d3e0691c12f4974#async%E3%81%A8await—%E9%9D%9E%E5%90%8C%E6%9C%9F%E5%87%A6%E7%90%86%E3%82%92%E5%90%8C%E6%9C%9F%E5%87%A6%E7%90%86%E3%81%A3%E3%81%BD%E3%81%8F%E6%9B%B8%E3%81%8F

ブラウザで非同期処理を同期的に処理する fetch(Promise) + async/await – 2017年11月26日
https://qiita.com/msquare33/items/a8b51d6f4d6be770e7d6

JavaScriptのFetch API について – 2021年2月26日
https://qiita.com/sotasato/items/31be24d6776f3232c0c0

JavaScriptのFetch API について – 2021年02月26日
https://qiita.com/sotasato/items/31be24d6776f3232c0c0

【JavaScript】初めて学ぶ！fetch()メソッドと非同期通信 – 2021.2.2
https://breezegroup.co.jp/202004/javascript-fetch

fetchメソッドの基本的な使い方【クエリパラメータとリクエストボディの使い分け】 – 2020.12.14
https://zenn.dev/syu/articles/946a2b5fdf292e