Promise处理异步操作的基本知识及常用api举例

 Promise，在实际的项目开发过程中，我们可能会经常碰到异步操作需要处理，比如说发送请求，比如说需要等待上一步的处理结果再执行下一步的逻辑等等。前端处理异步操作的方法一般都是用 【回调函数 | Promise | Async&Await】这三种方法。今天我们来讲一下promise

关于promise的解释

Promise是一种用于处理异步操作的对象，它代表了一个异步操作的最终完成（或失败）及其结果值的状态。Promise可以链式调用，并能处理多个异步任务，使得代码更加清晰易读。Promise对象是一个构造函数，用来生成Promise实例。Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject，它们是两个函数，由JavaScript引擎提供，不需要自己部署。

resolve函数的作用是，将Promise对象的状态从"未完成"变为"成功"，在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；

reject函数的作用是，将Promise对象的状态从"未完成"变为"失败"，在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。需要注意的是，它代表异步操作最终完成或者失败及其结果值的状态，那么我们就会有疑问，promise会有几种状态呢？

Promise的状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，才能决定当前是哪一种状态，任何其他操作都无法改变这个状态。

举例子

例子1：基础用法

在这个例子中，我们创建了一个新的Promise实例。Promise构造函数接受一个函数作为参数，这个函数有两个参数：resolve和reject，它们都是函数。在这个函数中，我们执行异步操作（例如setTimeout），如果成功，我们调用resolve函数并传入结果；如果失败，我们调用reject函数并传入错误。

let promise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => resolve("成功！"), 1000);
});

promise.then(
  result => console.log(result), // "成功！"
  error => console.log(error) // 不会执行
);

例子2：链式调用

在这个例子中，我们展示了Promise的链式调用。每个then方法都返回一个新的Promise，这使得我们可以将多个异步操作串联起来。

let promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve("第一步成功！"), 1000);
  
}).then(result => {
  console.log(result); // "第一步成功！"
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve("第二步成功！"), 1000);
  });
  
}).then(result => {
  console.log(result); // "第二步成功！"
});

例子3:错误处理

在这个例子中，我们在Promise的构造函数中直接调用了reject函数，表示异步操作失败。这种情况下，then方法的第二个参数（错误处理函数）会被执行。

let promise = new Promise((resolve, reject) => {
  reject("出错了！");
});

promise.then(
  result => console.log(result), // 不会执行
  error => console.log(error) // "出错了！"
);

关于Promise常用的api

Promise.all()

总结：Promise.all()，当且仅当Promise 都是 fulfilled 状态时，才会被then 接收到一个数组，数组内容分别对应Promise resolve的结果,当某一个Promise出现rejected时，catch会捕获第一个rejected的error。

// 示例 1
const Promise1 = new Promise((resolve, reject) => {
  resolve("promise1 完成");
});

const Promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 1000, "Promise2 完成");
});

const Promise3 = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Promise3 完成"), 100);
});

Promise.all([Promise1, Promise2, Promise3]).then((value) => {
  console.log(value);
});

// 1s 后打印 ['promise1 完成', 'Promise2 完成', 'Promise3 完成']

Promise.any()

总结：Promise.any()，接受一个promise数组，当这些promise中，其中有第一个状态改变成fullFilled时，就能在then里面被接收到，如果都是rejected时，能被catch到，并返回一个AggregateError。

const Promise1 = new Promise((resolve, reject) => {
  reject("promise1 完成");
});

const Promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 1000, "promise2 完成");
});

const Promise3 = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Promise3 完成"), 100);
});

Promise.any([Promise1, Promise2, Promise3])
    .then((result) => {
          console.log("Promise: ",result); 
    })
    .catch(err => {
        console.log("err:", err)
    })
// 100ms之后出入  Promise:  Promise3 完成

Promise.race()

总结：Promise.race() 接收一个promise 数组，通过赛跑的方式，看谁先完成（不管是fullFilled还是rejected）就获取相应的值resolve(res)被then接收，reject(err)会被catch到。

const Promise1 = new Promise((resolve, reject) => {
  resolve("promise1 完成");
});

const Promise2 = new Promise((resolve, reject) => {
  setTimeout(reject, 1000, "promise2 完成");
});

const Promise3 = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Promise3 完成"), 100);
});

Promise.race([Promise1, Promise2, Promise3])
    .then((result) => {
          console.log("Promise: ",result); // Promise:  promise1 完成
    })
    .catch(err => {
        console.log("err:", err)
    })

// Promise:  promise1 完成