JavaScript レッスン12
Fetch API
Web APIとの通信方法を学んでデータを取得・送信しよう
Fetch APIとは
Fetch APIは、ブラウザに組み込まれたHTTPリクエストを送信するための仕組みです。 外部のAPI（サーバー）と通信してデータの取得や送信ができます。Promiseベースで設計されているので、 async/awaitと組み合わせて使うのが一般的です。
fetch(url)— GETリクエストresponse.json()— JSONレスポンスを解析- POSTリクエスト — データの送信
- ヘッダー — リクエストの設定
- エラーハンドリング — ネットワークエラーやHTTPエラーの処理
GETリクエストとJSON
公開APIからデータを取得してみましょう。
Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.html
preview.local
Live PreviewPOSTリクエストとエラーハンドリング
データの送信方法とエラー処理を学びましょう。
Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.html
preview.local
Live Preview自由に試してみよう
公開APIを使ってデータを取得して表示してみましょう。
Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.html
preview.local
Live Preview