Axiosであっさりファイルアクセス
Axiosとは
HTTP通信を使い、気軽にデータ通信/取得が出来る定番ライブラリです。
記述方法がとてもシンプルなのでオススメです!!
HTMLファイルを用意する
さっそく実装していきます。
HTMLファイルを用意して、下記コードを記述します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Axios</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js"></script>
<script src="./main.js"></script>
</body>
</html>
Axiosのライブラリのロードには、CDN(Contents Deliverly Network)を使っています。
(URLから直接ダウンロードする事で、プロジェクトがコンパクトになりますね)
読み込み対象のファイルを用意する
Axiosで読み込むJSONファイルを用意します。
{
"data":[
{"name": "大垣公園", "lat": 35.361715, "lng": 136.61514},
{"name": "大垣公園", "lat": 35.3618696, "lng": 136.616562},
{"name": "新大橋", "lat": 35.363357, "lng": 136.617586},
{"name": "貴船橋", "lat": 35.363218, "lng": 136.61893},
{"name": "見取公園","lat": 35.366069, "lng": 136.613876}
]
}
ちなみに、このデータは岐阜県大垣駅付近にある公衆トイレの情報です!!
JavaScriptファイルを用意する
JavaScriptファイルを用意しましょう。
Axiosライブラリを読み込むと、"axios"オブジェクトが使える様になっています。
axiosの基本的な記述方法は、次の通りです。
const option = {responseType: "blob"};
axios.get(ファイルへのパス, option).then(res=>{
// 通信が成功した場合
}).catch(err=>{
// 通信が失敗した場合
});
axiosオブジェクトに対し、"get関数"を実行しています。(postもありますよ)
第1引数に、読み込み対象のファイルパス(今回は"data.json"ですね)を記述します。(簡単!!)
通信が問題なく成功した場合、"then"が実行されます。(resにその結果が格納されています)
反対に、通信が失敗した場合は、"catch"が実行されます。(errにエラー内容が格納されています)
取得したデータを変換する
通信が成功して取得したデータを、JSONオブジェクトに変換します。
res.data.text().then(str=>{
let arr = JSON.parse(str);
console.log(arr);
});
これは特に解説することもありません。
"JSON.parse関数"を使って、JSONオブジェクトに変換しているだけです。
通信が成功し、JSONオブジェクトを確認する事ができました。(やりました!!)
Webサービスから読み込む場合
先ほどの例はローカルから読み込む例でしたが、
インターネット上にあるWebサービスからも、同様の手順で読み込む事ができます。
const option = {responseType: "blob"};
axios.get(WebサービスのURL, option).then(res=>{
// 通信が成功した場合
}).catch(err=>{
// 通信が失敗した場合
});
ファイルへのパスを、WebサービスのURLにするだけです。(簡単!!)
試しに、気象庁から東京の天気情報を取得してみましょう。
次のURLをコピーし、Axiosで読み込んでみましょう。
取得したデータは、先ほどと同じ要領で変換をする事ができます。
https://www.jma.go.jp/bosai/forecast/data/forecast/130000.json
東京都の天気情報を取得する事ができました。(やりました!!)
全体のコード
最後に、全体のコードを載せておきますね。
window.onload = (event)=>{
console.log("onload!!");
// JSON
const option = {responseType: "blob"};
axios.get("./data.json", option).then(res=>{
res.data.text().then(str=>{
let arr = JSON.parse(str);
console.table(arr);
});
}).catch(err=>{
console.log(err);
});
}
おまけ1:一度に複数のファイルにアクセスするには!?
一度に複数のファイルにアクセスし、その結果を利用したい場合があります。
その場合は、"Promise.all()"を利用することで簡単に実現することが可能です。
// Using Axios
const URL_WEATHER = "https://www.jma.go.jp/bosai/forecast/data/forecast/";
const option = {responseType: "blob"};
const ax1 = axios.get(URL_WEATHER + "210000.json", option);// 岐阜
const ax2 = axios.get(URL_WEATHER + "240000.json", option);// 三重
const ax3 = axios.get(URL_WEATHER + "230000.json", option);// 愛知
Promise.all([ax1, ax2, ax3]).then(res=>{
console.log("All completed!!");
for(let r of res) console.log(r);
}).catch(err=>{
console.log("Something went wrong...");
console.log(err);
});
おまけ2:Shift-JISのファイルを取り扱うには!?
"Shift-JIS"のファイルを読み込んだ場合は文字化してしまいます。
この場合は次の様にして"UTF-8"に変換をする必要があります。
// Axios
const option = {
responseType: "arraybuffer",
transformResponse: data=>new TextDecoder("sjis").decode(data)
};
axios.get("./sample.csv", option).then(res=>{
console.log(res.data);
}).catch(err=>{
console.log(err);
});
最後に
いかがでしたでしょうか。
とても簡単にファイルにアクセスする事が出来る事がわかったかと思います。
定番ライブラリだけあって、使い勝手が良いですよね!!
ここまで読んでいただき有難うございました。
Discussion