Javascript fetchを使えるようになろう

はじめに

初学者
基本は備忘録

追加

// Axiosの方が簡単
const await axios.get("url")

const await axios.post("url", body)

const await axios.delete("url", body)

const await axios.put("url", body)

fetch APIとは

詳しくはこちらのサイト
HTTPリクエストをサーバーに送るための関数
解決時にResponseオブジェクトを取得できるPromiseを返す
thenに渡す関数の引数はresponseにする(暗黙)

thenを利用した場合の例

const result = fetch('取得したAPIのURL');
result.then((response) => response.json())
.then((info) => console.log(info[0].プロパティ名))

少し説明

JavaScript は、必要に応じていつでもサーバへリクエストを送信し、新しい情報を読み込むことができます。

例えば、次のようなことができます:

注文を送信する
ユーザ情報を読み込む
サーバから最新の更新情報を受け取る
…など
…そしてこれらはすべてページをリロードすることなく行うことができます。
基本構文

let promise = fetch(url, [options])

---

例 APIが取得できたら情報をjson形式にしてjsonに代入

async function f() {
  let response = await fetch(url);

  if (response.ok) { // HTTP ステータスが 200-299 の場合
    // レスポンスの本文を取得(後述)
    let json = await response.json();
  } else {
    alert("HTTP-Error: " + response.status);
  }
}
f()

実際に取得してみる

レスポンスの本文を取得するには、追加のメソッド呼び出しが必要です。

Responseは様々な形式で本文にアクセスするための、複数の promise ベースのメソッドを提供しています。:

response.json() – レスポンスを JSON オブジェクトとしてパースします
response.text() – レスポンスをテキストとして返します

例えば、ここでは Github から最新のコミットの JSON オブジェクトを取得します。

let response = await fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits');

let commits = await response.json(); // レスポンスの本文を読み JSON としてパースする

alert(commits[0].author.login);

純粋なPromise構文

fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits')
  .then(response => response.json())
  .then(commits => alert(commits[0].author.login));

JSON配列

決まり
シングルクオーテーションで囲んではいけない
プロパティに対してもダブルクオーテーションで囲む
格納されている要素の一番最後に,をつけてはいけない

例

fetch('js/users.json')
.then((response) => response.json())
.then((json) => {
  console.log(json)
  for(const user of json) {
    console.log(`I'm ${user.name}, ${user.age} years old`)
  }
})

jsonはこれ

[
  {
    "name": "Bob",
    "age": 23
  },
  {
    "name": "Tim",
    "age": 30
  },
  {
    "name": "Sun",
    "age": 25
  }
]