在jQuery 中，雖然本身不直接支援async/ await，但可以結合現代JavaScript 的Promise和async/await來處理非同步請求。$.ajax本質上返回的是一個Promise對象，這意味著你可以使用async/await來簡化非同步程式碼的寫法。
1. 基本用法
假設你有一個jQuery$.ajax請求，你可以將它包裝在async函數中，並使用await來等待請求完成。
範例程式碼
async function sendDataAsync() {
try {
let response = await $.ajax({
url: '/YourController/YourAction',
type: 'POST',
data: { inputData: 'someData' },
contentType: 'application/json'
});
console.log('服务器回馈信息:', response);
} catch (error) {
console.error('发生错误:', error);
}
}
2. 詳細步驟
1. 定義一個async函數
你可以將AJAX 請求封裝在一個async函數中。這樣，函數在遇到await時會暫停，直到非同步操作完成後繼續執行。
2. 使用await等待AJAX 請求
$.ajax回傳一個Promise，因此你可以使用await來等待它完成，並取得結果。
3. 處理錯誤
使用try/catch區塊來擷取並處理AJAX 請求中的錯誤。
3. 結合async/await和jQuery AJAX 請求
以下是一個更完整的例子，展示如何使用async/await來進行非同步的AJAX 請求，發送資料到伺服器並處理返回資料。
伺服器端程式碼（ASP.NET Core 範例）
[HttpPost]
public JsonResult YourAction(string inputData)
{
var result = new { message = "成功接收数据: " + inputData };
return Json(result);
}
前端程式碼（使用async/ await）
async function sendDataAsync() {
try {
// 发起异步的 AJAX 请求
let response = await $.ajax({
url: '/YourController/YourAction', // 替换为你的 URL
type: 'POST',
data: JSON.stringify({ inputData: '一些数据' }), // 发送 JSON 数据
contentType: 'application/json', // 指定数据类型
});
// 请求成功时，处理返回的结果
console.log('服务器回馈信息:', response.message);
alert('服务器回馈信息: ' + response.message);
} catch (error) {
// 处理请求中的错误
console.error('发生错误:', error);
alert('发生错误: ' + error.statusText);
}
}
// 调用异步函数
sendDataAsync();
4. 處理多個非同步AJAX 請求
你也可以使用async/await來處理多個並行或串列的AJAX 請求。
串行請求（一個接一個執行）
async function sendMultipleRequests() {
try {
let response1 = await $.ajax({ url: '/api/request1', type: 'GET' });
console.log('请求1完成:', response1);
let response2 = await $.ajax({ url: '/api/request2', type: 'GET' });
console.log('请求2完成:', response2);
} catch (error) {
console.error('请求失败:', error);
}
}
並行請求（同時執行多個請求）
async function sendParallelRequests() {
try {
let [response1, response2] = await Promise.all([
$.ajax({ url: '/api/request1', type: 'GET' }),
$.ajax({ url: '/api/request2', type: 'GET' })
]);
console.log('请求1和请求2同时完成:', response1, response2);
} catch (error) {
console.error('请求失败:', error);
}
}
5. 總結
$.ajax回傳一個Promise，你可以用async/await來處理它。- 使用
async/await可以讓程式碼更具可讀性，避免回調地獄。 - 用
try/catch處理AJAX 請求中的錯誤，確保程式碼健壯。
透過使用async/ await，可以更直觀地編寫非同步程式碼，尤其在處理多個請求時，它比傳統的回呼函數方式更加簡潔清晰。