ES6 面试题 | 07.精选 ES6 面试题(Promise)

🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6
🍨 阿珊和她的猫_CSDN个人主页
🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》
🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

什么是Promise？如何使用Promise处理异步操作？

Promise 是 JavaScript 中的一种异步操作处理对象，它用于表示一个异步操作的结果。Promise 对象提供了一种简洁、统一的方式来处理异步操作的成功、失败以及回调。

使用 Promise 处理异步操作的一般步骤如下：

1. 创建 Promise 对象：使用 new Promise() 构造函数创建一个 Promise 对象。

2. 定义异步操作：在 Promise 对象的构造函数中，使用 resolve 和 reject 方法来定义异步操作的成功和失败处理逻辑。

3. 处理成功情况：使用 resolve 方法处理异步操作成功的情况，并传递操作的结果作为参数。

4. 处理失败情况：使用 reject 方法处理异步操作失败的情况，并传递错误信息作为参数。

5. 使用 then 方法：使用 then 方法注册成功和失败的回调函数。如果异步操作成功，会执行成功回调函数；如果异步操作失败，会执行失败回调函数。

6. 使用 catch 方法：使用 catch 方法捕获 Promise 对象的错误，并执行错误处理回调函数。

以下是一个简单的示例，演示如何使用 Promise 处理异步操作：

// 创建 Promise 对象
let promise = new Promise((resolve, reject) => {
  // 异步操作，例如发起 HTTP 请求
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => resolve(data))
    .catch(error => reject(error));
});

// 使用 then 方法处理成功情况
promise.then(data => {
  console.log('操作成功，结果为:', data);
});

// 使用 catch 方法处理失败情况
promise.catch(error => {
  console.error('操作失败，错误信息:', error);
});

在上面的示例中，我们使用 Promise 对象来发起一个异步的 HTTP 请求，并使用 then 方法处理请求成功的情况，使用 catch 方法处理请求失败的情况。通过使用 Promise，我们可以以一种简洁、易读的方式处理异步操作的成功和失败情况。

如何在Promise中处理多个异步操作？

在 Promise 中处理多个异步操作可以使用 Promise 的链式调用来实现。链式调用是指将多个 Promise 操作逐个连接起来，前一个 Promise 的成功或失败状态会影响到下一个 Promise 的执行。

以下是一个使用 Promise 处理多个异步操作的示例：

// 异步操作 1：发送请求 A
fetchDataA().then(dataA => {
  // 异步操作 2：发送请求 B
  fetchDataB(dataA).then(dataB => {
    // 异步操作 3：发送请求 C
    fetchDataC(dataB).then(dataC => {
      // 处理所有异步操作的结果
      console.log('结果:', dataC);
    }).catch(error => {
      // 处理任何一个异步操作的失败情况
      console.error('错误:', error);
    });
  }).catch(error => {
    // 处理任何一个异步操作的失败情况
    console.error('错误:', error);
  });
}).catch(error => {
  // 处理第一个异步操作的失败情况
  console.error('错误:', error);
});

在上面的示例中，我们使用 Promise 的链式调用来依次发送三个异步请求，并在每个 Promise 的成功回调函数中处理相应的结果。如果任何一个异步操作失败，都会跳转到相应的 catch 块中进行错误处理。

通过使用 Promise 的链式调用，我们可以方便地处理多个异步操作，并确保它们按照顺序执行。同时，每个异步操作的失败都可以被捕获和处理，提高了代码的可靠性。

如何在Promise中传递参数？

在 Promise 中传递参数可以通过两种方式：在创建 Promise 对象时传递参数，或者在 Promise 的回调函数中传递参数。

以下是两种方式的示例：

1. 在创建 Promise 对象时传递参数：

let promise = new Promise((resolve, reject) => {
  // 在此处处理异步操作，并通过 resolve 和 reject 传递参数
});

// 使用 then 方法处理成功情况
promise.then(result => {
  console.log('操作成功，结果为:', result);
});

// 使用 catch 方法处理失败情况
promise.catch(error => {
  console.error('操作失败，错误信息:', error);
});

2. 在 Promise 的回调函数中传递参数：

let promise = new Promise((resolve, reject) => {
  // 在此处处理异步操作，并通过 resolve 和 reject 传递参数
  resolve(42);
});

// 使用 then 方法处理成功情况，并传递参数
promise.then(result => {
  console.log('操作成功，结果为:', result);
}, error => {
  console.error('操作失败，错误信息:', error);
});

无论是在创建 Promise 对象时还是在回调函数中，都可以通过 resolve 和 reject 方法传递参数。这些参数将在 Promise 的成功回调函数或失败回调函数中作为参数传递给相应的处理函数。

通过传递参数，我们可以在 Promise 的处理函数中获取更多关于异步操作的结果或错误信息，以便进行更具体的处理。

如何在Promise中处理回调函数的参数？

在 Promise 中处理回调函数的参数有以下几种常见的方式：

1. 使用 then 方法：then 方法可以接收两个参数，第一个参数是成功回调函数，第二个参数是失败回调函数。如果 Promise 成功执行，会调用成功回调函数，并将 Promise 的结果作为参数传递给它；如果 Promise 失败，会调用失败回调函数，并将错误信息作为参数传递给它。

let promise = new Promise((resolve, reject) => {
  // 异步操作
  resolve(42);
});

promise.then(result => {
  console.log('操作成功，结果为:', result);
}, error => {
  console.error('操作失败，错误信息:', error);
});

2. 使用 catch 方法：catch 方法用于捕获 Promise 失败时的错误信息，并执行相应的处理逻辑。

let promise = new Promise((resolve, reject) => {
  // 异步操作
  reject(new Error('出错了'));
});

promise.catch(error => {
  console.error('操作失败，错误信息:', error);
});

3. 使用 async/await 语法：async/await 可以将 Promise 的处理代码写得更加简洁和易读。

let promise = new Promise((resolve, reject) => {
  // 异步操作
  resolve(42);
});

async function handlePromise() {
  try {
    const result = await promise;
    console.log('操作成功，结果为:', result);
  } catch (error) {
    console.error('操作失败，错误信息:', error);
  }
}

handlePromise();

在上述代码中，我们使用 then 方法处理 Promise 的成功情况，使用 catch 方法处理 Promise 的失败情况。我们还可以使用 async/await 语法将 Promise 的处理代码写得更加简洁和易读。无论哪种方式，都可以通过参数传递来处理回调函数的参数。