ES6知识点-Promise对象

Posted 2021-03-22 xuzhengguo

4.3Promise对象

4.3.1Promise概述

• Promise是异步编程的一种解决方案。
• Promise是为了解决多重嵌套回调函数而提出的。
• 它不是新的语法功能，而是一种新的写法，允许将回调函数的嵌套，改成链式调用。
• Promise是一个对象，从它可以获取异步操作的消息。
• Promise提供统一的API，各种异步操作都可以用同样的方法进行处理。
• Promise有以下两个特点：
  • 对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成，又称Fulfilled）和Rejected（已失败）。
  • 一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从Pending变为Resolved和从Pending变为Rejected。
• Promise也有一些缺点：
  • 无法取消Promise，一旦新建它就会立即执行，无法中途取消。
  • 如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。
  • 当处于Pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

4.3.3使用Promise实现Ajax操作

var getData = 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;
};
getData("/posts/info")

    .then(

        function(json) {console.log('Contents: ' + json);}, 

        function(error) {console.error('出错了', error);}

    );

• 如果调用resolve函数和reject函数时带有参数，那么它们的参数会被传递给回调函数。

4.3.4基本用法

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

• Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由javascript引擎提供，不用自己部署。
• resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从Pending变为Resolved），在异步操作成功时调用并将异步操作的结果，作为参数传递出去。

• reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从Pending变为Rejected），在异步操作失败时调用并将异步操作报出的错误，作为参数传递出去。

var promise = new Promise(function(resolve, reject) {
  if (true){
    resolve(value);
  } else {
    reject(error);
  }
});

4.3.5then方法

• then方法返回的是一个新的Promise实例（注意，不是原来那个Promise实例）。
• 因此可以采用链式写法，即then方法后面再调用另一个then方法。

//第一个then方法指定的回调函数，返回的是另一个Promise对象。
//第二个then方法指定的回调函数，就会等待这个新的Promise对象状态发生变化。
//如果变为Resolved，就调用funcA，如果状态变为Rejected，就调用funcB。
getData("/get/info")
    .then(function(get) {return getData(get.commentURL);})
    .then(
        function funcA(comments) {console.log("Resolved: ", comments);}, 
        function funcB(err){console.log("Rejected: ", err);}
    );
//箭头函数简写
getData("/get/info")
    .then(  get => getData(get.commentURL  ))
    .then(
        comments => console.log("Resolved: ", comments),
        err => console.log("Rejected: ", err)
    ); 

4.3.6catch方法

• Promise.prototype.catch方法是.then(null, rejection)的别名

• 用于指定发生错误时的回调函数。

• then方法指定的回调函数，如果运行中抛出错误也会被catch方法捕获。

  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));

4.3.7done()方法

• Promise对象的回调链，不管以then方法还是catch方法结尾，要是最后一个方法抛出错误，都可能无法捕捉到（因为Promise内部的错误不会冒泡到全局）

• 提供一个done方法，总是处于回调链的尾端，保证抛出任何可能出现的错误。

  Promise.prototype.done = function (onFulfilled, onRejected) {
    this.then(onFulfilled, onRejected)
      .catch(function (err) {
        // 抛出一个全局错误
        setTimeout(() => { throw err }, 0);
      });
  };