介紹
在現代 Web 開發中，發出 HTTP 請求是一項基本任務。無論您是從伺服器獲取資料、提交表單還是與 API 交互，您都需要可靠的工具來處理這些操作。雖然 JavaScript 提供了內建的 fetch API 來發出 HTTP 請求，但許多開發人員選擇使用 Axios 等第三方函式庫來增加功能和便利性。
為什麼我們需要 HTTP 請求工具？
處理 HTTP 請求和回應可能很複雜，尤其是在考慮錯誤處理、回應解析和請求配置時。 Axios 和 Fetch 等工具透過提供簡化流程的抽象和實用程式來簡化這些任務。它們有助於解決常見問題，例如：
樣板程式碼：簡化重複性任務，例如設定標頭和處理 JSON 回應。
錯誤處理：提供更一致且可管理的錯誤處理機制。
攔截器：允許對請求或回應進行預處理，例如新增身份驗證令牌。
取得API
Fetch API 是一種現代的內建 JavaScript 方法，用於發出 HTTP 請求。它是基於承諾的，與 XMLHttpRequest 等舊方法相比，提供了一種更直接的非同步操作方法。
例子
// Making a GET request using Fetch
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => console.log(data))
.catch(error => console.error('There was a problem with the fetch operation:', error));
Axios
Axios 是一個流行的用於發出 HTTP 請求的第三方函式庫。它與 Fetch 一樣基於承諾，但包含許多附加功能，使其更加方便和強大。
例子
// Making a GET request using Axios
axios.get('https://api.example.com/data')
.then(response => console.log(response.data))
.catch(error => console.error('There was a problem with the axios request:', error));
主要差異
1. JSON的預設處理
- fetch：
需要手動將回應資料轉換為 JSON。
fetch('https://api.example.com/data')
.then(response => response.json()) // Manual conversion
.then(data => console.log(data));
- axios：
自動解析 JSON 回應。
axios.get('https://api.example.com/data')
.then(response => console.log(response.data)); // Automatic conversion
2. 錯誤處理
- fetch：
僅拒絕網路錯誤的承諾，而不拒絕 HTTP 錯誤（例如，404 或 500 狀態程式碼）。
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.catch(error => console.error('Fetch error:', error));
- axios：
拒絕網路錯誤和 HTTP 錯誤的承諾。
axios.get('https://api.example.com/data')
.catch(error => console.error('Axios error:', error));
3. 請求配置
- fetch：
需要手動配置標題和方法等選項
fetch('https://api.example.com/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ key: 'value' })
});
- axios：
提供更簡潔、可讀的設定語法。
axios.post('https://api.example.com/data', { key: 'value' }, {
headers: {
'Content-Type': 'application/json'
}
});
攔截器
攔截器是 Axios 中的一項強大功能，它允許您在請求或回應被 then 或 catch 處理之前攔截它們。它們對於向每個請求加入身份驗證令牌或全域處理錯誤等任務很有用。
Axios 攔截器範例
// Adding a request interceptor
axios.interceptors.request.use(config => {
// Add an authorization header to every request
const token = 'your_token';
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
}, error => {
// Handle request error
return Promise.reject(error);
});
// Adding a response interceptor
axios.interceptors.response.use(response => {
// Handle successful response
return response;
}, error => {
// Handle response error
if (error.response.status === 401) {
// Handle unauthorized error
console.error('Unauthorized');
}
return Promise.reject(error);
});
結論
Fetch 和 Axios 都是發出 HTTP 請求的強大工具，但它們提供不同程度的便利性和功能。 Fetch 是一個原生的、現代的選項，非常適合簡單的用例，而 Axios 提供了更豐富的功能集，包括自動 JSON 處理、更好的錯誤管理以及用於請求和回應操作的攔截器。在它們之間進行選擇取決於您專案的特定需求以及您對簡單性與功能性的偏好。
透過了解每個工具的優點和差異，您可以做出更明智的決策並編寫更有效率和可維護的程式碼。
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式