建设免费手机网站设计公司装修图

Promise详解

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 包含所有失败原因