はじめに
Udemyの【JS】ガチで学びたい人のためのJavaScriptメカニズムの講座の振り返りです。
前回の記事
目的
- 非同期処理についての理解を深める
本題
1.fetch
サーバー上から情報を取得したりできる関数
前提
main.jsファイルと同じ階層にusers.jsonファイルを準備する
(VSコードの拡張機能：Live Serverがインストールされていないとエラーになります。)
- 基本的にはJSと同じ書き方
- しかしシングルクオーテーション使用不可
- 必ずダブルクオーテーション
- 一番最後の要素にカンマを使うとエラーになる
users.json
[
{
"name": "Bob",
"age": 23
},
{
"name": "Tim",
"age": 30
},
{
"name": "Sun",
"age": 25
}
]
例1
fetchの基本的な使い方
main.js
// 第一引数にリクエスト先のURLを入力（今回はuser.jsonファイル）
// fetch("users.json")
// どのような戻り値が帰ってくるのかコンソールで確認
// console.log(fetch(`users.json`))
// このようにするとPromiseが返ってきていることがわかるのでthenメソッドが使える
fetch(`users.json`).then(function(response){
// サーバーから返ってきたデータを格納している
console.log(response);
})
出力結果は以下の通り
console.
body: (...)
bodyUsed: false
headers: Headers {}
ok: true #サーバーからデータが取得できたことを表している
redirected: false
status: 200 #Httpステータスが200ということは通信に問題がない状態
statusText: "OK"
type: "basic"
url: "http://127.0.0.1:5500/080_%E9%9D%9E%E5%90%8C%E6%9C%9F%E5%87%A6%E7%90%86/110_fetch/start/users.json"
[[Prototype]]: Response
この結果にあるjsonメソッドを使う（jsonファイル取得のため）
main.js
fetch(`users.json`).then(function(response){
// コンソールからjsonというメソッドが使えることがわかる
return response.json();
}).then(function(Json){
// この引数Jsonにデータが入っているか確認する
console.log(Json);
})
このようにすると以下のように出力される
console.
(3) [{…}, {…}, {…}]
0: {name: 'Bob', age: 23}
1: {name: 'Tim', age: 30}
2: {name: 'Sun', age: 25}
length: 3
[[Prototype]]: Array(0)
例2
データの取得がうまくいっていたので、応用して出力する
main.js
fetch(`users.json`).then(function(response){
return response.json();
}).then(function(Json){
console.log(Json);
// for文を使用してループ
for(const user of Json){
// テンプレートリテラルを使って出力
// nameとageがusers.jsonファイルのものを使用
console.log(`おれは ${user.name}, 今年で${user.age}になる。`)
}
})
// 以下のように出力されている
// おれは Bob, 今年で23になる。
// おれは Tim, 今年で30になる。
// おれは Sun, 今年で25になる。
重要なのは２点
Promiseのオブジェクトを返す
jsonのオブジェクトを使用するにはjsonメソッドを使用して取得する必要がある
例3
awaitとasyncで出力してみる
async function fetchUsers(){
const response = await fetch(`users.json`);
const Json = await response.json();
for(const user of Json){
console.log(`おれは ${user.name}, 今年で${user.age}になる。`)
}
}
// 実行すると同じ出力結果となる
fetchUsers();
今日はここまで！