tags: 鐵人賽 React javascript nodejs
鐵人賽第27天，今天要來介紹一下一個取資料的利器axios；axios方便、好用，支援相當多的瀏覽器，自然受到前端開發者的親睞
先到氣象資料開放平臺申請帳號
- 為了測試
axios，先到氣象資料開放平臺申請帳號，申請之後，到會員資訊->API授權碼，點選取得授權碼，出現授權碼後，複製記下來。
使用方法
- 這個連結提到如何使用，節錄上面的教學，讓大家快速了解。
※ URL： https://opendata.cwb.gov.tw/fileapi/v1/opendataapi/{dataid}?Authorization={apikey}&format={format}
{dataid} 為各資料集代碼 (參照：資料清單) ex.F-A0012-001
{apikey} 為會員帳號對應之授權碼 ex.CWB-1234ABCD-78EF-GH90-12XY-IJKL12345678
{format} 為資料格式，請參照各資料集頁面確認可下載之檔案格式 ex.XML、CAP、JSON、ZIP、KMZ、GRIB2
※ 範例：https://opendata.cwb.gov.tw/fileapi/v1/opendataapi/F-A0012-001?Authorization=CWB-1234ABCD-78EF-GH90-12XY-IJKL12345678&format=XML- dataid: 這個連結可查詢對應api的資料項編號
- apikey: 就是你的認證碼那段文字
- dataid: 你要的格式, JSON, XML…
- 上面的網址範例，搭配三個變數，基本上你就可以打API囉!
介紹並安裝axios
- 還記得我們這幾天練習的
Promise吧！，axios就是基於Promise開發，因此，使用它就跟使用Promise的then/catch/finally一樣熟悉! - 安裝axios:
npm install axios - 使用前，在
Node底下一樣先用import將axios引入，搭配你要打的URL，或使用我們剛剛註冊的氣象網址，如下所示，之後的範例會予以省略。
基本GET請求
GET使用方法axios.get(uploadURL)- 先來測試一下
axios基本的GET，後面給個網址後，並定義then及catch，將相關的資訊印出即可
- 如果你印出完整的
response，你會看到一連串的資訊回傳，status: 200代表GET成功囉!
- 如果你深入去探索回傳的資料，例如
console.log(response.data.cwbopendata.dataset);，氣象的資料確實回傳囉!
基本POST請求
- 一樣的用法，但多了第二個參數，讓我們
POST資料到後端 POST使用方法axios.post(uploadURL, {你要上傳的資料})
使用列表
- 基本的使用，
axios都有提供，依照參數給予對應的資料，就可直接使用囉! config的部分我們在下個章節說明
axios.request(config)
axios.get(url [，config])
axios.delete(url [，config])
axios.head(url [，config])
axios.post(url [，data [，config]])
axios.put(url [，data [，config]])
axios.patch(url [，data [，config]])axios(config)
config是object格式，主要定義有:method: default是GET，可定義使用的方法url: api的網址, ex: '/user'baseURL: 放在url前面的基本網址,axios會拼成 baseURL+url, ex:baseURL: 'https://hello.com/api', axios打出去會是: https://hello.com/api/userdata:Object格式，僅作用於PUT/POST/DELETE/PATCH，可支援string、Browser支援的(FormData、File、Blob)及Node支援的Stream, Bufferauth:Object格式，存放認證相關資料- <font color:”blue”> 注意: 想知道更多參數使用，可參考axios官網-Request Config章節
- 建立好的
config，你可以直接餵給axios，或者在對應的方法，當作參數給它
axios我要打10個 ～ all & spread
axios支援實例化，例如let getResultA = axios.get("https://URL_A")，先來看個例子
- 這個做法與
Promise.all的作法一樣，由於每個axios都是一個Promise，放入axios.all()參數陣列中，然後用axios.spread依序發出api的動作
async…await封裝axios
async...await封裝axios需要點技巧，看一下範例。
- 印出結果
after 1000ms and get:[object Object]
after 2000ms and get:[object Object]結論
- 鐵人賽第27天，坦白說我覺得今天的內容需要點時間去消化，同時複習過去幾天的
Promise課程，不過搞懂後，其實還是可以上手的！剩三天～繼續加油!
