JavaScript基礎｜API通信「webAPIを叩く」とは

API 通信

JavaScriptでは、Web APIとの通信は非同期で行われる。Web API は、HTTPを使って通信するAPI のこと。

つまり、クライアント（ブラウザやアプリ）とサーバーの間でやりとりするAPI。

通信は非同期のため、通信の結果（レスポンス）を使いたい場合は、Promise や async/await を使って、データ取得が完了した後に処理を行う」仕組みが必要となる。

これをしないと、データ取得を待たずに次の処理に進んでしまうためデータを使う関数内で「undefined」のようにデータが見当たらないエラーとなる。

データ取得にはPromiseチェーンとasync/awaitがある。

Promise基本構文

const fetchPromise = fetch(
  "https://api.example.com/data",
);

fetchPromise
  .then((response) => {
    if (!response.ok) {
      throw new Error(HTTP error: ${response.status});
    }
    return response.json();
  })
  .then((data) => {
    console.log(data[0].name);
  });

Promiseチェーンの .then() の中で取得したデータを受け取っている。「.then((〇〇) => {...}) 」の 〇〇 の名前は data でも info でも result でも任意の名前をつけられる。

async/await基本構文

async function getData() {
  try {
    const res = await fetch("https://api.example.com/data");
    const data = await res.json();
 
  } catch (error) {
    console.error("データ取得エラー:", error);
  }
}

getData(); // 関数を呼び出して通信を実行

webAPIを叩くとは？

「webAPIを叩く」とはプログラミング上から外部とデータのやり取りをすることを指す。

APIを叩いてみる

fetch( )メソッドを使用してAPIを叩く。
fetch( )はWindowオブジェクトにあるメソッドで、サーバー上にあるデータを取得することができる。非同期でリクエストを発行し、そのレスポンスを取得する。

fetch( )をしたらpromiseオブジェクトが返ってくる。

promiseオブジェクトはそのままでは使用できないので、async関数を使用する。（asyncをつけたらfetchの前にawaitを置く必要がある。）

async function getData() {
    const res = await fetch("https://api.example.com/data");

async/awaitを使用すると、受け取るデータがpromiseオブジェクトからresponseオブジェクトに変わる。

responseオブジェクトにはデータの中身と、asyncが成功したか失敗したかが含まれる。

受け取ったResponseオブジェクトを、json( )メソッドを使用してJSON形式に変換する。

async function getData() {
    const res = await fetch("https://api.example.com/data");
　　 const data = await res.json();
  }
}

※上記ではデータ取得エラー時が入っていないため、文頭のasync/await基本構文のtry/catchを使用する。

async/await以外のAPIの叩き方

①.then( )メソッドを使う

function getData(){
  fetch("https://api.example.com/data")
    .then(function(res){
      return res.json();
    })
    .then(function(users){
      console.log(users);
    })
}

getData();

②XMLHttpRequest()

XMLHttpRequest() 

function getData() {
  const xhr = new XMLHttpRequest();
  xhr.open("GET","https://api.example.com/data");
  xhr.responseType = "json";
  xhr.send();
  xhr.onload = function(){
    console.log(xhr.response);
  }
}

getData();

⚠️XMLHttpRequestは古いのであまり使用されていない。

⭐️練習：イベント発火でAPIを叩いて取得したデータをforEachで表示させる

📝やりたいこと

・ボタンをクリックしたら、json公式サイトのusersデータの中からユーザーネームのみ取得する

// DOM
const button = document.getElementById("addBtn");
const lists = document.getElementById("lists");

//関数（メソッド）
function addList(user) {
  const list = document.createElement("li");
  list.innerText = user.name;
  lists.appendChild(list);        
}

async function getUsers(){
  const res = await fetch("https://jsonplaceholder.typicode.com/users");
  const users = await res.json();
  return users;
}

async function listUsers(){
  const users = await getUsers();
  users.forEach(addList);
}

//イベント
button.addEventListener('click', listUsers);