為何要安裝axios

• 安裝 Axios 的核心目的就是為了提高開發效率、讓程式碼更乾淨、更好維護。它把發送網路請求時需要做的瑣碎雜事（轉格式、檢查錯誤、帶憑證）全部封裝成簡單好用的語法。

• 簡單來說，Axios 是一個專門用來在網頁上發送網路請求（HTTP 請求）的工具。

• 在開發網頁或應用程式時，你的前端網頁（客戶端）經常需要跟後端伺服器（API）拿資料，例如：拉取產品列表、送出登入表單、或是上傳圖片。Axios 就是幫你處理這段「溝通橋樑」的利器。

以下幫你整理為什麼要安裝它，以及它的核心作用：

為什麼不用內建的 fetch，要特地安裝 Axios？

現在瀏覽器其實都有內建一個叫 fetch 的 API 可以用來發送請求，但絕大多數前端工程師還是習慣安裝 Axios，主要是因為它解決了 fetch 的一些痛點，並提供很多自動化的貼心功能

1. 自動轉換 JSON 資料：
* 用內建的 fetch：你收到伺服器的回應後，必須自己多寫一行程式碼將它轉成 JSON 格式
* 用 Axios：它非常聰明，收到回應的當下就已經自動幫你轉成 JavaScript 的物件/陣列了，直接拿來用即可

2. 更直覺的錯誤處理（Error Handling）：
* 用 fetch：當伺服器回傳 404 Not Found 或 500 Server Error 時，fetch 不會自動跳到錯誤處理（catch區塊），你必須自己寫判斷式去檢查 response.ok。
* 用 Axios：只要 HTTP 狀態碼不是 2xx（代表失敗），它就會直接自動觸發錯誤處理，讓你用統一的邏輯抓漏。

3. 強大的「攔截器」（Interceptors）功能：
* 這是 Axios 最受歡迎的功能。你可以設定「請求攔截器」或「回應攔截器」。
* 實務應用： 在每一次發送請求前，自動在 Header 幫忙塞入使用者的登入驗證 Token（憑證）；或是當伺服器回傳 Token 過期時，自動幫使用者跳轉到登入頁面。這不用在每一支 API 重複寫，只要寫一次就全部通用。

4. 支援防禦 XSRF（跨站請求偽造）：
* 內建了一些安全性保護機制，幫你防範常見的網路攻擊

安裝方式

HTML:

js(axios語法結構):

打開HTML後，按F12進入console頁面會印出相關資訊

將外部資料寫入網頁裡

//HTML
<h1 class="title"></h1>

• axios.get(url) 會回傳一個 Promise（一個「承諾未來會有結果」的物件）
• .then() 裡的 function 會在請求「成功」拿到資料後才執行
• response.data 就是伺服器回傳的實際資料
• querySelector選擇元素，再使用textContent語法更改內容

非同步觀念

• 因JavaScript 是單執行緒，所以某些工作(網路請求、計時器)需要等待
• axios.get(url)會先去抓取資料(需要一些時間,所以先繼續往下執行其他程式碼,等結果回來了才處理)
• 所以往下執行console.log(ary)就先印出一個空陣列[]
• 其次.then() 裡的 function 拿到資料後才會執行＂資料已回傳＂

如何解決非同步
再加上一個函式