Promise入门指南：揭开前端面试题的奥秘

2023-12-28 10:34:10

作为前端开发者，熟练掌握Promise至关重要。这种异步编程范式允许我们优雅地处理异步操作，提升代码的可读性和可维护性。为了加深您的理解，本文将从几个前端面试题入手，探讨Promise的本质和使用方法。

Promise基础

Promise是一种表示异步操作最终完成或失败的JavaScript对象。它有三种状态：

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

Promise用法

创建Promise：

const promise = new Promise((resolve, reject) => {
  // 执行异步操作
  if (success) {
    resolve('成功');
  } else {
    reject('失败');
  }
});

处理Promise：

promise.then(
  (result) => {
    // 异步操作成功时执行
  },
  (error) => {
    // 异步操作失败时执行
  }
);

面试题1：以下代码的输出是什么？

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Resolved');
  }, 3000);
});

console.log('Start');
promise.then((result) => {
  console.log(result);
});
console.log('End');

答案：

Start
End
Resolved

Promise是异步的，因此console.log('End');在console.log(result);之前执行。

面试题2：使用Promise改写以下回调函数

const getData = (callback) => {
  setTimeout(() => {
    const data = '数据已获取';
    callback(data);
  }, 3000);
};

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

答案：

const getData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = '数据已获取';
      resolve(data);
    }, 3000);
  });
};

getData().then((data) => {
  console.log(data);
});

面试题3：Promise的链式调用

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(1);
  }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(2);
  }, 2000);
});

promise1
  .then((result1) => {
    console.log(result1);
    return promise2;
  })
  .then((result2) => {
    console.log(result2);
  });

输出：

1
2

Promise的链式调用允许我们轻松处理多个异步操作，无需使用嵌套回调。

面试题4：Promise的异常处理

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('发生了错误');
  }, 3000);
});

promise.then(
  (result) => {
    console.log(result);
  },
  (error) => {
    console.log(error);
  }
);

输出：

发生了错误

Promise的catch()方法可以用来处理异常。

面试题5：Promise的并行执行

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(1);
  }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(2);
  }, 2000);
});

Promise.all([promise1, promise2]).then((results) => {
  console.log(results);
});