# AJAX - axios 套件教學 ## 環境安裝 透過[ axios 套件連結](https://github.com/axios/axios) CDN 的方式，載入套件，並將程式碼放置於個人 JavaScript 檔案上方： CDN 連結： ```jsx= <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> ``` 連結放置處： **將 axios 套件 CDN 放置於個人 JavaScript 檔案上方** ```HTML= <!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`-嘗試串接外部資料 範例程式碼： ```javascript= axios.get('放入想撈取的 JSON 連結') .then(function (response) { //回傳的結果 console.log(response); //抓回來的 JSON 資料 console.log(response.data); //回傳的狀態碼 console.log(response.status); }); ``` - 範例練習：依照步驟將市政 FAQ JSON 檔案資料渲染在網頁上 <iframe height="300" style="width: 100%;" scrolling="no" title=" 8/26 (四) － axios-get" src="https://codepen.io/unayo/embed/rNweEwP?default-tab=js%2Cresult&theme-id=dark" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/unayo/pen/rNweEwP"> 8/26 (四) － axios-get</a> by unayo (<a href="https://codepen.io/unayo">@unayo</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> ## 透過函式設計處理非同步 - 範例：函式處理 axios-非同步 依步驟指引將臺中市夜間急診或24小時急診動物醫院名冊 JSON 檔案資料渲染在網頁上： <iframe height="300" style="width: 100%;" scrolling="no" title="8/27 (五) － 函式處理 axios-非同步" src="https://codepen.io/unayo/embed/jOwrNqq?default-tab=js%2Cresult&theme-id=dark" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/unayo/pen/jOwrNqq"> 8/27 (五) － 函式處理 axios-非同步</a> by unayo (<a href="https://codepen.io/unayo">@unayo</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> ###### tags: `JS` {%hackmd @unayojanni/H1Qq0uKkK %}