axios
axiosとは
ブラウザや node.js で動く Promise ベースの HTTP クライアント。
jQueryで言うところのjQuery.ajaxであり、非同期にHTTP通信を行いたいときに容易に実装できる。
非同期通信の書き方② async/await
■async
非同期関数を定義する関数宣言のこと。
関数の前にasyncを宣言することにより、非同期関数を定義できる。
関数の前にasyncを宣言することにより、非同期関数を定義できる。
async function sample() {}
■await
async function内でPromiseの結果（resolve、reject）が返されるまで待機する。
関数の前にawaitを指定すると、その関数のPromiseの結果が返されるまで待機する。
関数の前にawaitを指定すると、その関数のPromiseの結果が返されるまで待機する。
thenより簡素に記述できる
async function sample() {
const result = await axios.get(api/itemlist.json)
// await axios.get(api/itemlist.json)のPromiseの結果が返ってくるまで以下は実行されない
console.log(result);
}
then（成功時）、catch（エラー時）の出し分けをasync/awaitで使うには
async function sample() {
try{
const result = await axios.get(api/itemlist.json)
// await axios.get(api/itemlist.json)のPromiseの結果が返ってくるまで以下は実行されない
console.log(result);
} catch(err) {
console.log(err);
}
}
■参考サイト
非同期通信の書き方② then
■then
async/await が無い時代に、then を使ってた
axios.get('/itemlist.json')
.then(function (response) {
// 通信が成功した時の処理
console.log(response);
})
.catch(function (error) {
// 通信が失敗した時の処理
console.log(error);
})
.finally(function () {
// 通信が成功・失敗に関わらず常に実行する処理
});
■参考サイト
■promise について
axiosで取得するデータはpromiseを返す。
promiseは、取得データの結果、正常データ「resolve」、エラー「reject」が入る。
詳しい内容は、下記サイトが参考になります。