jquery ajax 如何使用async / await

在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，可以更直觀地編寫非同步程式碼，尤其在處理多個請求時，它比傳統的回呼函數方式更加簡潔清晰。