前端萌新面试必备：回调函数和 Promise 对象

前端萌新的面试秘笈：熟稔回调函数和 Promise 对象

作为一名初入前端江湖的萌新，面试中若能驾驭回调函数和 Promise 对象，定能让你技高一筹，崭露头角。下面，我们就来一场头脑风暴，深入浅出地剖析这两大 JavaScript 宝典。

回调函数：异步编程的基石

回调函数，顾名思义，就是在另一个函数执行完毕后执行的函数。它类似于传统编程中的函数指针，将函数作为参数传递给另一个函数，从而在异步操作完成后执行指定任务。

举个栗子，小明准备做晚饭，他先把米饭煮上，然后利用这段空闲时间去洗菜。当米饭煮好时，触发一个回调函数，通知小明饭已经做好。这样，小明就能及时关火，避免煮成粥。

在 JavaScript 中，异步编程无处不在。为了避免浏览器阻塞，许多操作都是异步执行的，比如 AJAX 请求、定时器和 DOM 事件。回调函数就充当了连接异步操作和后续动作的桥梁。

Promise 对象：更优雅的异步处理

Promise 对象是 JavaScript 中用来处理异步操作的另一种方式，它比回调函数更加优雅和强大。它提供了一种更结构化的方式来管理异步操作，避免了回调函数层层嵌套的“回调地狱”。

Promise 对象的状态可以是三种：

• Pending：异步操作尚未完成
• Fulfilled：异步操作已成功完成
• Rejected：异步操作已失败

当异步操作完成后，Promise 对象会根据结果转为 Fulfilled 或 Rejected 状态。我们可以使用 .then() 方法来处理 Fulfilled 状态下的结果，使用 .catch() 方法来处理 Rejected 状态下的错误。

示例代码

下面是一个用 Promise 对象实现的小明做饭的例子：

const cookRice = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('米饭煮好了');
      resolve();
    }, 1000);
  });
};

const washVegetables = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('蔬菜洗好了');
      resolve();
    }, 500);
  });
};

const cookDinner = async () => {
  await cookRice();
  await washVegetables();
  console.log('晚饭做好了');
};

cookDinner();

在这个例子中，cookRice() 和 washVegetables() 函数都返回 Promise 对象。cookDinner() 函数使用 async/await 语法来处理这些 Promise 对象。当 cookRice() 完成后，程序执行 await washVegetables()，然后再执行 console.log() 语句。这样，我们就避免了回调函数的层层嵌套，代码更加清晰易懂。

结语

回调函数和 Promise 对象是前端开发中必不可少的工具。掌握它们的使用方法，能让你在面试中脱颖而出，在项目中游刃有余。记住，熟能生巧，多加练习，你就能成为一名前端高手！

---