async-await

<!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 url = 'https://jsonplaceholder.typicode.com/users/1'

const getUser = async () => {
  // 2秒待機する
  await new Promise((resolve) => setTimeout(resolve, 2000))
  // ユーザの情報を取得してuserDataに格納する
  const response = await fetch(url)
  const userData = await response.json()
  console.log(userData)
}

const sampleFunction = async () => {
  await getUser()
  console.log('情報を取得しました')
}

sampleFunction()


// 以下にコードを貼り付けてください



    const answer2 = `
const url = 'https://jsonplaceholder.typicode.com/users/1'

const getUser = async () => {
  // 2秒待機する
  await new Promise((resolve) => setTimeout(resolve, 2000))
  // ユーザの情報を取得してuserDataに格納する
  const response = await fetch(url)
  const userData = await response.json()
  console.log(userData)
}

const sampleFunction = async () => {
  await getUser()
  console.log('情報を取得しました')
}

sampleFunction()
`;
    const questions = [
        {
            title: '問題1. awaitを使わない非同期関数の動きを確認しよう',
            tests: [
                // コピーして貼り付けて実行するが目的のため厳密なチェックはしない
                {
                    title: 'コードをコピーして貼り付けて実行しましょう',
                    hint: '',
                    test: () => expect(true).toBe(true)
                }
            ]
        },
        {
            title: '問題2. awaitを使った非同期関数の動きを確認しよう',
            tests: [
                {
                    title: '`await`を使って`getUser`関数を実行しましょう',
                    hint: '再度、問題文を確認しましょう',
                    test: () => isContainTextInEditor(answer2)
                }
            ]
        }
    ];


async・await

fetch(Javascript)

fetchメソッド

setTimeout/clearTimeout

setInterval/clearInterval

テンプレートリテラル

setTimeoutとsetInterval

then-catch

thenメソッド

catchメソッド

axios

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

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

async・awaitの例外処理

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

try-catch-finally

try・catch・finally

throw

try・catch・finallyの例外処理

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

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

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

JavaScriptコース

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

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