JavaScript 使用 axios 呼叫 API 示範(QueryString, Token 參數)

我們團隊平時在前後端傳接基本上都是走 API，有時候前端同仁呼叫 API 遇到問題雖然可以直接使用 swagger UI 測試，但是在前端程式碼的部分因為筆者主要是開發後端，在前端沒有學的那麼勤，還是比較常使用 jQuery 呼叫 API ，無法直接協助前端同仁解決問題，於是打算多練練 axios，並將學到的內容記錄下來。

安裝

使用 CDN:

    
<script src="https://cdn.jsdelivr.net/npm/axios@1.3.2/dist/axios.min.js"></script>
    

基礎 Get 請求

以取得假日日曆表為例:

    
axios.get('https://cdn.jsdelivr.net/gh/ruyut/TaiwanCalendar/data/2023.json')
    .then(function (response) { // 只有成功會執行
        console.log("HTTP 狀態碼:", response.status);
        console.log("data:", response.data);
    })
    .catch(function (error) { // 只有失敗會執行
        console.log(error);
    })
    .finally(function () { // 成功或失敗都會執行
        console.log("結束");
    });
    

axios.get 的 get 可以替換為 post, put, patch, request, delete, head, options ，上面的寫法也等效於下面這樣:

    
    axios({
        method: 'get',
        url: 'https://cdn.jsdelivr.net/gh/ruyut/TaiwanCalendar/data/2023.json',
    })
        .then(function (response) { // 只有成功會執行
            console.log("HTTP 狀態碼:", response.status);
            console.log("data:", response.data);
        })
        .catch(function (error) { // 只有失敗會執行
            console.log(error);
        })
        .finally(function () { // 成功或失敗都會執行
            console.log("結束");
        });

    

then, catch, finally 都是可選的，下面示範時將會省略

呼叫 API 並傳入 Body

post, put, patch 都可以這樣使用 (官網說明 delete 也可以，但筆者在測試時無法接收到)

    
axios.post('http://localhost:5090/User', {
    "name": "ruyut",
    "email": 'a@ruyut.com'
})
    

中間 name, email 的部分會放在 Body，接收到的內容如下:

    
{"name":"ruyut","email":"a@ruyut.com"}
    

補充: axios 要使用 delete 方法並附加 body 參數，需要依照下列方式才能夠帶入 body :

    
axios.post('http://localhost:5090/User', {
	data:{
    	"name": "ruyut",
    	"email": 'a@ruyut.com'
    }
})
    

簡單來說就是要多包一層 data

查詢參數 queryString

目標效果:

    
http://localhost:5090/User?Name=ruyut&Email=a@ruyut.com
    

當然直接可以帶參數在網址後面，不過如果使用物件資料則可以使用下面的方式

    
    axios.get('http://localhost:5090/User', {
        params: {
            "name": "ruyut",
            "email": 'a@ruyut.com'
        }
    })
    

Bearer Token

    
let token = 'your-token'
axios.get('https://localhost:7183/api/user/credential', {
    headers: {
        Authorization: `Bearer ${token}` // Bearer 跟 token 中間有一個空格
    }
})
    

參考資料：
Github - axios