当前位置：首页 > article >正文

构建一个简单的Promise

article 2025/1/6 13:50:28

构建一个简单的Promise

我们以之前举例的彩票为例，构建一个Promise

构建一个Promise的示例代码如下

//Promise构造函数中传入一个执行器函数，接受两个参数，一个是异步操作成功调用的的函数，一个是异步操作失败调用的函数
const lotteryPromise = new Promise(function (resolve, reject) {});

这里我们简化一个，假设我们中奖的概率是50%,未中奖的概率是50%

const lotteryPromise = new Promise(function (resolve, reject) {
  if (Math.random() >= 0.5) {
    resolve('恭喜你中奖了💴'); //这里记住，不管如何，这里始终是我们成功调用要传入的东西
  } else {
    reject('感谢你对公益做出的贡献☺');//同上，这里始终是我们调用失败要传入的东西
  }
});

接下来，我们就使用这个Promise

lotteryPromise.then(res => console.log(res).catch(err => console.error(err)));

在这里插入图片描述

当然，我们这里是是一个随机数，多刷新几次也就会成功

在这里插入图片描述

当然，上面并不算是一个异步，我们可以通过定时器的异步方式来得到我们的Promise

const lotteryPromise = new Promise(function (resolve, reject) {
  console.log('正在开奖中。。。🤞🤞🤞');
  setTimeout(function () {
    if (Math.random() >= 0.5) {
      resolve('恭喜你中奖了💴');
    } else {
      reject(new Error('感谢你对公益做出的贡献☺'));
    }
  }, 2000);
});

lotteryPromise.then(res => console.log(res)).catch(err => console.error(err));

在这里插入图片描述

这个示例就是一个简单把异步行为都变成了Promise

将setTimeout转换为Promise

为什么我们需要将setTimeout转换为Promise呢？setTimeout它非常常用，它的作用就是使用回调函数的方式来处理异步操作，前面我们说过，使用回调函数处理异步的操作可能会导致‘回调地狱’，而Promise链式更具有结构化，这里我们举一个简单的例子

const wait = function (seconds) {
  return new Promise(function (resolve) {
    setTimeout(resolve, seconds * 1000);
  });
};

wait(2)
  .then(() => {
    console.log('等待两秒钟');
    return wait(1);
  })
  .then(() => console.log('等待一秒钟'));