1.使用Promise鏈
當需要按順序逐個發送 POST 請求時,可以使用 Axios 庫的 Promise 鏈來實現。在每個 POST 請求成功后,可以觸發下一個請求。這里有一個簡單的示例:
首先,確保已經在 HTML 文件中引入了 Axios 庫:
<!DOCTYPE html>
<html>
<head><title>使用 Axios</title><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body><!-- 在這里寫你的 HTML 內容 --><script>// 這里寫 Axios 的 JavaScript 代碼
</script></body>
</html>
接下來是一個按順序發送 POST 請求的示例代碼:
// 一系列待發送的數據數組
const postData = [{ data: 'data1' },{ data: 'data2' },{ data: 'data3' }
];// 遞歸函數來逐個發送 POST 請求
function sendPostRequest(index) {// 邊界情況:如果已經發送完所有請求,結束遞歸if (index === postData.length) {console.log('All requests sent');return;}// 發送 POST 請求axios.post('YOUR_API_ENDPOINT', postData[index]).then(response => {// 處理請求成功的情況console.log(`Request ${index + 1} sent successfully`);// 繼續發送下一個請求sendPostRequest(index + 1);}).catch(error => {// 處理請求失敗的情況console.error(`Error sending request ${index + 1}:`, error);// 繼續發送下一個請求sendPostRequest(index + 1);});
}// 啟動第一個 POST 請求
sendPostRequest(0);
這段代碼中,sendPostRequest 函數使用遞歸來逐個發送 POST 請求。每次請求成功或失敗后,它會觸發下一個請求,直到所有的請求都被發送完畢。確保替換 ‘YOUR_API_ENDPOINT’ 為實際的 API 終點。
2.async和await
當使用 async/await 時,可以更清晰地編寫異步操作,實現按順序逐個發送 POST 請求。以下是使用 async/await 實現的示例:
const postData = [{ data: 'data1' },{ data: 'data2' },{ data: 'data3' }
];// 模擬發送 POST 請求的函數
function sendPostRequest(data) {return new Promise((resolve, reject) => {// 模擬異步請求,這里可以使用實際的 axios.postsetTimeout(() => {console.log(`Request sent for: ${data.data}`);resolve(`Response for: ${data.data}`);}, 1000); // 模擬請求延遲 1 秒鐘});
}// 使用 async/await 實現逐個發送 POST 請求
async function sendSequentialRequests() {for (let i = 0; i < postData.length; i++) {try {const response = await sendPostRequest(postData[i]);console.log(response);} catch (error) {console.error('Error sending request:', error);}}console.log('All requests sent');
}// 調用函數開始發送請求
sendSequentialRequests();
這個例子中,sendPostRequest 函數模擬發送 POST 請求的操作,并返回一個 Promise。sendSequentialRequests 函數使用 async/await 在 for 循環中按順序逐個發送 POST 請求,并使用 try/catch 處理請求成功和失敗的情況。確保將 sendPostRequest 替換為實際發送 POST 請求的函數。