ES6学习笔记（9）——Promise对象

落日映苍穹つ 2022-11-27 05:26 174阅读 0赞

# Promise对象 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhcGlwaQ_size_16_color_FFFFFF_t_70_pic_center]

Promise 是异步编程的一种解决方案。所谓`Promise`，简单说就是一个容器，里面保存着某个未来才会结束的事件的结果。Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。**可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。**

## 特点 ##

1.  对象的状态不受外界影响。`Promise`有三个状态：`Pending`（进行中）、`Resolved`（已完成）和`Rejected`（已失败），**只有异步操作的结果，可以决定当前是哪一种状态。**
2.  一旦状态改变，就不会再变，任何时候都可以得到这个结果。`Promise`对象的状态只有两种改变：从`Pending`变为`Resolved`和从`Pending`变为`Rejected`。只要其中一个情况发生，状态就会一直保持这个结果。如果改变已经发生了，你再对`Promise`对象添加回调函数，也会立即得到这个结果
3.  无法取消`Promise`，一旦新建它就会立即执行；如果不设置回调函数，`Promise`内部抛出的错误，不会反应到外部；当处于`Pending`状态时，无法得知目前进展到哪一个阶段

## 基本用法 ##

ES6规定，Promise对象是一个构造函数，用来生成Promise实例

//promise构建函数接受一个函数作为参数，
    //函数内有两个参数：resolve和reject，它们是两个函数，由js引擎提供
    
    var promise = new Promise(function(resolve, reject) { 
      // ... some code
      if (/* 异步操作成功 */){ 
        resolve(value);	//状态从“未完成”到“成功”、异步操作成功时调用，并将结果作为参数抛出
      } else { 
        reject(error);	//状态从“未完成”变为“失败”、异步操作失败时调用，并将错误作为参数抛出
      }
    });

Promise实例生成以后，可以用`then`方法分别指定`Resolved`状态和`Reject`状态的回调函数

//接受两个回调函数作为参数：一个状态变为Resolved时调用，一个是状态变为Reject时调用。其中，第二个函数是可选的。这两个函数都接受Promise对象传出的值作为参数
    promise.then(function(value) { 
      // success
    }, function(error) { 
      // failure
    });

一个例子

//一个返回Promise实例的方法
    function timeout(ms) { 
      return new Promise((resolve, reject) => { 
        setTimeout(resolve, ms, 'done');
      });
    }
    //调用方法，当promise的状态变成Resolved时，就会触发then绑定的回调函数
    timeout(100).then((value) => { 		//then后面状态变为Resolved时的回调，
      console.log(value);
    });

异步加载图片的例子

用Promise对象实现的Ajax操作的例子

//getJSON是对XMLHttpRequest对象的封装，用于发出一个针对JSON数据的HTTP请求
    var getJSON = function(url) { 
      var promise = new Promise(function(resolve, reject){ 
        var client = new XMLHttpRequest();
        client.open("GET", url);
        client.onreadystatechange = handler;
        client.responseType = "json";
        client.setRequestHeader("Accept", "application/json");
        client.send();
    
        function handler() { 
          if (this.readyState !== 4) { 
            return;
          }
          if (this.status === 200) { 
            resolve(this.response);
          } else { 
            reject(new Error(this.statusText));
          }
        };
      });
    
      return promise;
    };
    
    getJSON("/posts.json").then(function(json) { 
      console.log('Contents: ' + json);
    }, function(error) { 
      console.error('出错了', error);
    });

状态传递：`p1`的状态就会传递给`p2`，也就是说，`p1`的状态决定了`p2`的状态

var p1 = new Promise(function (resolve, reject) { 
      // ...
    });
    var p2 = new Promise(function (resolve, reject) { 
      // ...
      resolve(p1);
    })
    
    //一个例子
    var p1 = new Promise(function (resolve, reject) { 
      setTimeout(() => reject(new Error('fail')), 3000)	
       //2. 再2秒后，状态变成reject，传递给了p2，进而触发catch
    })
    var p2 = new Promise(function (resolve, reject) { 
      setTimeout(() => resolve(p1), 1000)	//1. 由于这里返回的是另一个Promise，所以自身的状态无效
    })
    p2
      .then(result => console.log(result))
      .catch(error => console.log(error))
    // 3. Error: fail

## 方法 ##

*  `Promise.prototype.then()`
    
    (1) then的第一个参数是Resolved状态的回调函数，第二个参数（可选）是Rejected状态的回调函数
    
    (2) then方法返回的是一个新的Promise实例，因此可以采用链式写法。后面的回调会等待前一个的Promise状态发生变化后才调用
    
        //这里用then依次指定了两个回调函数。第一个回调函数完成后，会将返回结果作为参数，传入第二个回调函数
        getJSON("/posts.json").then(function(json) { 
          return json.post;
        }).then(function(post) { 
          // ...
        });
 *  `Promise.prototype.catch()`
    
    (1) 用于指定发生错误时的回调函数。
    
        getJSON('/posts.json').then(function(posts) { 
          // ...
        }).catch(function(error) { 
          //(1)如果异步操作抛出错误，状态就会变为Rejected，就会调用catch方法指定的回调函数，处理这个错误
          //(2)then方法指定的回调函数，如果运行中抛出错误，也会被catch方法捕获。
          console.log('发生错误！', error);	
        });
    
    (2) 相当于.then(null, rejection)
    
        p.then((val) => console.log('fulfilled:', val))
          .catch((err) => console.log('rejected', err));
        	// 等同于
        p.then((val) => console.log('fulfilled:', val))
          .then(null, (err) => console.log("rejected:", err));
    
    (3) Promise 对象的错误会一直向后传递，直到被捕获为止。错误总是会被下一个catch语句捕获，如果`catch`内发生错误而后面没有`catch`来捕获，那么这个错误就无法被捕获到
    
        var promise = new Promise(function(resolve, reject) { 
        reject(new Error('test'));
        });
        promise.catch(function(error) { 
          console.log(error);
        });
        // Error: test
    
    (4) 两种写法对比
    
        //写法1:不能捕获前面then方法执行中的错误
        promise
        .then(function(data) { 
            // success
          }, function(err) { 
            // error
          });
        
        //写法2:可以捕获前面then方法执行中的错误（推荐）
        promise
          .then(function(data) {  //cb
            // success
          })
          .catch(function(err) { 
            // error
          });
    
    (5) `catch`方法返回的还是一个 Promise 对象，因此后面还可以接着调用`then`方法。但当没有报错时，会跳过`catch`
 *  `Promise.all()`
    
    (1) 用于将多个Promise实例，包装成一个新的Promise实例
    
        var p = Promise.all([p1, p2, p3]);
    
    (2) 最终p的状态由p1、p2、p3决定；只有p1、p2、p3状态都为`Resolved`，p的状态才会变成`Resolved`；如果p1、p2、p3有一个状态为`rejected`，p的状态就会变成`rejected`
 *  `Promise.race()`
    
    (1) 用于将多个Promise实例，包装成一个新的Promise实例
    
        var p = Promise.race([p1, p2, p3]);
    
    (2) 只要`p1`、`p2`、`p3`之中有一个实例率先改变状态，`p`的状态就跟着改变
 *  `Promise.resolve()`
    
    (1) 将现有对象转化为Promise对象
    
        Promise.resolve('foo')
        // 等价于
        new Promise(resolve => resolve('foo'))
 *  `Promise.reject()`
    
    返回一个新的 Promise 实例，该实例的状态为`rejected`
    
        var p = Promise.reject('出错了');
        // 等同于
        var p = new Promise((resolve, reject) => reject('出错了'))
        
        p.then(null, function (s) { 
          console.log(s)
        });
        // 出错了
 *  `done()`：总是处于回调链的尾端，保证抛出任何可能出现的错误
    
        asyncFunc()
          .then(f1)
          .catch(r1)
          .then(f2)
          .done();
 *  `finally()`：指定不管Promise对象最后状态如何，都会执行的操作，它接受一个普通的回调函数作为参数
    
        Promise.prototype.finally = function (callback) { 
          let P = this.constructor;
          return this.then(
            value  => P.resolve(callback()).then(() => value),
            reason => P.resolve(callback()).then(() => {  throw reason })
          );
        };

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhcGlwaQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/68b971e791014216bef2a2bc2faa39dc.png