Promise详解

今天药忘吃喽~ 2023-10-11 12:49 11阅读 0赞

## 背景 ##

最早的时候我们处理一个异步网络请求，大概就是

$.ajax({
        url:'./a',
    	success:function(data,status){
            //alert(data);
    	},
    })

但是往往实际的业务需求是要根据前一个网络请求的结果，执行后续N多个的网络请求，代码就会变成

$.ajax({
        url:'./a',
    	success:function(data,status){
            $.ajax({
                url:'./a',
    	        success:function(data,status){
                    $.ajax({
                        url:'./a',
    	                success:function(data,status){
                            .......
    	                },
                    })
    	        },
            })
    	},
    })

好吧，臭名昭著的“**回调地狱**”出现了，他“臭”在哪呢

1.  代码臃肿
2.  可读性差
3.  代码复用性差
4.  耦合高，维护性差
5.  只能在回调中处理异常

当然，也可以把每次的处理结果当做参数传进另一个函数（其实本质上没有任何区别）。这时候急需要一种合理、强大的异步编程方案出现，promise应运而生

## Promise ##

promise是一种异步编程的解决方案，**在es6中被统一了用法**，原生提供了promise对象。所谓`Promise`，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。

**promise的核心原理其实就是发布订阅模式，通过两个队列来缓存成功的回调（onResolve）和失败的回调（onReject）。**

### 特点 ###

1.  new Promise时需要传递一个executor执行器,执行器会立刻执行
2.  执行器中传递了两个参数：resolve成功的函数、reject失败的函数，他们调用时可以接受任何值的参数value
3.  promise状态从`pending`变为`fulfilled`和从`pending`变为`rejected`。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型），然后执行相应缓存队列中的任务
4.  promise实例,每个实例都有一个then方法，这个方法传递两个参数，一个是成功回调onfulfilled,另一个是失败回调onrejected
5.  promise实例调用then时，如果状态resolved，会让onfulfilled执行并且把成功的内容当作参数传递到函数中
6.  promise中可以同一个实例then多次,如果状态是pengding 需要将函数存放起来 等待状态确定后 在依次将对应的函数执行 (发布订阅)

**常规用法**

new Promise(请求1)
        .then(请求2(请求结果1))
        .then(请求3(请求结果2))
        .then(请求4(请求结果3))
        .then(请求5(请求结果4))
        .catch(处理异常(异常信息))

**Promise.prototype.then() **

then方法是定义在原型对象上的，是为promise实例添加状态改变时的回调函数。有两个参数，`then`方法的第一个参数是`resolved`状态的回调函数，第二个参数（可选）是`rejected`状态的回调函数。**then方法返回的是一个新的promise实例**，这样才能够实现链式调用。then属于异步微任务，then中的方法，必须等到所有的同步任务执行完才执行,不了解的可以看[JavaScript执行机制][JavaScript]

观察下面代码输出

再回顾一下then方法的定义：

then方法提供一个供自定义的回调函数，若传入非函数，则会忽略当前then方法。  
回调函数中会把上一个then中返回的值当做参数值供当前then方法调用。  
then方法执行完毕后需要返回一个新的值给下一个then调用（没有返回值默认使用undefined）。  
每个then只可能使用前一个then的返回值。

先来看第一个方法--传入了回调函数，回调函数中把cb执行后的返回值当做then中的返回值，所以输出了“新的值”

function () {
        return cb();
    }

![20190924142305425.png][]

第二个方法--then回调方法，只是执行了cb方法，并没有return值，定义中讲过若then没有返回值，提供给下一个then使用的参数就是undefined，所以打印出来的是undefined;

function () {
        cb();
    }

![20190924145041280.png][]

第三个方法--then中cb()执行后返回的并不是一个函数，在Promise规范中会自动忽略调当前then，所以会把func中的返回值供下一个then使用，输出了“返回值”

cb()

![20190924145715669.png][]

第四个方法--第一个方法在回调内部返回cb执行后的值，第四个方法则直接把cb当做回调，第一个方法与第四个方法异曲同工之妙，所以也输出了“新的值”。

![20190924145628221.png][]

**Promise.prototype.catch()**

捕获异常，返回一个Promise，并且处理拒绝的情况。等价于Promise.prototype.then(undefined, onRejected)

Promise 对象的错误具有“冒泡”性质，会一直向后传递，直到被捕获为止。也就是说，错误总是会被下一个`catch`语句捕获。

getJSON('/post/1.json').then(function(post) {
      return getJSON(post.commentURL);
    }).then(function(comments) {
      // some code
    }).catch(function(error) {
      // 处理前面三个Promise产生的错误
    });

上面代码中，一共有三个 Promise 对象：一个由`getJSON`产生，两个由`then`产生。它们之中任何一个抛出的错误，都会被最后一个`catch`捕获。

一般来说，不要在`then`方法里面定义 Reject 状态的回调函数（即`then`的第二个参数），总是使用`catch`方法。

// bad
    promise
      .then(function(data) {
        // success
      }, function(err) {
        // error
      });
    
    // good
    promise
      .then(function(data) { //cb
        // success
      })
      .catch(function(err) {
        // error
      });

跟传统的`try/catch`代码块不同的是，如果没有使用`catch`方法指定错误处理的回调函数，Promise 对象抛出的错误不会传递到外层代码，即不会有任何反应。通俗的说法就是“Promise 会吃掉错误”。

**Promise.prototype.finally()**

指定不管 Promise 对象最后状态如何，都会执行的操作

promise
    .then(result => {···})
    .catch(error => {···})
    .finally(() => {···});

不管`promise`最后的状态，在执行完`then`或`catch`指定的回调函数以后，都会执行`finally`方法指定的回调函数。

**Promise.prototype.all()**

类方法，多个 Promise 任务同时执行。

如果全部成功执行，则以数组的方式返回所有 Promise 任务的执行结果。

如果有一个 Promise 任务 rejected，则只返回 rejected 任务的结果。

const p1 = new Promise((resolve, reject) => {
      resolve('hello');
    })
    .then(result => result);
    
    const p2 = new Promise((resolve, reject) => {
      throw new Error('报错了');
    })
    .then(result => result);
    
    Promise.all([p1, p2])
    .then(result => console.log(result))
    .catch(e => console.log(e));
    // Error: 报错了

**Promise.prototype.race()**

类方法，多个 Promise 任务同时执行。

返回最先执行结束的 Promise 任务的结果，不管这个 Promise 结果是成功还是失败。

### Promise实现 ###

[JavaScript]: https://blog.csdn.net/qq_24510455/article/details/82866895
[20190924142305425.png]: https://img-blog.csdnimg.cn/20190924142305425.png
[20190924145041280.png]: https://img-blog.csdnimg.cn/20190924145041280.png
[20190924145715669.png]: https://img-blog.csdnimg.cn/20190924145715669.png
[20190924145628221.png]: https://img-blog.csdnimg.cn/20190924145628221.png