File tree Expand file tree Collapse file tree 3 files changed +1
-5
lines changed
docs/3-web-servers/06-fetch-api
fetch-weather-json/public Expand file tree Collapse file tree 3 files changed +1
-5
lines changed Original file line number Diff line number Diff line change 11async function fetchWeather ( ) {
22 const response = await fetch ( "/weather" ) ;
3- // レスポンスをJSONとして取得
43 const weather = await response . json ( ) ;
54 document . getElementById ( "condition" ) . textContent = weather . condition ;
65 document . getElementById ( "temperature" ) . textContent = weather . temperature ;
Original file line number Diff line number Diff line change @@ -3,7 +3,6 @@ async function fetchWeather() {
33 // http://localhost:3000/weather にHTTPリクエストを送信
44 // fetch関数は非同期処理を行うため、await演算子を適用して完了を待機する
55 const response = await fetch ( "/weather" ) ;
6- // レスポンスをテキストとして取得
76 const weather = await response . text ( ) ;
87 document . getElementById ( "weather" ) . textContent = weather ;
98}
Original file line number Diff line number Diff line change @@ -45,7 +45,6 @@ async function fetchWeather() {
4545 // http://localhost:3000/weather にHTTPリクエストを送信
4646 // fetch関数は非同期処理を行うため、await演算子を適用して完了を待機する
4747 const response = await fetch (" /weather" );
48- // レスポンスをテキストとして取得
4948 const weather = await response .text ();
5049 document .getElementById (" weather" ).textContent = weather;
5150}
@@ -115,7 +114,7 @@ fetchOpenStatus();
115114次の例では、Fetch APIを用いて、サーバーから現在の天気と気温を取得しています。前項のサンプルアプリケーションとは、次の点が異なっています。
116115
117116- サーバー側は、Expressが提供する[ ` Response#json ` メソッド] ( https://expressjs.com/ja/api.html#res.json ) を用いてレスポンスを送信しています。このメソッドは、引数として渡されたオブジェクトを<Term >JSON</Term >に変換してレスポンスとして返します。
118- - クライアント側は、ブラウザが提供する[ ` Response#json ` メソッド] ( https://developer.mozilla.org/ja/docs/Web/API/Response/json ) を用いてレスポンスを取得しています。このメソッドは、レスポンスの内容を <Term >JSON</Term >として解析し、JavaScriptのオブジェクトとして返します 。
117+ - クライアント側は、ブラウザが提供する[ ` Response#json ` メソッド] ( https://developer.mozilla.org/ja/docs/Web/API/Response/json ) を用いて、 <Term >JSON</Term >形式のレスポンスをJavaScriptオブジェクトとして取得します 。
119118
120119``` javascript title="main.mjs (サーバーとして動作するJavaScript)"
121120import express from " express" ;
@@ -142,7 +141,6 @@ app.listen(3000);
142141``` javascript title="public/script.js (ブラウザ上で動作するJavaScript)"
143142async function fetchWeather () {
144143 const response = await fetch (" /weather" );
145- // レスポンスをJSONとして取得
146144 const weather = await response .json ();
147145 document .getElementById (" condition" ).textContent = weather .condition ;
148146 document .getElementById (" temperature" ).textContent = weather .temperature ;
You can’t perform that action at this time.
0 commit comments