回到顶部

「 初音未来：歌姬计划 Mega39's+\游戏档案馆 」2023-06-07 「 戴拿&盖亚奥特曼\皮套摄影 」2024-08-02 「 宝可梦：白金\游戏档案馆 」2023-08-06 「 闪焰王牌/模玩摄影 」2024-08-06 「 多龙巴鲁托\模玩摄影 」2023-06-05 「 泽塔奥特曼\皮套摄影 」2023-06-07 「 阿尔宙斯\模玩摄影 」2023-06-07

Promise的全部用法 #148

Anuluca Date : 2024-08-14 Tags : 2

1.单独使用

const promiseFunc = (param) => {
  return new Promise((resolve, reject) => {
    if (param) {
      setTimeout(() => {
        resolve({
          code: "200",
          data: {
            param,
            message: "成功",
          },
        });
      }, 1000);
    } else {
      setTimeout(() => {
        reject({
          code: "400",
          data: {
            param,
            message: "失败",
          },
        });
      }, 1000);
    }
  });
};

getData(1)
  .then((res) => {
    // 成功
    console.log("res", res);
  })
  .catch((err) => {
    // 失败
    console.log("err", err);
  })
  .finally(() => {
    // 最终执行
    console.log("我是 finally 总是最后执行");
  });

2.Promise.all

Promise.all([promise1,promise2,promise3])
promise1、promise2、promise3全部执行完毕，有一个报错回调则执行reject

const promise1 = new Promise((resolve, reject) => {
  console.log("promise1");
  setTimeout(() => {
    resolve("promise1：成功");
  }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
  console.log("promise2");
  setTimeout(() => {
    resolve("promise2：成功");
  }, 1000);
});

const promise3 = new Promise((resolve, reject) => {
  console.log("promise3");
  setTimeout(() => {
    resolve("promise3：成功");
  }, 1000);
});

Promise.all([promise1, promise2, promise3])
  .then((res) => {
    console.log("res", res);
  })
  .catch((err) => {
    console.log("err", err);
  });

3.Promise.allSettled

Promise.allSettled([promise1,promise2,promise3])
promise1、promise2、promise3全部执行完毕，即使有报错也永远会执行then回调

const promise1 = new Promise((resolve, reject) => {
  console.log("promise1");
  setTimeout(() => {
    resolve("promise1：成功");
  }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
  console.log("promise2");
  setTimeout(() => {
    resolve("promise2：成功");
  }, 1000);
});

const promise3 = new Promise((resolve, reject) => {
  console.log("promise3");
  setTimeout(() => {
    reject("promise3：失败");
  }, 1000);
});

Promise.allSettled([promise1, promise2, promise3])
  .then((res) => {
    console.log("res", res); // 永远执行这个
  })
  .catch((err) => {
    console.log("err", err);
  });

4.Promise.race

Promise.race([promise1,promise2,promise3])
promice、promise2、promise3谁最快执行完就进入回调

const promise1 = new Promise((resolve, reject) => {
  console.log("promise1");
  setTimeout(() => {
    resolve("promise1：成功");
  }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
  console.log("promise2");
  setTimeout(() => {
    resolve("promise2：成功");
  }, 2000);
});

const promise3 = new Promise((resolve, reject) => {
  console.log("promise3");
  setTimeout(() => {
    reject("promise3：失败");
  }, 3000);
});

Promise.race([promise1, promise2, promise3])
  .then((res) => {
    console.log("res", res); // "promise1：成功"
  })
  .catch((err) => {
    console.log("err", err);
  });