异步编程：回调与 Promise

← 返回课程JavaScript 基础 › 第 11 关

进度 0%

第 11 关：异步编程：回调与 Promise

JavaScript入门

📖 本课目标

本关属于《JavaScript 基础》第 11 课。阅读右侧代码模板，理解每一行的作用，然后动手修改并完成练习。

🎯 本课要点

异步编程：回调与 Promise
1. 回调函数

🛠 学习方式

阅读右侧代码模板中的注释与实现
修改代码，尝试达成新的效果
点击「运行」查看实际输出
确认理解后点击「提交」标记本关完成

💡 说明

本关为 JavaScript，浏览器可直接运行代码并显示真实输出。

main.pytest.py

// 异步编程：回调与 Promise

// 1. 回调函数
function fetchData(url, callback) {
    console.log("请求中:", url);
    setTimeout(() => {
        callback(null, { status: 200, data: "响应数据" });
    }, 100);
}

fetchData("/api/users", (err, res) => {
    if (err) { console.log("错误:", err); return; }
    console.log("回调结果:", res);
});

// 2. Promise
function fetchUser(id) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (id > 0) {
                resolve({ id, name: "用户" + id, level: id * 10 });
            } else {
                reject("无效的用户 ID");
            }
        }, 100);
    });
}

// 使用 Promise
fetchUser(1)
    .then(user => console.log("Promise 结果:", user))
    .catch(err => console.log("错误:", err));

// 3. async/await（最推荐的方式）
async function loadDashboard() {
    console.log("\n--- 加载仪表盘 ---");
    try {
        const user = await fetchUser(5);
        console.log("用户:", user.name, "等级:", user.level);
        
        // 并行请求
        const [profile, stats] = await Promise.all([
            fetchUser(1),
            fetchUser(2)
        ]);
        console.log("并行加载:", profile.name, "和", stats.name);
        
    } catch (error) {
        console.log("加载失败:", error);
    }
    console.log("加载完成 ✓");
}

loadDashboard();

⚠️ 请勿运行 while(true) 死循环，会卡死本页

点击「运行」或「提交代码」查看结果

📖 查看本课说明

第 11 关：异步编程：回调与 Promise

JavaScript · 入门 · 《JavaScript 基础》

异步编程：回调与 Promise
1. 回调函数

本关可在浏览器直接运行。