[Node.js] Axios Snippets
Axios 是一個基於 Promise 的 HTTP 客戶端，適用於瀏覽器和 Node.js 環境。 本文整理常用的 Axios 程式碼片段與使用技巧。
基本使用
安裝
npm install axios
GET 請求
const axios = require('axios');
// 基本 GET 請求
axios.get('https://api.example.com/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
// 帶參數的 GET 請求
axios.get('https://api.example.com/data', {
params: {
id: 123,
name: 'example'
}
})
.then(response => console.log(response.data))
.catch(error => console.error(error));
POST 請求
// JSON 格式 POST
axios.post('https://api.example.com/data', {
name: 'John',
email: 'john@example.com'
})
.then(response => console.log(response.data))
.catch(error => console.error(error));
// 使用 async/await
async function postData() {
try {
const response = await axios.post('https://api.example.com/data', {
name: 'John',
email: 'john@example.com'
});
console.log(response.data);
} catch (error) {
console.error(error);
}
}
進階技巧
x-www-form-urlencoded 格式
處理 application/x-www-form-urlencoded 格式的請求：
const qs = require('qs');
axios.post('https://api.example.com/data',
qs.stringify({
name: 'John',
email: 'john@example.com'
}),
{
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}
);
或使用 URLSearchParams：
const params = new URLSearchParams();
params.append('name', 'John');
params.append('email', 'john@example.com');
axios.post('https://api.example.com/data', params);
攜帶 Cookie
讓請求自動攜帶 Cookie：
axios.get('https://api.example.com/data', {
withCredentials: true
});
// 或設定全域配置
axios.defaults.withCredentials = true;
處理 302 重定向
Axios 預設會自動跟隨重定向，但在某些情況下可能需要手動處理：
axios.get('https://api.example.com/data', {
maxRedirects: 0, // 不自動跟隨重定向
validateStatus: function (status) {
return status >= 200 && status < 400; // 接受 3xx 狀態碼
}
})
.then(response => {
if (response.status === 302) {
console.log('重定向到:', response.headers.location);
}
})
.catch(error => {
if (error.response && error.response.status === 302) {
console.log('捕獲到 302 重定向');
}
});
設定請求超時
axios.get('https://api.example.com/data', {
timeout: 5000 // 5 秒超時
})
.catch(error => {
if (error.code === 'ECONNABORTED') {
console.log('請求超時');
}
});
攔截器 (Interceptors)
// 請求攔截器
axios.interceptors.request.use(
config => {
// 在發送請求前做些什麼
config.headers.Authorization = 'Bearer ' + token;
return config;
},
error => {
return Promise.reject(error);
}
);
// 響應攔截器
axios.interceptors.response.use(
response => {
// 對響應數據做些什麼
return response;
},
error => {
// 對響應錯誤做些什麼
if (error.response.status === 401) {
// 處理未授權
}
return Promise.reject(error);
}
);
建立實例
const instance = axios.create({
baseURL: 'https://api.example.com',
timeout: 5000,
headers: {'X-Custom-Header': 'foobar'}
});
instance.get('/data')
.then(response => console.log(response.data));