JavaScript通过外卖订单讲解异步编程

// 点外卖的比喻：下单后留下电话号码，外卖到了打电话通知你
orderFood('pizza', function(pizza) {
    console.log(`我的${pizza}到了！可以开动了！`);
});
console.log('在等外卖的时候，我可以继续刷剧...');

// “回调地狱”出现了！
orderFood('pizza', function(pizza) {
    getDrink('cola', function(cola) {
        buyNapkins(function(napkins) {
            console.log(`准备好享用${pizza}+${cola}了，还有${napkins}张餐巾纸`);
            // 更多嵌套...
        });
    });
});

// 创建一个Promise就像下一个外卖订单
const foodOrder = new Promise((resolve, reject) => {
    // 模拟烹饪时间
    setTimeout(() => {
        const success = Math.random() > 0.1; // 90%的成功率
        success ? resolve('香喷喷的披萨') : reject('抱歉，烤箱坏了');
    }, 2000);
});
// 追踪订单状态
foodOrder
    .then(food => {
        console.log(`🎉 ${food}送达！`);
        return '吃完了，该收拾了'; // 可以继续返回新的Promise
    })
    .then(message => {
        console.log(message);
    })
    .catch(error => {
        console.log(`😢 ${error}`);
    })
    .finally(() => {
        console.log('这次订餐体验结束了');
    });
console.log('订单已下，我可以继续工作...');

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}`);
    }
}
// 模拟的异步函数
function orderPizza() {
    return new Promise(resolve => {
        setTimeout(() => resolve('🍕意大利香肠披萨'), 2000);
    });
}

console.log('1. 开始做饭');
setTimeout(() => {
    console.log('4. 定时器到时间了（饭煮好了）');
}, 0);
Promise.resolve()
    .then(() => {
        console.log('3. Promise微任务（尝一下味道）');
    });
console.log('2. 继续切菜');
// 输出顺序：
// 1. 开始做饭
// 2. 继续切菜  
// 3. Promise微任务（尝一下味道）
// 4. 定时器到时间了（饭煮好了）

// 模拟一个加载进度指示器
async function loadContentWithProgress() {
    const tasks = [
        '加载用户数据',
        '获取朋友圈',
        '下载图片',
        '初始化聊天'
    ];
    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('✅ 所有内容加载完成！');
}
// 使用Promise.race实现超时控制
function fetchWithTimeout(url, timeout = 3000) {
    const fetchPromise = fetch(url);
    const timeoutPromise = new Promise((_, reject) => {
        setTimeout(() => reject(new Error('请求超时')), timeout);
    });
    return Promise.race([fetchPromise, timeoutPromise]);
}