前言
網頁前端最常見遇到要透過 HTTP Request 撈取 API 的資料。本文將會介紹 axios 這個套件,並透過 async 非同步技巧且將 GET 到的資料儲存到全域變數。
載入套件
axios 是一個非常流行的 JavaScript 函式庫,前端網頁可以透過 CDN 方式載入。
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
GET 請求
axios 回傳的物件是 Promise,所以我們可以用 .then
和 .catch
去處理成功和失敗結果。我的習慣會將它包成一個函式稱 getData()
並透過建立一個 Promise 回傳(resolve)撈到的結果。最後在主程式中透過 async 方式等待這段函式(getData()
)完成後在往下繼續執行。
// 全域變數
let data = [];
// 透過 axios 撈取 API 資料
function getData() {
return new Promise((resolve, reject) => {
axios('https://api.toys/api/iso_3166-1').then(
(response) => {
// GET response
const dataObject = response.data;
resolve(Object.assign(dataObject));
},
(error) => {
const message = error.response;
// erroe message.
console.log(message);
reject(message);
}
);
});
}
// 非同步方式等待取得資料
(async () => {
data = await getData();
console.log(data);
// 成功撈取資料以下繼續做其他事件...
})();
如果出現以下錯誤,就必須透過上面寫法才能解決。
Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules
Reference
鼓勵持續創作,支持化讚為賞!透過下方的 Like 拍手👏,讓創作者獲得額外收入~
版主10在2020年首次開設YouTube頻道,嘗試拍攝程式教學。想要了解更多的朋友歡迎關注我的頻道,您的訂閱就是最大的支持~如果想學其他什麼內容也歡迎許願XD
https://www.youtube.com/channel/UCSNPCGvMYEV-yIXAVt3FA5A
https://www.youtube.com/channel/UCSNPCGvMYEV-yIXAVt3FA5A