JavaScript 異步編程：回調函數模式解決 AJAX 返回值 undefined 問題

問題代碼

function getA() {
    var a;
    $.ajax({
        type: "POST",
        url: "*******",
        async: false, // ❌ 同步請求：阻塞主線程、體驗差、已棄用
        success: function(result) {
            a = result;
        }
    });
    return a; // 同步模式下能返回，但強烈不推薦
}

核心誤區

• 同步 AJAX (async: false)：瀏覽器主線程阻塞，頁面凍結，Chrome 已在控制台警告，未來將移除
• 異步 AJAX (默認)：return a 執行時回調**尚未執行**，a 仍為 undefined
• setTimeout 無效：無法同步等待異步結果，JS 單線程事件循環機制決定

正確方案：回調函數 / Promise / async-await

方案一：回調函數（經典，兼容性最好）

function getA(callback) {
    $.ajax({
        type: "POST",
        url: "/api/getData",
        data: { id: 1234 },
        success: function(result) {
            callback(null, result); // 成功回調
        },
        error: function(xhr, status, error) {
            callback(error); // 失敗回調
        }
    });
}

// 使用
getA(function(err, data) {
    if (err) return console.error(err);
    console.log('拿到數據:', data);
    // 後續邏輯在這裡寫
});

方案二：Promise 包裝（現代標準）

function getA() {
    return new Promise((resolve, reject) => {
        $.ajax({
            type: "POST",
            url: "/api/getData",
            data: { id: 1234 },
            success: resolve,
            error: reject
        });
    });
}

// 使用 .then 鏈式調用
getA()
    .then(data => {
        console.log('數據:', data);
        return processData(data);
    })
    .then(processed => {
        // 下一步
    })
    .catch(err => console.error(err));

方案三：async/await（語法糖，最接近同步寫法）

// 需環境支持 (Babel/現代瀏覽器/Node.js)
async function handleData() {
    try {
        const data = await getA(); // 這裡「暫停」等待，不阻塞主線程
        console.log('數據:', data);
        // 後續同步風格代碼
    } catch (err) {
        console.error(err);
    }
}

handleData();

方案四：Fetch API + async/await（原生，無依賴）

async function getA() {
    const response = await fetch('/api/getData', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ id: 1234 })
    });
    if (!response.ok) throw new Error('HTTP ' + response.status);
    return response.json();
}

// 使用同方案三

為什麼不能「暫停」函數等待異步？

// JS 事件循環模型
// 主線程執行棧 → 微任務隊列 → 宏任務隊列

function syncWait() {
    // ❌ 無法實現：JS 無 sleep/await 原語阻塞主線程
    // while (!done) {} // 死循環會凍結頁面，事件循環無法處理網絡回調
}

**本質**：JS 單線程，**異步操作結果通過事件循環投遞到回調/微任務**，無法在發起函數中同步返回。

總結

**核心原則**：擁抱異步，不要試圖同步化。將「獲取數據後做什麼」寫在回調/then/await 後面。