JavaScript道場:WebAPI

APIとは

application programming interface
サービスとサービスをつなぐ(interface/境界面)
サービスの使用を公開して第三者が利用できるようにする

HTTPリクエストを通じて外部のサービスを利用するのがWebAPI

HTTPについて

どうして、だれが、なんのために

ティムバーナーズリー  HTTPの生みの親
論文を他の大学からネットを介して読みたかったので、生まれた
HTML もテキストデータなので、HTMLをやりとりするときにも使われます。
ブラウザ = HTTPのクライアント

ブラウザもHTTPでデータを取ってきている

通信メソッド

重要なのは GET/POST

GET: 情報をサーバーから取ってくる
POST: 情報をサーバーに送る

etc … DELETE/PUT

JavaScriptはHTTPリクエストを送信できる

HTTPリクエストを介して他のサービスからデータを取得して利用する = WebAPI
 

XMLHttpRequest

function reqListener () {
  console.log(this.responseText);
}

var oReq = new XMLHttpRequest();
oReq.addEventListener("load", reqListener);
oReq.open("GET", "https://parklot-api.herokuapp.com/api/v1/campaigns/");
oReq.send();

fetch

const BASE_URL = "https://api.gnavi.co.jp/RestSearchAPI/v3/"
const API_KEY = "60e919407001d7a00adc7f4a8764a2d9"
let url = `${BASE_URL}?keyid=${API_KEY}&freeword=焼肉&hit_per_page=1`

fetch(url, {
  method: "GET",
}).then(response => response.text())
.then(text => {
  console.log(text);
});

JSON

データフォーマット、WebAPIでよく使われるデータフォーマットがJSONです。