<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  </head>

  <body></body>
</html>


const targetId = 9999

const getUser = async (id) => {
  const response = await axios.get(
    `https://jsonplaceholder.typicode.com/users/${id}`
  )
  return response.data
}

const getPostsByUser = async (userId) => {
  const response = await axios.get(
    `https://jsonplaceholder.typicode.com/posts?userId=${userId}`
  )
  return response.data
}

const getPostByUser = async (userId) => {
  try {
    // 問題1. tryブロックを作成しよう1
    const userData = await getUser(userId)
    // ここまで
    console.log(`ユーザーは${userData.name}です`)

    // 問題2. tryブロックを作成しよう2
    const postByUser = await getPostsByUser(userId)
    if (postByUser.length === 0) {
      throw new Error('該当する投稿が見つかりませんでした')
    }
    //ここまで
    console.log(`投稿は${postByUser.length}個あります`)
  } catch (error) {
    // 問題3. catchブロックを作成しよう
    if (error.response && error.response.status === 404) {
      console.log('ユーザーが見つかりませんでした')
    } else {
      console.log(error.message)
    }
    // ここまで
  } finally {
    console.log('処理を終了します')
  }
}

getPostByUser(targetId)


テンプレートリテラル

const targetId = 9999

const getUser = async (id) => {
  const response = await axios.get(
    `https://jsonplaceholder.typicode.com/users/${id}`
  )
  return response.data
}

const getPostsByUser = async (userId) => {
  const response = await axios.get(
    `https://jsonplaceholder.typicode.com/posts?userId=${userId}`
  )
  return response.data
}

const getPostByUser = async (userId) => {
  try {
    // 問題1. tryブロックを作成しよう1
    // ここまで
    console.log(`ユーザーは${userData.name}です`)

    // 問題2. tryブロックを作成しよう2
    //ここまで
    console.log(`投稿は${postByUser.length}個あります`)
  } catch (error) {
    // 問題3. catchブロックを作成しよう
    // ここまで
  } finally {
    console.log('処理を終了します')
  }
}

getPostByUser(targetId)


【演習】複雑な非同期関数を作ろう

まずは必要なスキルを確認しましょう！