JavaScript非同期処理の完全ガイド

JavaScriptの非同期処理をマスターして、効率的なコードを書きましょう。

Promiseの基本

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = Math.random() > 0.5
      if (success) {
        resolve({ data: 'Success!' })
      } else {
        reject(new Error('Failed to fetch data'))
      }
    }, 1000)
  })
}

fetchData()
  .then(result => console.log(result))
  .catch(error => console.error(error))

async/awaitの使い方

async function getData() {
  try {
    const result = await fetchData()
    console.log(result)
    return result
  } catch (error) {
    console.error('Error:', error.message)
    throw error
  }
}

// 複数の非同期処理
async function fetchMultipleData() {
  try {
    const [user, posts, comments] = await Promise.all([
      fetchUser(),
      fetchPosts(),
      fetchComments()
    ])
    
    return { user, posts, comments }
  } catch (error) {
    console.error('One or more requests failed:', error)
  }
}

実践的な例：API呼び出し

class ApiClient {
  constructor(baseURL) {
    this.baseURL = baseURL
  }

  async request(endpoint, options = {}) {
    const url = `${this.baseURL}${endpoint}`
    
    try {
      const response = await fetch(url, {
        headers: {
          'Content-Type': 'application/json',
          ...options.headers
        },
        ...options
      })

      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`)
      }

      return await response.json()
    } catch (error) {
      console.error('API request failed:', error)
      throw error
    }
  }

  async get(endpoint) {
    return this.request(endpoint)
  }

  async post(endpoint, data) {
    return this.request(endpoint, {
      method: 'POST',
      body: JSON.stringify(data)
    })
  }
}

// 使用例
const api = new ApiClient('https://api.example.com')

async function loadUserData(userId) {
  try {
    const user = await api.get(`/users/${userId}`)
    const posts = await api.get(`/users/${userId}/posts`)
    
    return { user, posts }
  } catch (error) {
    console.error('Failed to load user data:', error)
  }
}

非同期処理を適切に扱うことで、パフォーマンスの良いアプリケーションを構築できます。