Promise方法理解封装

àì夳堔傛蜴生んèń 2021-09-02 09:28 436阅读 0赞

##  Promise是什么？ ##

Promise直接打印出来看看吧，console.dir(Promise)，就这么简单粗暴

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70][]

可以看出:Promise是一个构造函数。ES6中新增的。

从打印的结果可以看出**里面有 all race reject resolve 等方法  原型上有 catch  constructor  finally  then方法**

作用：为了解决异步代码的编程问题。将代码的书写风格，从回调套回调，变为从上到下。

从上到下执行的方式 减少了回调套回调的书写

这里注意一下因为Promise同步方法 所以我们使用的时候的应该把它放在函数中执行

// 定义第一个任务
    let username  = function() {
        return new Promise(function(resolve, reject) {
          
        });
    }

Promise的构造函数接收一个参数，是函数，并且传入两个参数：resolve，reject，分别**表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数**。其实这里用“成功”和“失败”来描述并不准确，按照标准来讲，r**esolve是将Promise的状态置为fullfiled，reject是将Promise的状态置为rejected**。不过在我们开始阶段可以先这么理解，后面再细究概念。

案例:

// 初始化一个Promise实例
    let  username  = new Promise(function(resolve, reject) {
        resolve：函数，当执行的时候会将p的状态变为resolved
        reject：函数，当执行的时候会将p的状态变为rejected
    });

此时，我们将Promise的参数中的resolve执行：

let p = new Promise(function(resolve, reject) {
        resolve();
    });   
    console.log(p);

此时，p的状态变为了: fulfilled 也就是resolved

![20200916173418112.png][]

再重新将reject执行：

let p = new Promise(function(resolve, reject) {
        // resolve();
    });   
    console.log(p);

此时，p的状态变为了rejected 并且还报错了。

![20200916173529496.png][]

报错的原因：因为没有设置resolved时的处理函数。

总结：

**Promise接收一个函数作为参数，通常会在该函数体内发送异步请求。并在异步请求结束之后，调用resolve或者reject。**

**此时Promise实例的状态也会随之变化。**

## **处理函数**  ##

### **then ** 当Promise的状态发生变化，进行后续的逻辑上的代码处理 ###

当Promise的状态发生变化的时候，我们应当进行后续的逻辑上的代码处理。

“成功时，怎么办？失败时，怎么办？”

**Promise的实例上有一个then方法，就是用来处理这个问题的。**

promise.then(successCallback, failCallback);

**successCallback: 当状态变为resolved时，执行的回调函数**

**failCallback: 当状态变为rejected时，执行的回调函数**

注：promise实例的状态通常跟异步请求的执行结果挂钩

第一种情况：

异步请求成功 => resolve()

异步请求失败 => reject()

但是也可以第二种情况：

异步请求成功 => reject()

异步请求失败 => resolve()

但是没人会执行第二种情况

### **处理异步的方式** ###

成功时，也就是resolve()

![20200916174130664.png][]

失败时，也就是reject()

![20200916174152938.png][]

如果不执行resolve也不执行reject，则永远不会执行任何代码。

总结：
    Promise实例的状态：
    只可能
    		pending => resolved/fulfilled  
    或
    pending => rejected 
    一旦确定状态，则不可能逆向，也不可能改变。

### resolve  rejected 传递参数 ###

代码是从异步的回调中抽离到p.then方法的参数函数中了。

但是作用域也变了。从参数函数中，根据作用域是无法得到异步请求回来的数据的。

**当reslove rejected函数执行的时候可以传递一个参数。而且仅此一个。 **

![20200916174654996.png][]

![20200916174813376.png][]

### **then的连续调用与传递参数   单个Promise实例** ###

**当针对一个Promise的实例绑定多组处理函数时，只有第一组处理函数，会根据Promise实例的状态而发生变化，后面的每一组，只有第一个函数会执行。**

连续调用：

我们可以针对一个Promise实例调用多次then方法。绑定多个处理函数。

此时，只有第一个处理函数会接收到reject传递的参数： 后面的每一个处理函数都没有接收到数据

![20200916175401798.png][]

**处理方法**

**后面的函数想要获取参数，必须由前一个函数返回**

**总结：**

**当针对一个Promise实例进行多个函数的处理时，第一个函数的参数，是resolve或者reject传递的。**

**后续的函数中的参数，是由前一个处理函数的return决定的。**

### **then的连续调用与传递参数   多个Promise实例  catch  (重点)** ###

// 定义一个Promise实例
    function task1() {
        return new Promise(function(resolve, reject) {
            $.get("/ajax1", function(data) {
                // 根据返回结果 决定调用resolve reject
                resolve();
            }, "json");
        });
    }
    function task2() {
        return new Promise(function(resolve, reject) {
            $.get("/ajax2", function(data) {
    
                // 根据返回结果 决定调用resolve reject
                reject("second");
    
            }, "json");
        });
    }
    
    
    // 初始化第一个任务
    let p = task1();
    
    
    // 监听第一个任务
    p.then(function() {
        // 第一个成功
        console.log("第一个成功");
        return task2();
    })
    .then(function() {
        // 第二个成功
        console.log("第二个成功");
    })
    .catch(function(data) {
        console.log("失败了", data);
    });
    console.log("执行到底");

![20200916180350277.png][]

###  catch  无法处理Promise之外的代码中的异常  throw ###

![2020091618091926.png][]

###   catch 处理属于Promise的同步代码中的异常 ###

![20200916181001634.png][]

###   catch 无法处理属于Promise的异步代码 ###

![20200916181059597.png][]

### ** finally   常用来测试** ###

![20200916181403914.png][]

## **Promise的静态方法     Promise.all    Promise.race** ##

### **Promise.all** ###

**该方法用于同时监听多个Promise实例。返回一个新的Promise实例。当被监听的每一个Promise实例都状态变为resolved时，会将返回值的新Promise实例的状态变为resolved。当任何一个被监听的Promise实例状态变为rejected时，就会执行返回值的失败处理函数。**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 1][]

### **Promise.race **  ###

Promise.race也是用于监听多个Promise实例。

Promise.all 返回的实例只有在所有的被监听的Promise实例都resolved之后，才会resolved。

Promise.race返回的实例只监听第一个返回的Promise实例的状态变化。

被监听了3个Promise实例。

如果其中某任何一个第一个发生状态的变化，Promise.race的返回值也会相应的发生变化。

简而言之：只监听第一个返回的Promise实例。

Promise.race(arr);

arr: 数组 数组中的每一个成员都是Promise实例。如果不是，会使用Promise.resolve转为Promise实例。但是此时，一定是监听它。

返回值：新的Promise实例

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 2][]

### **thenable对象** ###

所谓的thenable对象指的是普通对象具备then方法

## promise封装 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 3][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70]: /images/20210813/63727308d6a04d82923e0a9c3dcf5880.png
[20200916173418112.png]: /images/20210813/f105a40f32514ddc9f3d443cf02f5b54.png
[20200916173529496.png]: /images/20210813/419455a1b4994715879fb2689740cdc9.png
[20200916174130664.png]: /images/20210813/88283e81cb0a4b3ba02fcb235f24441f.png
[20200916174152938.png]: /images/20210813/b103409626954c879fd6b56ec066e1a3.png
[20200916174654996.png]: /images/20210813/f3ba150ba31b4a799e02567e0f0aaa85.png
[20200916174813376.png]: /images/20210813/a6436aadd6b74dd4826ddf99e4cb7207.png
[20200916175401798.png]: /images/20210813/a181966b494f4b87a500f700f77ce3a4.png
[20200916180350277.png]: /images/20210813/3e47ba631f83407899aa7ab9ee74c136.png
[2020091618091926.png]: /images/20210813/8bc8d19b4bd645d18966333731623400.png
[20200916181001634.png]: /images/20210813/0c9e512109c34cb3a96a95b1b207df31.png
[20200916181059597.png]: /images/20210813/b414dbf56568405ea852cd856e4ed53d.png
[20200916181403914.png]: /images/20210813/62d7d12347424e32a079e9fd3eed4914.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 1]: /images/20210813/e82164c0a7ab45e783737b870ca1a89a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 2]: /images/20210813/9e338a8e1ab44c9c8b33a6cd380d3f7d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 3]: /images/20210813/2db8e65cd7094f36b59568019d9c0f82.png