1. このページの目的
JavaScript でHTTP(S)リクエストを送信する。
利用するAPI
- XMLHttpRequest
- axios を利用する(axios は XMLHttpRequests を利用するライブラリ)。
- Fetch API
- そのまま使う。
2. デモ準備
HTTP(S)リクエストの送信先のコード(PHP)
データ取得先のURLでは、PHPでJSONを返している。
PHP コード
<?php
$arr = [
'id' => 10,
'name' => 'bar',
'age' => 33,
'hobby' => 'guitar'
];
header('Content-Type: application/javascript; charset=utf-8');
echo json_encode($arr);
cross origin の場合
クロスオリジンの場合は、以下のHTTPレスポンスヘッダを出力してXHR通信を許可している(CORS)。
PHP コード
header("Access-Control-Allow-Origin: https://misc.laboradian.com");3. デモ
(1) デモ： XMLHttpRequest (axios), same origin
結果
JavaScript コード
const out1Elm = document.querySelector('#out1');
document.querySelector('#btn1').addEventListener('click', () => {
axios.get('/js-test/http-request/1/user.php')
.then(response => {
out1Elm.textContent = JSON.stringify(response.data);
})
.catch(error => {
console.error(error);
})
.finally(() => {
// skip
});
});
(2) デモ： XMLHttpRequest (axios), async/await, same origin
結果
JavaScript コード
const out2Elm = document.querySelector('#out2');
document.querySelector('#btn2').addEventListener('click', async () => {
try {
const response = await axios.get('/js-test/http-request/1/user.php');
out2Elm.textContent = JSON.stringify(response.data);
} catch (error) {
console.error(error);
}
});
- async/await のおかげで、メソッドチェーンがなくなっている。
- これはこれで分かりやすい。
(3) デモ： XMLHttpRequest (axios), async/await, cross origin
結果
JavaScript コード
const out3Elm = document.querySelector('#out3');
document.querySelector('#btn3').addEventListener('click', () => {
(async () => {
try {
const response = await axios.get('https://lara-misc.appspot.com/json/user/');
out3Elm.textContent = JSON.stringify(response.data);
} catch (error) {
console.error(error);
}
})();
});
(4) デモ： Fetch API, same origin
結果
JavaScript コード
const out4Elm = document.querySelector('#out4');
document.querySelector('#btn4').addEventListener('click', () => {
fetch('/js-test/http-request/1/user.php', {
method: "GET",
mode: "cors"
})
.then(response => {
if (response.ok) {
return response.json();
}
throw new Error('Network response was not ok.');
})
.then(resJson => {
out4Elm.textContent = JSON.stringify(resJson);
})
.catch(error => {
console.error(error);
})
});
- 404 エラーであっても、最初の then に処理が入ってくる。
- response.json() を実行しないと JSON オブジェクトが取得できない。また、この json() メソッドは Promise を返す非同期メソッドなので、Promiseチェーンが1つ増えてしまう。
(5) デモ： Fetch API, cross origin
結果
JavaScript コード
const out6Elm = document.querySelector('#out5');
document.querySelector('#btn5').addEventListener('click', () => {
fetch('https://lara-misc.appspot.com/json/user/', {
method: "GET",
mode: "cors"
})
.then(response => {
if (response.ok) {
return response.json();
}
throw new Error('Network response was not ok.');
})
.then(resJson => {
out5Elm.textContent = JSON.stringify(resJson);
})
.catch(error => {
console.error(error);
})
});
(6) デモ： Fetch API, json().then(), same origin
結果
JavaScript コード
const out6Elm = document.querySelector('#out6');
document.querySelector('#btn6').addEventListener('click', () => {
fetch('/js-test/http-request/1/user.php', {
method: "GET",
mode: 'cors'
})
.then((response) => {
if (response.ok) {
return response.json().then(resJson => {
out6Elm.textContent = JSON.stringify(resJson);
});
}
throw new Error('Network response was not ok.');
})
.catch(error => {
console.error(error);
})
});
- 読みづらい。
(7) デモ： Fetch API, async/await, same origin
結果
JavaScript コード
const out7Elm = document.querySelector('#out7');
document.querySelector('#btn7').addEventListener('click', async () => {
try {
const response = await fetch('/js-test/http-request/1/user.php', {
method: "GET",
mode: 'cors'
});
if (response.ok) {
const resJson = await response.json();
out7Elm.textContent = JSON.stringify(resJson);
} else {
throw new Error('Network response was not ok.');
}
} catch (error) {
console.error(error);
}
});
4. メモ
- この中なら、(2) が書きやすく分かりやすいと思った。その次は (1)。