JavaScriptでWebのファイルやWeb APIのレスポンスを取得するコードと実行結果を紹介します。
こちらの記事では、XMLHttpRequestを利用して、Webからファイルを取得するコードを紹介しています。
これまでは、XMLHttpRequestを利用するコードが多い状況でしたが、最新のWebブラウザでは、fetch関数が利用できるようになり、
非同期処理が簡単なコードで実装できます。この記事では、fetch関数を利用して、Webのファイルを取得するコードを紹介します。
以下の書式を利用します。最初の .then メソッドのブロックで、レスポンスオブジェクトを取得完了した際の処理を記述します。
2番目の.thenメソッドのブロックで、レスポンスデータを受け取った際の処理を記述します。.catch は例外が発生した場合の処理を記述します。
fetch('[取得するファイルパスまたはURL]')
.then(response => {
// レスポンスオブジェクトを処理を受け取った時の処理
})
.then(data => {
// レスポンスデータを受け取った時の処理
})
.catch(error => {
// 例外時の処理
});
処理部分を別関数にする場合は以下の記述もできます。
fetch('[取得するファイルパスまたはURL]').then([関数1]).then([関数2]).catch([関数3]);
function [関数1](response){
// レスポンスオブジェクトを処理を受け取った時の処理
}
function [関数2](data ){
// レスポンスデータを受け取った時の処理
}
function [関数3](error ){
// 例外時の処理
}
以下のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function getData() {
fetch('textdata.txt')
.then(response => {
if (!response.ok) {
throw new Error('status = ' + response.status);
}
return response.text();
})
.then(data => {
var elem = document.getElementById('output');
elem.innerText = data;
})
.catch(error => {
alert(error.message);
});
}
</script>
</head>
<body>
<h2>Fetchのデモ</h2>
<hr />
<input id="Button_Get" type="button" value="取得" onclick="getData();" />
<hr />
<div>受信情報</div>
<div id="output"></div>
</body>
</html>
fetchで読み込むデータファイルです。上記のHTMLファイルと同じディレクトリに配置します。
Fetchのデモです。
あいうえお。
ABCDE
fetch関数で、textdata.txtファイルを取得します。
取得に成功した場合は、ファイルの内容を output のHTML要素の位置に出力します。
ファイル取得に失敗した場合は、if (!response.ok) が true の判定になり、throw を実行して例外を発生させます。
例外が発生した場合は、.catch部分が実行され、アラートダイアログを表示し、エラーのメッセージを画面に表示します。
function getData() {
fetch('textdata.txt')
.then(response => {
if (!response.ok) {
throw new Error('status = ' + response.status);
}
return response.text();
})
.then(data => {
var elem = document.getElementById('output');
elem.innerText = data;
})
.catch(error => {
alert(error.message);
});
}
WebブラウザでHTMLファイルを表示します。下図のページが表示されます。
[取得]ボタンをクリックします。fetch関数でテキストファイルを取得し、テキストファイルの内容がページの下部に表示されます。
なお、テキストファイルがサーバー側に存在しない場合は、アラートダイアログが表示され、ファイルがない旨の404エラーのメッセージが表示されます。
fetch関数を利用して、Webのファイルを取得できました。
