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

Promise详解

news 来源：原创 2025/5/19 15:04:22

Promise详解

文章目录

Promise详解
- - 1、异步操作，同步操作
  - 2、Promise
  - 3、Promise使用
  - - 3.1.创建promise
    - 3.2.使用 Promise：
    - - 1.then
      - 2.cath
      - 3.finally
      - **静态方法**：resolve,reject,all,race,allSettled,any

1、异步操作，同步操作

异步操作是指在编程中，某个任务的执行不会立即完成，同时不会阻塞后续代码的执行。在异步操作中，程序可以继续运行，并在异步任务完成时得到通知并处理结果。

同步操作会阻塞程序的继续执行直到任务完成。

异步操作的作用：如果没有异步，那么每请求一个接口，页面都将不能被滑动，呈现出来就是一卡一卡的

回调函数是最基本的异步处理方式。在异步操作完成后，调用预先传入的函数。但是，会出现回调地狱。

2、Promise

Promise 是 JavaScript 的一个特性，它允许你在异步操作（如网络请求）完成后执行某些代码。它代表了一个将来才会知道结果的操作。解决回调地狱

Promise 可以处于以下三种状态之一：

pedding->初始状态：调用promise时，一开始就呈现出等待状态，遇到resolve或者reject之前，都处于这个状态，且可以改变，但如果确定了状态（fulfilled/reject），则结果将永远不变，不能再次修改

fulfilled->成功状态：在执行了resolve后，promise则会从pedding变成fulfilled，后续会进入.then 的回调函数中，在回调函数的第一个参数函数中可以获取到值

rejected->失败状态：在执行了reject后，promise状态会变成rejected，rejected函数传递的参数，可以在.then的第二个参数函数中获取的到，或者是在.catch获取到，但是如果程序上的错误，得通过.catch函数去拿到失败消息，在.then中是获取不了的

3、Promise使用

3.1.创建promise

let promise = new Promise((resolve, reject) => {
  // 异步操作
  if (/* 操作成功 */) {
    resolve(value); // 成功时调用
  } else {
    reject(error); // 失败时调用
  }
});

3.2.使用 Promise：

1.then

then()：接收两个函数作为参数，第一个函数在 Promise 成功时调用，第二个在失败时调用。

promise.then(
  value => { /* 成功时的处理 */ },
  error => { /* 失败时的处理 */ }
);

2.cath

catch()：用于捕获 Promise 中发生的错误。

promise.catch(
  error => { /* 错误处理 */ }
);

3.finally

finally()：无论 Promise 最终状态如何都会执行。

promise.finally(() => {
  // 总是会执行的代码
});

链式调用：可以将多个 .then() 和 .catch() 串联起来，形成链式调用。

静态方法：resolve,reject,all,race,allSettled,any

Promise.resolve(value)
- 创建一个立即解析的 Promise 对象，状态为 fulfilled
- 等同于 new Promise(resolve => resolve(value))
Promise.reject(reason)
- 创建一个立即拒绝的 Promise 对象，状态为 rejected
- 等同于 new Promise((_, reject) => reject(reason))
Promise.all(iterable)
- 接收一个 Promise 可迭代对象（如数组）
- 当所有 Promise 都成功时返回一个包含所有结果的数组
- 如果有一个 Promise 失败，则立即拒绝并返回第一个失败的原因
Promise.race(iterable)
- 接收一个 Promise 可迭代对象
- 返回第一个完成（无论成功或失败）的 Promise 的结果或原因

Promise.allSettled(iterable)

接收一个 Promise 可迭代对象
等待所有 Promise 完成（无论成功或失败）
返回一个包含每个 Promise 结果的对象数组，每个对象有 status（state表示promise的状态：resolve和rejected）和 value (value代表的是promise传递的值)或 reason 属性

var p1 = new Promise((resoleve, reject) => {
  setTimeout(() => {
    console.log("----打印：p1");
    resoleve("p1--3000");
  }, 3000);
});
 
let p2 = new Promise((resoleve, reject) => {
  setTimeout(() => {
    reject("p2--1000");
  }, 1000);
});
 
let p4 = new Promise((resolve, reject) => {
  throw new Error("抛出错误");
});
 
Promise.allSettled([p1, p2, p4])
  .then((result) => {
    console.log("----打印：result", result);
  })
  .catch((err) => {
    console.log("----打印：", err); //不执行
  });
 
//执行结果
// ----打印：p1
// ----打印：result [
//   { status: 'fulfilled', value: 'p1--3000' },
//   { status: 'rejected', reason: 'p2--1000' },
//   {
//     status: 'rejected',
//     reason: Error: 抛出错误
//   }
// ]

Promise.any(iterable)
- 接收一个 Promise 可迭代对象
- 返回第一个成功的 Promise 的结果
- 如果所有 Promise 都失败，则返回一个 AggregateError 包含所有失败原因
Promise.any(iterable)
- 接收一个 Promise 可迭代对象
- 返回第一个成功的 Promise 的结果
- 如果所有 Promise 都失败，则返回一个 AggregateError 包含所有失败原因