JavaScript通過外賣訂單講解異步編程

更新時間：2026年01月02日 10:34:17 作者：JS_Likers

這篇文章主要介紹了JavaScript通過外賣訂單講異步編程,如果你曾經(jīng)遇到過網(wǎng)頁卡死的情況,或者好奇為什么有些操作不會阻塞頁面交互,那么這篇文章就是為你準備的,需要的朋友可以參考下

同步vs異步-點外賣的智慧

想象一下你要準備一頓晚餐：

同步方式（不推薦）：

走進廚房開始煮飯
站在灶臺前盯著鍋，什么都不做，直到飯煮好（20分鐘）
飯好了才開始洗菜切菜
再花30分鐘炒菜
總共耗時：50分鐘

異步方式（聰明做法）：

開始煮飯（設置定時器）
在飯煮的同時洗菜切菜
飯好了的提示音響起時處理飯
繼續(xù)炒菜
總共耗時：35分鐘

JavaScript的異步編程就像是那個聰明的廚師，讓多個任務可以同時進行！

回調(diào)函數(shù)-JavaScript的電話通知

最早的異步處理方式是回調(diào)函數(shù)：

// 點外賣的比喻：下單后留下電話號碼，外賣到了打電話通知你
orderFood('pizza', function(pizza) {
    console.log(`我的${pizza}到了！可以開動了！`);
});
console.log('在等外賣的時候，我可以繼續(xù)刷劇...');

但問題來了——如果你需要按順序做多件事呢？

// “回調(diào)地獄”出現(xiàn)了！
orderFood('pizza', function(pizza) {
    getDrink('cola', function(cola) {
        buyNapkins(function(napkins) {
            console.log(`準備好享用${pizza}+${cola}了，還有${napkins}張餐巾紙`);
            // 更多嵌套...
        });
    });
});

這就像是：等外賣→外賣到了買飲料→飲料到了買紙巾……效率太低了！

Promise-外賣訂單追蹤系統(tǒng)

ES6帶來了Promise，就像外賣平臺的應用，可以追蹤訂單狀態(tài)：

// 創(chuàng)建一個Promise就像下一個外賣訂單
const foodOrder = new Promise((resolve, reject) => {
    // 模擬烹飪時間
    setTimeout(() => {
        const success = Math.random() > 0.1; // 90%的成功率
        success ? resolve('香噴噴的披薩') : reject('抱歉，烤箱壞了');
    }, 2000);
});
// 追蹤訂單狀態(tài)
foodOrder
    .then(food => {
        console.log(`?? ${food}送達！`);
        return '吃完了，該收拾了'; // 可以繼續(xù)返回新的Promise
    })
    .then(message => {
        console.log(message);
    })
    .catch(error => {
        console.log(`?? ${error}`);
    })
    .finally(() => {
        console.log('這次訂餐體驗結束了');
    });
console.log('訂單已下，我可以繼續(xù)工作...');

async/await-像寫同步代碼一樣寫異步

ES7的async/await讓異步代碼看起來像同步代碼一樣直觀：

async function enjoyDinner() {
    try {
        console.log('開始準備晚餐...');
        // 看起來是同步的，但實際上是異步的！
        const pizza = await orderPizza();
        console.log(`${pizza}準備好了`);
        const drink = await orderDrink();
        console.log(`${drink}也到了`);
        // 這兩個可以同時進行！
        const [napkins, movie] = await Promise.all([
            buyNapkins(),
            loadMovie()
        ]);
        console.log(`完美！有${pizza}、${drink}、${napkins}和電影${movie}`);
    } catch (error) {
        console.log(`晚餐計劃失敗：${error}`);
    }
}
// 模擬的異步函數(shù)
function orderPizza() {
    return new Promise(resolve => {
        setTimeout(() => resolve('??意大利香腸披薩'), 2000);
    });
}

事件循環(huán)-JavaScript的時間管理大師

JavaScript是單線程的，但它有一個神奇的事件循環(huán)機制：

console.log('1. 開始做飯');
setTimeout(() => {
    console.log('4. 定時器到時間了（飯煮好了）');
}, 0);
Promise.resolve()
    .then(() => {
        console.log('3. Promise微任務（嘗一下味道）');
    });
console.log('2. 繼續(xù)切菜');
// 輸出順序：
// 1. 開始做飯
// 2. 繼續(xù)切菜  
// 3. Promise微任務（嘗一下味道）
// 4. 定時器到時間了（飯煮好了）

簡單來說：

同步任務立即執(zhí)行
微任務（Promise）在當前任務結束后立即執(zhí)行
宏任務（setTimeout）在微任務之后執(zhí)行

實際應用-有趣的例子

// 模擬一個加載進度指示器
async function loadContentWithProgress() {
    const tasks = [
        '加載用戶數(shù)據(jù)',
        '獲取朋友圈',
        '下載圖片',
        '初始化聊天'
    ];
    for (let i = 0; i < tasks.length; i++) {
        // 模擬每個任務的耗時
        await new Promise(resolve => 
            setTimeout(resolve, Math.random() * 1000 + 500)
        );
        const progress = ((i + 1) / tasks.length) * 100;
        console.log(`?? ${tasks[i]}... 進度：${progress.toFixed(0)}%`);
    }
    console.log('? 所有內(nèi)容加載完成！');
}
// 使用Promise.race實現(xiàn)超時控制
function fetchWithTimeout(url, timeout = 3000) {
    const fetchPromise = fetch(url);
    const timeoutPromise = new Promise((_, reject) => {
        setTimeout(() => reject(new Error('請求超時')), timeout);
    });
    return Promise.race([fetchPromise, timeoutPromise]);
}