概要
XMLHttpRequest(XHR)を利用してWebAPIを処理する実装を行っていた。
記述量が多くなりがちな印象。
XMLHttpRequest（XHR）とは、Webブラウザなどに実装されているJavaScriptのAPIおよびオブジェクトの一つで、スクリプトからHTTPを利用してWebサーバにアクセスする機能を提供するもの。
そこからFetchを利用してWebAPIを処理する実装へ変わっていった。
Promiseを使用できるので成功・失敗の処理を記述しやすい印象。
さらに使いやすいaxiosへ
XHR API連携
script.js
const req = new XMLHttpRequest();
// リクエスト生成
req.open('GET', 'https://api.tvmaze.com/schedule?country=JP&date=1980-02-01');
// リクエスト送信
req.send();
// 成功時のイベントハンドラ設定
req.onload = function() {
console.log('成功');
// レスポンス結果をJSON形式に変換
const data = JSON.parse(this.responseText);
console.log(data);
}
// 失敗時のイベントハンドラ設定
req.onerror = function(){
console.log('エラー');
}
fetch API連携
script.js
// リクエスト生成・送信
fetch('https://api.tvmaze.com/schedule?country=JP&date=1980-02-01')
// Promiseが返ってくるので.then()で成功時の処理
.then((res) => {
console.log('成功');
// レスポンス結果をJSON形式に変換
return res.json();
})
.then((data) => {
console.log(data);
})
// 失敗時の処理
.catch((err) => {
console.log('エラー', err);
});
axios API連携
index.html
<body>
<!-- CDNを利用 -->
<script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
</body>
script.js
const getTV = async () => {
// URLパラメータ設定
const parm = {
params: {
country: 'JP',
date: '1980-02-01',
}
}
// リクエスト生成・送信
const res = await axios.get('https://api.tvmaze.com/schedule', parm);
// axiosにはJSON形式のデータを内部的に保持しているためそのまま利用可
console.log(res.data);
}
getTV();