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からデータを取得してみましょう。
Monaco + Shiki / Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.htmllazy
6 lines0 issues
Monaco Editor を準備しています
表示領域に入った時点で Monaco と Shiki を初期化します。
preview.local
Live PreviewConsole
console.log / warn / error の出力がここに表示されます。
POSTリクエストとエラーハンドリング
データの送信方法とエラー処理を学びましょう。
Monaco + Shiki / Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.htmllazy
11 lines0 issues
Monaco Editor を準備しています
表示領域に入った時点で Monaco と Shiki を初期化します。
preview.local
Live PreviewConsole
console.log / warn / error の出力がここに表示されます。
自由に試してみよう
公開APIを使ってデータを取得して表示してみましょう。
Monaco + Shiki / Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.htmllazy
9 lines0 issues
Monaco Editor を準備しています
表示領域に入った時点で Monaco と Shiki を初期化します。
preview.local
Live PreviewConsole
console.log / warn / error の出力がここに表示されます。