Promise 和 async/await 和 Callback 有什么区别？ - 前端面试题

Promise、async/await 和 Callback 都是在 JavaScript 中处理异步操作的机制。每种技术都有其特点和适用场景。

Callback

Callback 是一种较老的异步编程技术，它是将一个函数作为参数传递给另一个函数，并在那个函数执行完毕后调用。它最常见的用途是在进行文件操作或者请求网络资源时。

优点：

简单易懂，易于实现。

缺点：

容易导致 "回调地狱"（Callback Hell），即多个嵌套的回调函数使代码难以阅读和维护。
错误处理不方便，需要在每个回调中处理错误。

例子：

javascript
fs.readFile('example.txt', 'utf8', function(err, data) {
    if (err) {
        return console.error(err);
    }
    console.log(data);
});

Promise

Promise 是异步编程的一种解决方案，比传统的解决方案 —— 回调函数和事件 —— 更合理和更强大。它表示一个尚未完成但预期将来会完成的操作的结果。

优点：

提供了更好的错误处理机制，通过 .then() 和 .catch() 方法链。
避免了回调地狱，代码更加清晰和易于维护。
支持并行执行异步操作。

缺点：

代码仍然有些冗长。
可能不够直观，特别是对于新手。

例子：

javascript
const promise = new Promise((resolve, reject) => {
    fs.readFile('example.txt', 'utf8', (err, data) => {
        if (err) {
            reject(err);
        } else {
            resolve(data);
        }
    });
});

promise.then(data => {
    console.log(data);
}).catch(err => {
    console.error(err);
});

async/await

async/await 是建立在 Promise 上的语法糖，它允许我们以更同步的方式写异步代码。

优点：

代码更加简洁、直观。
更容易理解，特别是对于习惯了同步代码的开发者。
方便的错误处理，可以用传统的 try/catch 块。

缺点：

可能会导致性能问题，因为 await 会暂停函数的执行，直到 Promise 解决。
在某些情况下不够灵活，例如并行处理多个异步任务。

例子：

javascript
async function readFileAsync() {
    try {
        const data = await fs.promises.readFile('example.txt', 'utf8');
        console.log(data);
    } catch (err) {
        console.error(err);
    }
}

readFileAsync();

总结来说，Callback 是最基本的异步处理形式，Promise 提供了更强大的控制能力和错误处理机制，而 async/await 是在 Promise 基础上提高代码可读性和减少样板代码的语法糖。