在當今互聯的網路環境中，客戶端和伺服器之間的高效資料交換至關重要。 Axios 是一個強大的 JavaScript 函式庫，它徹底改變了開發人員處理 HTTP 請求的方式。無論您是建立時尚的單頁應用程式還是強大的後端服務，Axios 都可以簡化 API 交互，使您的程式碼更簡潔、更易於維護。
什麼是 Axios？
Axios 是一個基於 Promise 的 HTTP 用戶端，可在瀏覽器和 Node.js 環境中無縫運作。它提供了一個直覺的 API，用於對 Web 資源執行 CRUD（建立、讀取、更新、刪除）操作，支援所有標準 HTTP 方法：GET、POST、PUT、DELETE、PATCH、HEAD 和 OPTIONS。
Axios 的主要特點
-
基於 Promise ：利用 JavaScript Promise 來實現乾淨的非同步程式碼。
-
瀏覽器和 Node.js 支援：可在多種環境中運作。
-
自動轉換：轉換請求和回應資料。
-
攔截器：允許自訂處理請求和回應。
-
錯誤處理：提供詳細的錯誤訊息。
-
請求取消：提供取消請求的功能。
-
TypeScript 支援：包含 TypeScript 定義。
開始使用 Axios
首先，使用 npm 安裝 Axios：
npm install axios然後，將其導入到您的專案中：
import axios from 'axios';使用 Axios 發出請求
讓我們來探討如何使用 Axios 來處理不同類型的 HTTP 請求：
get 請求
axios.get('https://api.example.com/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Error:', error.message);
});post 請求
const data = { name: 'John Doe', email: '[email protected]' };
axios.post('https://api.example.com/users', data)
.then(response => {
console.log('User created:', response.data);
})
.catch(error => {
console.error('Error:', error.message);
});put 請求
const updatedData = { name: 'Jane Doe' };
axios.put('https://api.example.com/users/1', updatedData)
.then(response => {
console.log('User updated:', response.data);
})
.catch(error => {
console.error('Error:', error.message);
});delete 請求
axios.delete('https://api.example.com/users/1')
.then(response => {
console.log('User deleted:', response.data);
})
.catch(error => {
console.error('Error:', error.message);
});Axios 進階功能
請求配置
Axios 允許您使用各種選項自訂您的請求：
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
},
headers: {'X-Requested-With': 'XMLHttpRequest'},
timeout: 1000,
withCredentials: true
})
.then(response => {
console.log(response);
})
.catch(error => {
console.error(error);
});攔截器
攔截器允許您在then或catch處理請求或回應之前攔截它們：
// Add a request interceptor
axios.interceptors.request.use(
config => {
// Do something before request is sent
return config;
},
error => {
// Do something with request error
return Promise.reject(error);
}
);
// Add a response interceptor
axios.interceptors.response.use(
response => {
// Any status code that lie within the range of 2xx cause this function to trigger
return response;
},
error => {
// Any status codes that falls outside the range of 2xx cause this function to trigger
return Promise.reject(error);
}
);錯誤處理
axios提供了詳細的錯誤訊息，讓除錯更容易：
function App() {
const handleClick = () => {
axios.get('https://api.example.com/data')
.then(response => {
console.log(response.data); // Handle success
})
.catch(error => {
if (error.response) {
// Server responded with a status code outside the 2xx range
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else if (error.request) {
// Request was made but no response received
console.log(error.request);
} else {
// Something happened in setting up the request
console.log('Error', error.message);
}
console.log(error.config); // Request config
});
};
return (
<button onClick={handleClick}>Click me to Test Error Handling</button>
);
}
export default App;結論
Axios 是一個用 JavaScript 發出 HTTP 請求的強大工具。無論您是取得資料、提交表單還是處理錯誤，Axios 都可以透過其乾淨且有效率的 API 簡化這些任務。透過了解如何有效使用 Axios，您可以提高程式碼的品質和可維護性，確保與 API 的順利互動。
將 Axios 合併到您的下一個專案中，體驗使用這個多功能庫處理 HTTP 請求的輕鬆！
原文出處：https://dev.to/vyan/learning-api-requests-with-axios-a-comprehensive-guide-for-2024-37li
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式