面试题：JavaScript中回调函数与Promise的基本差异

Question

请详细阐述JavaScript中回调函数和Promise在处理异步操作时，在语法结构、错误处理方面的基本差异。

Answer 1

语法结构差异

1. 回调函数：通过将一个函数作为参数传递给另一个函数来实现异步操作。当异步操作完成时，被传递的函数（回调函数）会被调用。例如：

function getData(callback) {
    setTimeout(() => {
        const data = { message: '异步操作完成' };
        callback(data);
    }, 1000);
}

getData((result) => {
    console.log(result);
});

2. Promise：使用new Promise((resolve, reject) => {... })创建一个Promise对象。resolve用于处理成功的情况，reject用于处理失败的情况。使用.then()方法处理成功的回调，.catch()方法处理失败的回调。例如：

function getData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const success = true;
            if (success) {
                const data = { message: '异步操作完成' };
                resolve(data);
            } else {
                reject(new Error('异步操作失败'));
            }
        }, 1000);
    });
}

getData()
  .then((result) => {
        console.log(result);
    })
  .catch((error) => {
        console.error(error);
    });

错误处理差异

1. 回调函数：错误处理通常通过在回调函数的参数中传递错误对象来实现。开发者需要手动检查每个回调函数的第一个参数是否为错误对象。例如：

function getData(callback) {
    setTimeout(() => {
        const success = false;
        if (success) {
            const data = { message: '异步操作完成' };
            callback(null, data);
        } else {
            callback(new Error('异步操作失败'));
        }
    }, 1000);
}

getData((error, result) => {
    if (error) {
        console.error(error);
    } else {
        console.log(result);
    }
});

2. Promise：错误处理更加统一，通过.catch()方法集中处理Promise链中任何一个环节抛出的错误。只要Promise被reject，后续的.catch()就会捕获到错误，而不需要在每个.then()中手动检查错误。例如：

function getData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const success = false;
            if (success) {
                const data = { message: '异步操作完成' };
                resolve(data);
            } else {
                reject(new Error('异步操作失败'));
            }
        }, 1000);
    });
}

getData()
  .then((result) => {
        console.log(result);
    })
  .catch((error) => {
        console.error(error);
    });

在链式调用中，如果一个.then()抛出错误，后续的.catch()同样可以捕获到，而不需要在每个.then()中重复处理错误，使代码更加简洁和易维护。