Promise处理异步操作

谁借莪１个温暖的怀抱￠ 2023-02-27 05:54 24阅读 0赞

### Promise对象 ###

**Promise **对象用于表示一个异步操作的**最终完成 (或失败), 及其结果值**.

我的理解：Promise使得异步的写法不像之前那样一直回调，而可以用同步的代码书写格式去写异步代码。

以一个实例开头：以下实例，产生一个随机数，比0.5大触发Promise的resolve方法，比0.5小触发Promise的reject方法。prom对象通过then方法捕获resolve和reject，通过resolve或reject触发prom.then方法中的对应的处理函数。从而实现异步事件的代码同步的写法。

### ** 相关的知识点：** ###

（1）构造函数Promise创建对象，得到的是一个Promise对象，该对象可以通过**then方法来捕获**resolve和reject，而返回一个新的Promise对象。

（2）new Promise的方式创建Promise对象，传入的处理函数是立即执行函数，且接收两个参数，分别是resolve和reject，resolve()执行，表明Promise对象达到完成且成功的状态，reject()执行表明Promise对象达到完成且失败的状态。

（3）resolve()和reject()两个方法可以接收参数，并将参数传给**对应的then方法**对应的处理函数。

（4）Promise对象包括两个值，状**态：PromiseStatus、传递的值：PromiseValue。**

![20200717201706770.png][]

### **关于返回Promise对象的状态和值：** ###

**（1）pending状态下，无返回值**

得到Promise \{<pending>\}，在创建Promise尚未到达完成状态时，都是pending状态，pending状态是没有返回值的。

**所有Promise对象在then执行前都是<pending>状态。**

1）new Promise等待then的执行前

2）Promise.resolve().then()

console.log(Promise.resolve().then())

3)Promise.reject().then()

console.log(Promise.reject().then())

4)Promise.all(\[\]).then()

console.log(Promise.all([]).then())

6)Promise.race(\[\]).then()

console.log(Promise.race([]).then())

** 原因：Promise是微任务，console.log是宏任务，在执行console的时候，Promise还未执行呢，当然是pending状态。**

** （2）resolved状态（fulfilled状态）**

resolved状态是当Promise对象达到resolve()执行的条件时，返回的Promise对象的状态会改为resolved。与此同时对应的then方法捕获到状态的改变，执行then的处理函数。

1）那么我们在立即执行函数中，立即触发resolve()或reject()，打印出来的Promise对象也是完成的状态，

打印结果：Promise \{<resolved>: "success"\}

console.log(new Promise(function(resolve, rejected){
      resolve("success")
    }))

2）我们直接调用Promise的resolve方法，也会得到resolved的状态：

console.log(Promise.resolve("success"))   Promise {<resolved>: "success"}

特别注意：resolve()方法传入的值，即使当前Promise对象的返回值，也是传给then方法的数据。

**Promise.resolve() 和 Promise.reject()方法是宏任务一样的执行，返回完成状态的Promise对象**

**（3）rejected状态**

失败的时候的状态，和resolved状态都是完成状态。

### 探究then方法 ###

**then方法捕获Promise状态完成，值来自Promise对象。**

（1）then的执行时机（执行顺序）

**创建Promise对象的resolve()和reject()处理函数也是微任务。 上面代码111先执行**

（2）链式调用的原理

Prom对象的PromiseValue会传递给调用的then方法，then方法处理函数return返回的结果，作为新Promise对象的PromiseValue值传递给下一个then方法。

**执行顺序，两处的then对比，222比success先执行，为什么？**

（3）值的传递

（4）catch方法关系

catch方法捕获Promise对象的reject状态；**catch()** 方法返回一个[Promise][]，并且处理拒绝的情况。它的行为与调用[`Promise.prototype.then(undefined, onRejected)`][Promise.prototype.then_undefined_ onRejected] 相同。事实上, calling `obj.catch(onRejected)` 内部calls `obj.then(undefined, onRejected)`

下面实例中，捕获prom1的reject

（5）finally方法关系

不管是then方法、catch方法、还是finally方法，都是捕获调用它的Promise对象。

### then方法回调函数的返回值 ###

*  返回了一个值，那么 `then` 返回的 Promise 将会成为接受状态，并且将返回的值作为接受状态的回调函数的参数值。**有返回值——>带有该值的接收状态**
 *  没有返回任何值，那么 `then` 返回的 Promise 将会成为接受状态，并且该接受状态的回调函数的参数值为 `undefined`。**无返回值——> 值为undefined的接收状态**
 *  抛出一个错误，那么 `then` 返回的 Promise 将会成为拒绝状态，并且将抛出的错误作为拒绝状态的回调函数的参数值。**错误——> 值为错误原因的拒绝状态**
 *  返回一个已经是接受状态的 Promise，那么 `then` 返回的 Promise 也会成为接受状态，并且将那个 Promise 的接受状态的回调函数的参数值作为该被返回的Promise的接受状态回调函数的参数值。**接收状态的Promise ——> 值为该Promise的值 接收状态**
 *  返回一个已经是拒绝状态的 Promise，那么 `then` 返回的 Promise 也会成为拒绝状态，并且将那个 Promise 的拒绝状态的回调函数的参数值作为该被返回的Promise的拒绝状态回调函数的参数值。**拒绝状态的Promise ——> 值为该Promise的值的拒绝状态**
 *  返回一个未定状态（`pending`）的 Promise，那么 `then` 返回 Promise 的状态也是未定的，并且它的终态与那个 Promise 的终态相同；同时，它变为终态时调用的回调函数参数与那个 Promise 变为终态时的回调函数的参数是相同的。pending状态的Promise ——>

### **Promise对象的方法** ###

**（1）catch()** 方法返回一个[Promise][]，并且处理拒绝的情况。它的行为与调用[`Promise.prototype.then(undefined, onRejected)`][Promise.prototype.then_undefined_ onRejected] 相同。 (事实上, calling `obj.catch(onRejected)` 内部calls `obj.then(undefined, onRejected)`).

返回一个Promise对象，所以可以链式调用。

所以我们在处理reject的时候，需要在后面跟catch方法：

Promise.reject("fail").catch(function(value){
      console.log(value);
    })

**（2）**`finally()` 方法返回一个[`Promise`][Promise 1]。在promise结束时，无论结果是fulfilled或者是rejected，都会执行指定的回调函数。这为在`Promise`是否成功完成后都需要执行的代码提供了一种方式。

这避免了同样的语句需要在[`then()`][Promise.prototype.then_undefined_ onRejected]和[`catch()`][catch]中各写一次的情况。

**由于无法知道`promise`的最终状态，所以`finally`的回调函数中不接收任何参数**，它仅用于无论最终结果如何都要执行的情况。

### 额外： ###

**注意一个关于throw的关键字：抛出异常错误**

throw new TypeError("Oops, we haven't got JSON!");
    throw new Error("11");
    throw Error("22")

### **（3）**`Promise.all(iterable)` 方法 ###

返回一个 [`Promise`][Promise 1] 实例，此实例在 `iterable` 参数内所有的 `promise` 都“**resolved**”或参数中不包含 `promise` 时**回调完成**；

如果参数中  `promise` 有一个失败（rejected），此实例回调失败（reject），失败的原因是第一个失败 `promise` 的结果。

如果传入的iteratable对象内不包含Promise，也是返回一个Promise对象：

Promise.all([1,2,3])

**Promise执行完成**后的值：

![20200718132302981.png][]

它通常在启动多个异步任务并发运行并为其结果创建承诺之后使用，以便人们可以等待所有任务完成。

const promise1 = Promise.resolve(3);
    const promise2 = 42;
    const promise3 = new Promise((resolve, reject) => {
      setTimeout(resolve, 3000, 'foo');
    });
    
    Promise.all([promise1, promise2, promise3]).then((values) => {
      console.log(values);
    });

上面代码3秒后打印：\[3, 42, "foo"\]

**特别注意：**

**（1）**上面实例中Promise.all的用法，同时setTimeout的使用。

**（2）**返回值将会**按照参数内的 `promise` 顺序排列**，而不是由调用 `promise` 的完成顺序决定。

比如调整上面几个的排列顺序：

const promise1 = Promise.resolve(3);
    const promise2 = 42;
    const promise3 = new Promise((resolve, reject) => {
      setTimeout(resolve, 3000, 'foo');
    });
    
    Promise.all([promise3,promise1, promise2]).then((values) => {
      console.log(values);
    });

打印结果：\["foo", 3, 42\]

**下面实例中，当两个Promise对象都resolve时，返回一个数组，长度为2，内容为两个resolve传递的值**

**问：为什么打印的是数组？**

答：因为Promise.all接收的是一个数组，每个数组的promise执行的结果，返回到对应promise的位置上。所以当每个Promise执行完成后，all的参数就是\["foo", 3, 42\] ，此时调用then方法，将其打印出来。

### **（4）`Promise.race(iterable)` 方法** ###

**返回一个 promise，一旦迭代器中的某个promise解决或拒绝，返回的 promise就会解决或拒绝。竞争关系，一旦有一个Promise执行结束，就返回它的执行完成状态，其他的Promise对象不再执行。**

如果传的迭代是空的，则返回的 promise 将永远等待。

如果传入的参数数组包含一个或多个非承诺值和/或已解决/拒绝的承诺，则`Promise.race` 将解析为参数数组中找到的第一个值。

**传入非Promise对象或已解决或已拒绝的Promise对象：**

**传入值为Promise对象的iterator对象：比如值为Promise的数组**

**正常的使用，传递多个异步任务，当其中一个任务结束，返回该任务的处理结果**

结果：其中一个任务的resolve()值，或reject()值

[20200717201706770.png]: /images/20230209/3a5fdc62c81c48e793a74bce6f8264b1.png
[Promise]: https://developer.mozilla.org/zh-CN/docs/Web/API/Promise
[Promise.prototype.then_undefined_ onRejected]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/then
[Promise 1]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise
[catch]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch
[20200718132302981.png]: /images/20230209/fb92b6a71c044389900abeda1dfc9fbf.png