HackMD
AJAX - axios 套件教學
環境安裝
透過 axios 套件連結 CDN 的方式，載入套件，並將程式碼放置於個人 JavaScript 檔案上方：
CDN 連結：
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
連結放置處：
將 axios 套件 CDN 放置於個人 JavaScript 檔案上方
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 將 axios 套件 CDN 放置於個人 JavaScript 檔案上方 -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js">
</script>
<script src="all.js"></script>
</body>
</html>
axios.get-嘗試串接外部資料
範例程式碼：
axios.get('放入想撈取的 JSON 連結')
.then(function (response) {
//回傳的結果
console.log(response);
//抓回來的 JSON 資料
console.log(response.data);
//回傳的狀態碼
console.log(response.status);
});
- 範例練習：依照步驟將市政 FAQ JSON 檔案資料渲染在網頁上
透過函式設計處理非同步
- 範例：函式處理 axios-非同步
依步驟指引將臺中市夜間急診或24小時急診動物醫院名冊 JSON 檔案資料渲染在網頁上：
