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，或使用我們剛剛註冊的氣象網址，如下所示，之後的範例會予以省略。

import axios from "axios"
// targetURL使用的網址是範例，實際測試要搭配你的認證碼喔
let targetURL = "https://opendata.cwb.gov.tw/fileapi/v1/opendataapi/F-A0012-001?Authorization=CWB-1234ABCD-78EF-GH90-12XY-IJKL12345678&format=XML"

基本GET請求

• GET使用方法axios.get(uploadURL)

• 先來測試一下axios基本的GET，後面給個網址後，並定義then及catch，將相關的資訊印出即可

axios.get(targetURL)
.then(function (response) {
  // console.log(response) //<-- 你可以顯示完整的response
  console.log(response.data.cwbopendata.dataset);  //<-- response資料太多，我們顯示回傳的資料})
.catch(function (error) {
  console.log(error);
});

• 如果你印出完整的response，你會看到一連串的資訊回傳，status: 200代表GET成功囉!

• 如果你深入去探索回傳的資料，例如console.log(response.data.cwbopendata.dataset);，氣象的資料確實回傳囉!

基本POST請求

• 一樣的用法，但多了第二個參數，讓我們POST資料到後端

• POST使用方法axios.post(uploadURL, {你要上傳的資料})

// uploadURL
axios.get(uploadURL, {userName:"OK168", comment:"good~job"})
.then(function (response) {
  console.log(response) 
.catch(function (error) {
  console.log(error);
});

使用列表

• 基本的使用，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/user

• data: Object格式，僅作用於PUT/POST/DELETE/PATCH，可支援string、Browser支援的(FormData、 File、 Blob)及Node支援的Stream, Buffer
• auth: Object格式，存放認證相關資料

• <font color:"blue"> 注意: 想知道更多參數使用，可參考axios官網-Request Config章節

• 建立好的config，你可以直接餵給axios，或者在對應的方法，當作參數給它

// 建立一個config，指定好相關資訊，沒有定義method，預設就是Get
let config = {  
   baseURL:"https://opendata.cwb.gov.tw/fileapi/v1/opendataapi",
   url: "F-A0012-001?Authorization=CWB-1234ABCD-78EF-GH90-12XY-IJKL12345678&format=XML"}

axios(config).then(function (response) {
    // console.log(response)
    console.log(response.data.cwbopendata.dataset);  
  }).catch(function (error) {
    console.log(error);
  });

axios我要打10個 ～ all & spread

• axios支援實例化，例如let getResultA = axios.get("https://URL_A")，先來看個例子

let config = {
   baseURL:"https://opendata.cwb.gov.tw/fileapi/v1/opendataapi",
   url: "/F-A0012-001?Authorization=CWB-1234ABCD-78EF-GH90-12XY-IJKL12345678&format=JSON"}

let getResultA = axios(config);
let getResultB = axios.get("https://opendata.cwb.gov.tw/fileapi/v1/opendataapi/F-D0047-089?Authorization=CWB-1234ABCD-78EF-GH90-12XY-IJKL12345678&format=JSON");

axios.all([ getResultA, getResultB ]) // 將Promise放入axios.all()的參數陣列中，然後用 axios.spread依序發出api的動作
.then( axios.spread((resp)=>{
  console.log(resp.data);
}))
.catch((err)=>console.log(err))

• 這個做法與Promise.all的作法一樣，由於每個axios都是一個Promise，放入axios.all()參數陣列中，然後用 axios.spread依序發出api的動作

async...await封裝axios

• async...await封裝axios需要點技巧，看一下範例。

function getResult(delay){ 
   return new Promise((resolve, reject)=>{
      axios
      .get("https://opendata.cwb.gov.tw/fileapi/v1/opendataapi/F-D0047-089?Authorization=CWB-1234ABCD-78EF-GH90-12XY-IJKL12345678&format=JSON") //<-- 記得更新自己的認證碼
      .then((result)=>{
         setTimeout(resolve, delay);
         console.log(`after ${delay}ms and get:${result}`);
         
      })
   })
}

async function RunAllRequests(){
   try{
      await getResult(1000); //<-- 1秒後印出
      await getResult(2000); //<-- 2秒後印出
   }
   catch(err){
      console.log(err);
   }
}

RunAllRequests();

• 印出結果

after 1000ms and get:[object Object]
after 2000ms and get:[object Object]

結論

• 鐵人賽第27天，坦白說我覺得今天的內容需要點時間去消化，同時複習過去幾天的Promise課程，不過搞懂後，其實還是可以上手的！剩三天～繼續加油!
  

相關資源

• axios 官網
• axios 基本使用 & Config
• vue 中使用 async/await 将 axios 异步请求同步化处理