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>


// 問題1. async・awaitを使って非同期関数を作成しよう1
const getPostUrl = 'https://jsonplaceholder.typicode.com/posts'
const getPostList = async () => {
  // ここから
  const response = await fetch(getPostUrl)
  const postList = await response.json()
  console.log(postList)
  // ここまで
}

getPostList()

// 問題2. async・awaitを使って非同期関数を作成しよう2
const getUserUrl = 'https://jsonplaceholder.typicode.com/users'
const getUserList = async () => {
  // ここから
  const response = await axios.get(getUserUrl)
  const userList = response.data
  console.log(userList)
  // ここまで
}

getUserList()


// 問題1. async・awaitを使って非同期関数を作成しよう1
const getPostUrl = 'https://jsonplaceholder.typicode.com/posts'
const getPostList = async () => {
  // ここから
  // ここまで
}

getPostList()

// 問題2. async・awaitを使って非同期関数を作成しよう2
const getUserUrl = 'https://jsonplaceholder.typicode.com/users'
const getUserList = async () => {
  // ここから
  // ここまで
}

getUserList()


【演習】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の非同期処理について学んでいこう」レッスンの総復習クイズです。