テンプレートリテラル

<!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)


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

fetch(Javascript)

fetchメソッド

setTimeout/clearTimeout

setInterval/clearInterval

setTimeoutとsetInterval

then-catch

thenメソッド

catchメソッド

axios

【演習】axiosを使って実装しよう

async-await

async・await

【演習】async・awaitを使ってみよう

async・awaitの例外処理

【演習】非同期関数を組み合わせよう

try-catch-finally

try・catch・finally

throw

try・catch・finallyの例外処理

JavaScriptの非同期処理を学んでいこう。

webサイトに動きをつけたり、表示内容を切り替えたり、formの入力を制御するなど様々な処理について学んでいきます

JavaScriptコース

【JavaScriptの基礎をマスター💪】配列、オブジェクト、関数を使いこなそう！

「JavaScriptの非同期処理について学んでいこう」レッスンの総復習クイズです。