# axios ### 前後分離好簡單 </br> *YoMin Su* --- ## 基礎環節 ---- ### 這個是什麼東東？ ---- 讓你可以在網頁，或是其他執行JS/TS的環境下，能發送RESTful請求的工具，若你學過XMLHttpRequest(XHR)或是Fetch(HTML5)，那它跟前面兩者有相同的效果，但更容易使用。 ---- ### 為什麼要學這個？ ---- 在目前前後端分離的設計架構下，許多網頁在顯示資料時，並非是網頁本身儲存著資料，而是在瀏覽的當下，跟後端伺服器索取要顯示的內容，透過這樣的方法，使前後端能進行溝通，並讓雙方都專注在各自需要負責的部分，僅需溝通好內容如何定義即可。 ---- ### 相較於 XHR / Fetch 的好處？ ---- 在使用上，axios相對於另外兩者，更容易使用，也更適合用於前端開發(需要額外寫的程式碼較少)，這部分細節將在實作環節時說明。 ---- ### 其他程式語言有這樣的東西嗎？ ---- 有，因為這種類型的請求，其背後的原理，都是在實作RESTful架構的細節，因此不同的語言自然也會有對應設計好的方法可以使用。 ---- | Language | Package | | -------- | ----------------------------------------- | | Golang | 靠語言原生的 net/http 就可以 | | Java | 內建有 HttpClient 與 HttpRequest 物件可用 | | Python | Requests套件，pip install一下 | --- ## 實際來應用一下 ---- ### 先建立一個標準的JS專案 ----  ---- ### 加入我們要使用到的 axios 套件 ----  ---- ### 來寫點東西吧！ ---- 來抓一下中央氣象局提供的資料 > [中央氣象局-開放資料平台](https://opendata.cwb.gov.tw/index) ---- #### 點選左上角的「登入/註冊」，取得自己的授權碼  ---- #### 將自己的授權碼紀錄下來，別分享給其他人  ---- ### 來看看有哪些資料可以索取 > [資料擷取API線上說明文件](https://opendata.cwb.gov.tw/dist/opendata-swagger.html) ---- ### 以最近有感的地震為例  ---- ### 練習時間 透過axios來實作一次 ---- ### 學長的範例 > [kukina622/weather](https://github.com/kukina622/weather) --- ## 建立 axios 實例 ---- ### 總是會有要往同一個伺服器不斷送請求的時候，一直寫相同的網址有點麻煩... ---- ```javascript= import axios from 'axios'; const api = axios.create({ baseURL: 'https://www.google.com', timeout: 3000, headers: { 'Content-Type': 'application/json' }, withCredentials: true, }); api.get('/') .then((res) => console.log(res)) .catch((err) => console.log(err)); ``` --- ## 在未來使用時可能會遇到的問題 ---- ### 1. 後端能接受的資料格式不是JSON怎麼辦？ ---- 這是個好問題，一般來說，axios 會幫我們把帶著Body的請求，內容以JSON的格式送出，但總有不吃JSON的時候，這時，可以參考官方文件的說明，裡面有提到如何送出『application/x-www-form-urlencoded』跟『multipart/form-data』兩種表單類型的方法。 > 也可以傳送上傳檔案喔，一樣在文件中有說明 > 連結點我：[axios/axios](https://github.com/axios/axios#readme) ---- ### 2. 在送出請求時，應該要連同Cookie一起過去，但卻沒有？！ ---- 需要確定一下你的 axios 實例有沒有把 withCredentials 這個參數設定為true，預設是不會攜帶的，因此若是需要透過Cookie資料驗證身份的系統，請求這類型路由時，都會失敗。 > 但這會有另一個 CORS不能為『\*』的問題就是了... ---- ### 3. 我的功能一路寫下來，但執行順序好像有點問題... ---- 這是因為神奇的非同步在『正常工作』導致的，若我們不是以 async/await 的方式去設計方法的話，NodeJS就會幫我們把同步方法先執行完，再去把後面非同步的部分跑完，在使用上，需要注意這個小小的，但很重要的問題！ --- ## End of Lesson > Bye~