jQuery AJAX 異步回調中獲取響應數據的正確姿勢

問題現象

使用 $.post 或 $.get 時，回調函數中的 data 參數只能在回調內部使用，外部變量無法直接獲取異步請求的結果。

錯誤認知

var ajaxData = [];
$.post("/api/data", {param: 1}, function(data) {
    ajaxData.push(data.test);  // 這裡能訪問 data
});
console.log(ajaxData);  // 這裡執行時請求尚未完成，ajaxData 仍為空！

核心原理：異步非阻塞

• JavaScript 單線程事件循環模型
• AJAX 請求發起後，主線程繼續執行後續代碼
• 回調函數在請求完成後被推入任務隊列，稍後執行

解決方案

方案一：回調中處理業務邏輯（推薦）

$.post("/api/data", {param: 1}, function(data) {
    // 在回調內部直接使用數據
    renderUI(data);
    updateState(data);
    // 或觸發自定義事件
    $(document).trigger("dataLoaded", data);
});

方案二：Promise 化（現代寫法）

function fetchData() {
    return $.post("/api/data", {param: 1});  // 返回 Promise-like 對象
}

// 使用
fetchData().done(function(data) {
    console.log(data);  // 這裡拿到數據
}).fail(function(xhr) {
    console.error("請求失敗", xhr);
});

// 或 async/await（需 jQuery 3.0+）
async function loadData() {
    try {
        const data = await $.post("/api/data", {param: 1});
        console.log(data);
    } catch (err) {
        console.error(err);
    }
}

方案三：同步請求（強烈不推薦）

// 會阻塞主線程，導致頁面卡死，已棄用
$.ajax({
    url: "/api/data",
    async: false,  // 同步模式
    success: function(data) { ajaxData = data; }
});

最佳實踐總結

1. 接受異步本質：不要試圖將異步結果「拉」到同步流程中
2. 回調地獄解決：使用 Promise 鏈或 async/await 扁平化代碼
3. 錯誤處理：始終添加 .fail() 或 catch
4. 取消請求：組件卸載時調用 xhr.abort() 防止內存洩漏