throw

<!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 getTodoByIdUrl = 'https://jsonplaceholder.typicode.com/todos/'

const wrongTodoId = '9999'

const getTodoById = async (id) => {
  try {
    const response = await fetch(getTodoByIdUrl + id)
    // 問題2. エラーオブジェクトを作ろう
    if (response.status === 404) {
      throw new Error('todoの取得に失敗しました')
    }
    // ここまで
    const todoById = await response.json()
    console.log(todoById)
  } catch (error) {
    // 問題3. エラーメッセージを出力しよう
    console.log(error.message)
    // ここまで
  } finally {
    console.log('処理を終了します')
  }
}

getTodoById(wrongTodoId)


const getTodoByIdUrl = 'https://jsonplaceholder.typicode.com/todos/'

const wrongTodoId = '9999'

const getTodoById = async (id) => {
  try {
    const response = await fetch(getTodoByIdUrl + id)
    // 問題2. エラーオブジェクトを作ろう
    // ここまで
    const todoById = await response.json()
    console.log(todoById)
  } catch (error) {
    // 問題3. エラーメッセージを出力しよう
    console.log(error)
    // ここまで
  } finally {
    console.log('処理を終了します')
  }
}

getTodoById(wrongTodoId)


try・catch・finallyの例外処理

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

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

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

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

JavaScriptコース

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

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