🚋

【Nuxt】Async/Awaitで非同期処理を行う

2023/12/19に公開

JavaScript

はじめに

asyncとawaitは非同期処理がより扱いやすくなる構文です。これらの詳細とNuxtで利用する方法について説明します。

Async/Awaitの基本

async

async関数は、非同期処理を行う関数を定義するために使われます。asyncキーワードを関数の前につけると、その関数は必ずPromiseを返します。Promiseは非同期処理の結果を表すオブジェクトで、成功の場合はresolveされ、失敗の場合はrejectされる値を持ちます。

async function fetchData() {
  // 非同期処理
}

await

awaitは、async関数内で使用され、Promiseの解決を"待つ"ために用います。awaitが付いた処理が完了するまで、関数の実行が一時的に停止しますが、これは他の処理（イベントループ内）に影響を与えません。

async function fetchData() {
  let data = await someAsyncFunction(); // Promiseがresolveされるのを待つ
  console.log(data); // Promiseが解決された値がここに入る
}

NuxtでのAsync/Awaitの使用例

Nuxtでは、Vueコンポーネントの中で直接async/awaitを使ってデータをフェッチしたり、サーバーサイドでの操作を行うことが可能です。Nuxtにおける非同期データフェッチングの一般的な形式は以下です。

<template>
  <div>
    <p v-if="error">エラーが発生しました: {{ error }}</p>
    <div v-else-if="data">{{ data }}</div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const data = ref(null)
const error = ref(null)

// `async`を使用した非同期データフェッチング
async function loadData() {
  try {
    data.value = await fetch('https://api.example.com/data')
      .then(response => response.json())
  } catch (err) {
    error.value = err.message
  }
}

// クライアントサイドでコンポーネントがマウントされた後にデータをロード
onMounted(async () => {
  await loadData()
})
</script>