WebAPIとは？[JS]

JS エンジニア プログラミング 初心者

WebAPIとは？

https://jsonplaceholder.typicode.com/users

事項結果(一部)

[
  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
        "lat": "-37.3159",
        "lng": "81.1496"
      }
    },
    "phone": "1-770-736-8031 x56442",
    "website": "hildegard.org",
    "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
    }
  },
//以下略

上記のような、お願いを出してデータを送り返して来てくれもの=WebAPI
主にフロントエンドはバックエンドが作ったAPIを使用してUIを構築する。
APIをプログラム側(JavaScript)から叩いてデータのやりとりを行う.

APIの使い方

async awaitを用いるやり方

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <p>Chrome DevTools で consoleを開いてください</p>
  <script src="index.js"></script>

</body>
</html>

index.js

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

callApi();

async awaitを使用せずfetchにつなげて記述するやり方

function callApi() {
  fetch("https://jsonplaceholder.typicode.com/users")
    .then(function(res) {
      return res.json();
    })
    .then(function(users) {
      console.log(users);
    })
}

callApi();

XMLHttpを用いた方法

function callApi() {
  const xhr = new XMLHttpRequest();
  xhr.open("GET","https://jsonplaceholder.typicode.com/users");
  xhr.responseType = "json";
  xhr.send();
  xhr.onload = function() {
    console.log(xhr.response);
  }
}

callApi();