JavaScript 异步编程核心知识点

一、异步编程的意义

在前端开发中，JavaScript 是单线程语言，同步代码执行会阻塞页面渲染和交互。异步编程能让耗时操作（如接口请求、定时器、文件读取）在后台执行，不阻塞主线程，提升页面体验。

常见的异步场景：AJAX/axios 请求、setTimeout/setInterval、DOM 事件、Promise/async-await 等。

二、异步编程的发展历程

• 第一代：回调函数（Callback）—— 简单但易形成「回调地狱」
• 第二代：Promise —— 解决回调地狱，支持链式调用
• 第三代：async/await —— 基于 Promise，以同步写法实现异步，可读性最高

三、核心代码示例

Promise 基本使用：

// 创建Promise对象
const getApiData = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const data = { code: 200, data: "技术分享数据" };
            if (data.code === 200) {
                resolve(data); // 成功回调
            } else {
                reject("请求失败"); // 失败回调
            }
        }, 1000);
    });
};

// 调用Promise
getApiData().then(res => {
    console.log(res.data);
}).catch(err => {
    console.error(err);
});
            

async/await 简化Promise（推荐用法）：

// 结合async-await使用
const getData = async () => {
    try {
        const res = await getApiData();
        console.log(res.data);
    } catch (err) {
        console.error(err);
    }
};
getData();
            

四、关键注意点

• await 只能在 async 函数内部使用，否则会报错
• Promise 状态一旦改变（成功/失败），就会永久保持该状态
• 多个异步请求并行可使用 Promise.all()，提高执行效率
• async 函数始终返回一个 Promise 对象