Promise介绍和使用

最新推荐文章于 2024-05-06 09:44:33 发布

c103363

最新推荐文章于 2024-05-06 09:44:33 发布

阅读量2.9k

点赞数 75

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/c103363/article/details/136179425

版权

Promise是什么

Promise是一种在JavaScript中用于处理异步操作的编程模式。它是一种代表了未来可能完成或失败的操作的对象。

简单说Promise里面保存着一个未来才会结束事件的结果，通常为异步操作
从语法上说，promise 是一个对象，从它可以获取异步操作的的最终状态（成功或失败）。
Promise是一个构造函数，对外提供统一的 API，自身有all、reject、resolve、race等方法，原型上有then、catch等方法。
粗暴一点的说他就是一种承诺，承诺过一段时间，会给你一个结果，这个结果可以是成功也可以是失败

Promise 是异步编程的一种解决方案，在传统的JavaScript开发中，异步操作通常通过回调函数进行处理。这种方式在处理多个异步操作时容易导致回调地狱，代码可读性较差。而Promise则提供了一种更优雅的方式来处理异步操作。

Promise对象特点

Promise对象代表异步操作，具有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）
这个状态由异步操作的结果决定，不受外界影响，一旦状态改变，就不会再改变，称为resolved（已定型）
无论何时添加回调函数，都能立即得到这个结果。这与事件不同，事件如果错过了就无法获取结果

Promise使用

new Promise((resolve, reject) {
  // resolve 表示成功的回调
  // reject 表示失败的回调
}).then((res) {
  // 成功的函数
}).catch((err) {
  // 失败的函数
})

new一个Promise对象，Promise内部接收了一个函数作为参数，该函数就是Promise构造函数的回调函数，该函数中有两个参数resolve、reject，这两个参数函数

resolve函数

在Promise中，resolve是一个函数，它是一个内部函数，用于将一个Promise对象的状态从未完成（pending）转变为已完成（fulfilled）。resolve函数接受一个参数，即Promise对象的最终结果，该结果将被传递给Promise对象的then()方法中的成功回调函数。
resolve函数可以在Promise对象的执行函数中调用，以表示异步操作成功完成，并将最终结果传递给后续的then()方法。

以下是一个示例，展示了resolve函数的使用：

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

promise.then((result) => {
  console.log("异步操作成功，结果是：" + result);
});

在上述示例中，我们创建了一个Promise对象promise，并在其执行函数中调用了resolve函数。在setTimeout的回调函数中，我们将异步操作的结果设置为"操作成功"，然后调用resolve函数。

当resolve函数被调用时，Promise对象的状态会从未完成转变为已完成，并将结果作为参数传递给后续的then()方法。在这个例子中，then()方法指定的成功回调函数将被调用，并打印出"异步操作成功，结果是：操作成功"。

需要注意的是，一旦Promise对象的状态转变为已完成（fulfilled），它将永久保持在该状态，无法再次转变为已拒绝（rejected）。因此，在调用resolve函数后，Promise对象将不再触发拒绝状态，而是一直保持已完成状态。如果需要表示操作失败的情况，应该使用reject函数来将Promise对象的状态设置为已拒绝。

reject函数

在Promise中，reject是一个函数，它是一个内部函数，用于将一个Promise对象的状态从未完成（pending）转变为已拒绝（rejected）。reject函数接受一个参数，即Promise对象的拒绝原因，该原因将被传递给Promise对象的catch()方法或后续的then()方法中的失败回调函数。
reject函数可以在Promise对象的执行函数中调用，以表示异步操作失败，并将拒绝原因传递给后续的catch()方法或失败回调函数。

以下是一个示例，展示了reject函数的使用：

const promise = new Promise((resolve, reject) => {
  // 模拟异步操作
  setTimeout(() => {
    reject("操作失败");
  }, 1000);
});

promise.catch((error) => {
  console.log("异步操作失败，错误是：" + error);
});

在上述示例中，我们创建了一个Promise对象promise，并在其执行函数中调用了reject函数。在setTimeout的回调函数中，我们将异步操作的拒绝原因设置为"操作失败"，然后调用reject函数。

当reject函数被调用时，Promise对象的状态会从未完成转变为已拒绝，并将拒绝原因作为参数传递给后续的catch()方法或失败回调函数。在这个例子中，catch()方法指定的回调函数将被调用，并打印出"异步操作失败，错误是：操作失败"。

需要注意的是，一旦Promise对象的状态转变为已拒绝（rejected），它将一直保持在该状态，无法再次转变为已完成（fulfilled）。因此，在调用reject函数后，Promise对象将不再触发已完成状态，而是一直保持已拒绝状态。如果需要表示操作成功的情况，应该使用resolve函数来将Promise对象的状态设置为已完成。

then()方法

在Promise中，then()方法用于添加回调函数来处理异步操作的结果。它是Promise对象原型上的方法，接受两个参数：onFulfilled和onRejected，分别表示在Promise对象进入已完成状态和已拒绝状态时要执行的回调函数。
当Promise对象进入已完成状态时，即异步操作成功完成时，onFulfilled函数会被调用，并将完成的结果作为参数传递给它。这样可以在回调函数中处理异步操作成功后的结果。
当Promise对象进入已拒绝状态时，即异步操作失败时，onRejected函数会被调用，并将拒绝的原因作为参数传递给它。这样可以在回调函数中处理异步操作失败的情况。
then()方法返回一个新的Promise对象，使得可以进行链式调用。如果在then()方法的回调函数中返回一个值或Promise对象，它将成为下一个then()方法的参数。

以下是一个示例，展示了then()方法的使用：

const promise = new Promise((resolve, reject) => {
  // 模拟异步操作
  setTimeout(() => {
    const random = Math.random();
    if (random < 0.5) {
      resolve("操作成功");
    } else {
      reject("操作失败");
    }
  }, 1000);
});

promise
  .then((result) => {
    console.log("操作成功，结果是：" + result);
    return "新的结果";
  })
  .then((newResult) => {
    console.log("处理新的结果：" + newResult);
  })
  .catch((error) => {
    console.log("操作失败，错误是：" + error);
  });

在上述示例中，我们创建了一个Promise对象promise，模拟了一个异步操作。在then()方法中，我们添加了一个成功回调函数(result) => {…}，用于处理异步操作成功的结果。如果异步操作成功，onFulfilled函数将被调用，并将结果作为参数传递给它。在这个例子中，如果random小于0.5，则异步操作被认为是成功的，onFulfilled函数会打印出"操作成功，结果是：操作成功"。

在then()方法的回调函数中，我们还可以返回一个新的值或Promise对象。在上述示例中，我们返回了字符串"新的结果"。这样，下一个then()方法将会接收到这个新的结果，并执行相应的回调函数。

如果异步操作失败，即random大于等于0.5，onRejected函数将被调用，并将拒绝的原因作为参数传递给它。在这个例子中，onRejected函数会打印出"操作失败，错误是：操作失败"。

需要注意的是，如果没有提供onRejected回调函数，或者在then()链中没有添加catch()方法来处理错误，Promise对象的异常将会被抛出并可能导致未捕获的异常。因此，建议始终在Promise链中添加catch()方法来处理错误情况。

catch()方法

在Promise中，catch()方法用于指定当Promise对象进入已拒绝状态时要执行的回调函数，用于处理异步操作的错误情况。它是Promise对象原型上的方法。
catch()方法接受一个参数，即一个回调函数，该回调函数会在Promise对象进入已拒绝状态时被调用，并接收拒绝的原因作为参数。
使用catch()方法可以捕获Promise链中的错误，并执行相应的错误处理逻辑，防止错误被抛出并导致未捕获的异常。

以下是一个示例，展示了catch()方法的使用：

const promise = new Promise((resolve, reject) => {
  // 模拟异步操作
  setTimeout(() => {
    const random = Math.random();
    if (random < 0.5) {
      resolve("操作成功");
    } else {
      reject("操作失败");
    }
  }, 1000);
});

promise
  .then((result) => {
    console.log("操作成功，结果是：" + result);
  })
  .catch((error) => {
    console.log("操作失败，错误是：" + error);
  });

在上述示例中，我们创建了一个Promise对象promise，模拟了一个异步操作。在then()方法中，我们添加了一个成功回调函数(result) => {…}，用于处理异步操作成功的结果。如果异步操作成功，onFulfilled函数将被调用，并将结果作为参数传递给它。

如果异步操作失败，即random大于等于0.5，Promise对象将进入已拒绝状态，此时catch()方法指定的回调函数将被调用，并将拒绝的原因作为参数传递给它。在这个例子中，catch()回调函数会打印出"操作失败，错误是：操作失败"。

需要注意的是，catch()方法只会捕获最近的前一个Promise对象的拒绝状态。如果在then()链中的任何地方没有添加catch()方法，Promise对象的异常将会被抛出并可能导致未捕获的异常。因此，建议始终在Promise链中添加适当的catch()方法来处理错误情况。

all()方法

Promise.all()是一个静态方法，用于接收一个可迭代对象（如数组或类数组对象），并返回一个新的Promise对象。
Promise.all()方法的作用是等待可迭代对象中的所有Promise对象都进入已完成状态后，返回一个新的Promise对象，该对象的状态为已完成，并携带一个包含所有已完成Promise对象结果的数组。
具体来说，Promise.all()会并行地执行可迭代对象中的所有Promise对象，并在所有Promise对象都成功完成后返回一个结果数组。如果可迭代对象中的任何一个Promise对象进入已拒绝状态，则返回的Promise对象会立即进入已拒绝状态，并携带第一个进入已拒绝状态的Promise对象的拒绝原因。

下面是一个示例，展示了Promise.all()方法的使用

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Promise 1"), 2000);
});

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

const promise3 = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Promise 3"), 1500);
});

Promise.all([promise1, promise2, promise3])
  .then((results) => {
    console.log("所有Promise对象的结果数组是：" + results);
  })
  .catch((error) => {
    console.log("发生错误：" + error);
  });

在上述示例中，我们创建了三个Promise对象：promise1、promise2和promise3。这三个Promise对象分别在2秒、1秒和1.5秒后进入已完成状态。通过使用Promise.all()方法并传入这三个Promise对象的数组，我们可以等待它们都完成，并在then()回调函数中打印出所有Promise对象的结果数组。在这种情况下，三个Promise对象都成功完成，因此打印出了"所有Promise对象的结果数组是：Promise 1,Promise 2,Promise 3"。

需要注意的是，如果可迭代对象中的任何一个Promise对象进入已拒绝状态，返回的Promise对象会立即进入已拒绝状态，并携带第一个进入已拒绝状态的Promise对象的拒绝原因。在这种情况下，catch()回调函数会被执行，而then()回调函数不会执行。

race()方法

Promise.race()是一个静态方法，用于接收一个可迭代对象（如数组或类数组对象），并返回一个新的Promise对象。
它的作用是在可迭代对象中，只要有一个Promise对象的状态发生变化（即进入已完成或已拒绝状态），返回的Promise对象就会立即采用该Promise对象的状态和结果。
具体来说，Promise.race()方法会同时执行多个Promise对象，并返回最先完成的Promise对象的结果或拒绝原因。无论是哪个Promise对象率先改变状态，返回的Promise对象都会立即采用该状态。

下面是一个示例，展示了Promise.race()方法的使用

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Promise 1"), 2000);
});

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

Promise.race([promise1, promise2])
  .then((result) => {
    console.log("第一个完成的Promise对象的结果是：" + result);
  })
  .catch((error) => {
    console.log("发生错误：" + error);
  });

在上述示例中，我们创建了两个Promise对象：promise1和promise2。promise1会在2秒后进入已完成状态，而promise2会在1秒后进入已完成状态。通过使用Promise.race()方法并传入这两个Promise对象的数组，我们可以得到最先完成的Promise对象的结果。在这种情况下，promise2会先完成，因此在then()回调函数中打印出了"第一个完成的Promise对象的结果是：Promise 2"。

需要注意的是，如果可迭代对象中的任何一个Promise对象进入已拒绝状态，返回的Promise对象会立即进入已拒绝状态，并且拒绝原因是第一个进入已拒绝状态的Promise对象的结果。