每日JavaScript 4.21

📚 每日一个JavaScript小知识 🐍

每天花1分钟，解锁一个JavaScript实用技巧/冷知识！无论是新手还是老手，这里都有让你眼前一亮的编程干货。

✨ 今日主题：异步编程（Promise + Async/Await）

异步操作是前端开发的基石，Promise和Async/Await让回调地狱成为历史！

现在给大家带来的是由JavaScript倾情演出的《代码演进史》 ~

// 1. 回调地狱（Callback Hell）
function fetchData(callback) {
    setTimeout(() => callback('数据'), 1000);
}

fetchData(function(data) {
    processData(data, function(result) {
        saveResult(result, function() {
            console.log("完成！");
        });
    });
});

// 2. Promise 链式调用
function fetchData() {
    return new Promise(resolve => {
        setTimeout(() => resolve('数据'), 1000);
    });
}

fetchData()
    .then(processData)
    .then(saveResult)
    .then(() => console.log("完成！"))
    .catch(err => console.error(err));

// 3. Async/Await（终极方案）
async function main() {
    try {
        const data = await fetchData();
        const result = await processData(data);
        await saveResult(result);
        console.log("完成！");
    } catch (err) {
        console.error(err);
    }
}
main();

 💡 实用技巧

1.并行请求：

const [user, posts] = await Promise.all([
    fetch('/user'),
    fetch('/posts')
]);

2.超时控制：

function withTimeout(promise, timeout) {
    return Promise.race([
        promise,
        new Promise((_, reject) => 
            setTimeout(() => reject(new Error('超时')), timeout)
        )
    ]);
}

3.取消请求： 

const controller = new AbortController();
fetch('/data', { signal: controller.signal })
    .then(response => response.json())
    .catch(err => {
        if (err.name === 'AbortError') {
            console.log('请求被取消');
        }
    });

// 取消请求
controller.abort();

 

🔍 深度解析

• Promise状态：pending/fulfilled/rejected

• Async函数总是返回Promise

• 错误处理：try/catch vs .catch()

• 微任务队列与事件循环

你学会了吗？