返回

从剖析 Promise 知识点入手，掌握解题技巧

前端

解题之道：分析与剖析 Promise 知识点

一、Promise 基础

  1. Promise 是什么？

Promise 是 JavaScript 中表示异步操作的最终完成或失败的内部对象。它提供了一种更优雅、更简洁的方式来处理异步操作。

  1. Promise 的状态有哪些？

Promise 有三种状态：Pending、Fulfilled、Rejected。Pending 表示操作正在进行中，Fulfilled 表示操作成功完成，Rejected 表示操作失败。

  1. 如何创建 Promise？

Promise 通过调用构造函数创建，构造函数接受一个执行器函数作为参数。执行器函数接收两个参数：resolve 和 reject。resolve 用于将 Promise 状态变为 Fulfilled，reject 用于将 Promise 状态变为 Rejected。

  1. 如何使用 Promise？

Promise 可以通过 then 方法使用。then 方法接受两个参数：onFulfilled 和 onRejected。onFulfilled 用于处理 Promise Fulfilled 的情况，onRejected 用于处理 Promise Rejected 的情况。

二、Promise 进阶

  1. Promise 的链式调用是怎么回事？

Promise 的链式调用是指一个 Promise 的 then 方法返回的 Promise 可以继续调用 then 方法，以此形成一个链条。链式调用可以使代码更加简洁，更易于阅读。

  1. 如何处理 Promise 的异常？

Promise 的异常可以通过 then 方法的第二个参数 onRejected 来处理。onRejected 函数可以捕获 Promise Rejected 的原因，并进行相应的处理。

  1. 如何取消 Promise？

Promise 无法被取消。一旦 Promise 被创建，它就会一直运行，直到状态变为 Fulfilled 或 Rejected。

  1. 如何并发执行多个 Promise？

并发执行多个 Promise 可以使用 Promise.all() 方法。Promise.all() 方法接受一个 Promise 数组作为参数，并返回一个新的 Promise。新的 Promise 会在所有 Promise 都 Fulfilled 时变为 Fulfilled，或任何一个 Promise Rejected 时变为 Rejected。

  1. 如何并行执行多个 Promise？

并行执行多个 Promise 可以使用 Promise.race() 方法。Promise.race() 方法接受一个 Promise 数组作为参数，并返回一个新的 Promise。新的 Promise 会在第一个 Promise Fulfilled 或 Rejected 时变为 Fulfilled 或 Rejected。

三、Promise 实战

  1. 使用 Promise 模拟 setTimeout() 方法
function delay(ms) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, ms);
  });
}

delay(1000).then(() => {
  console.log('1 second passed');
});
  1. 使用 Promise 实现一个简单的 Ajax 请求
function get(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(xhr.responseText);
      } else {
        reject(new Error('请求失败'));
      }
    };
    xhr.onerror = () => {
      reject(new Error('请求失败'));
    };
    xhr.send();
  });
}

get('https://example.com').then((data) => {
  console.log(data);
}).catch((error) => {
  console.error(error);
});
  1. 使用 Promise 实现一个简单的轮询机制
function poll(url, interval) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(xhr.responseText);
      } else {
        reject(new Error('请求失败'));
      }
    };
    xhr.onerror = () => {
      reject(new Error('请求失败'));
    };
    xhr.send();

    setTimeout(() => {
      poll(url, interval).then((data) => {
        resolve(data);
      }).catch((error) => {
        reject(error);
      });
    }, interval);
  });
}

poll('https://example.com', 1000).then((data) => {
  console.log(data);
}).catch((error) => {
  console.error(error);
});
  1. 使用 Promise 实现一个简单的并行任务执行器
function parallel(tasks) {
  return Promise.all(tasks.map((task) => {
    return new Promise((resolve, reject) => {
      task((err, data) => {
        if (err) {
          reject(err);
        } else {
          resolve(data);
        }
      });
    });
  }));
}

parallel([
  (callback) => {
    setTimeout(() => {
      callback(null, 'Task 1 completed');
    }, 1000);
  },
  (callback) => {
    setTimeout(() => {
      callback(null, 'Task 2 completed');
    }, 2000);
  },
  (callback) => {
    setTimeout(() => {
      callback(null, 'Task 3 completed');
    }, 3000);
  }
]).then((results) => {
  console.log(results);
}).catch((error) => {
  console.error(error);
});

希望通过对这 13 道题的剖析，你能对 Promise 有更深入的理解，并能从容应对 Promise 编程中的各种挑战。