JS异步处理系列一 ES6 Promise

作者: 合肥黑 | 来源:发表于2018-09-30 16:13 被阅读258次

参考
深入理解 Promise 五部曲 -- 1.异步问题
 深入理解 Promise 五部曲 -- 2.控制权转换问题
 深入理解 Promise 五部曲 -- 3.可靠性问题
 深入理解 Promise 五部曲 -- 4.扩展问题
 深入理解 Promise 五部曲 -- 5.LEGO
【javascript】异步编年史，从“纯回调”到Promise
阮一峰 ES6入门 Promise
廖雪峰 JavaScript教程 Promise

一、异步回调的问题

1.调用函数过早

调用函数过早的最值得让人注意的问题，是你不小心定义了一个函数，使得作为函数参数的回调可能延时调用，也可能立即调用。也即你使用了一个可能同步调用，也可能异步调用的回调。这样一种难以预测的回调。

在英语世界里，这种可能同步也可能异步调用的回调以及包裹它的函数，被称作是 “Zalgo” （一种都市传说中的魔鬼），而编写这种函数的行为，被称作是"release Zalgo" (将Zalgo释放了出来)

var a =1
zalgoFunction () {
  // 这里还有很多其他代码,使得a = 2可能被异步调用也可能被同步调用
    [  a = 2  ]
  }
console.log(a)

结果会输出什么呢？如果zalgoFunction是同步的，那么a 显然等于2，但如果 zalgoFunction是异步的，那么 a显然等于1。于是，我们陷入了无法判断调用影响的窘境。

这只是一个极为简单的场景，如果场景变得相当复杂，结果又会如何呢？你可能想说：我自己写的函数我怎么会不知道呢？很多时候这个不确定的函数来源于它人之手，甚至来源于完全无法核实的第三方代码。我们把这种不确定的情况稍微变得夸张一些：这个函数中传入的回调，有99%的几率被异步调用，有1%的几率被同步调用。

2.调用次数过多

这里取《你不知道的javascript（中卷）》的例子给大家看一看：

作为一个公司的员工，你需要开发一个网上商城， payWithYourMoney是你在确认购买后执行的扣费的函数，由于公司需要对购买的数据做追踪分析，这里需要用到一个做数据分析的第三方公司提供的analytics对象中的purchase函数。代码看起来像这样

analytics.purchase( purchaseData, function  () {
      payWithYourMoney ()
} );

在这情况下，可能我们会忽略的一个事实是：我们已经把payWithYourMoney 的控制权完全交给了analytics.purchase函数了，这让我们的回调“任人宰割”，这种控制权的转移，被叫做“控制反转”。

然后上线后的一天，数据分析公司的一个隐蔽的bug终于显露出来， 让其中一个原本只执行一次的payWithYourMoney执行了5次，这让那个网上商城的客户极为恼怒，并投诉了你们公司。可你们公司也很无奈，这个时候惊奇的发现： payWithYourMoney的控制完全不在自己的手里！！！！！后来，为了保证只支付一次，代码改成了这样：

 // 判断是否已经分析（支付）过一次了
var analysisFlag  = true
analytics.purchase( purchaseData, function(){
     if (！analysisFlag) {
           payWithYourMoney ()
           analysisFlag = false
     }
} );

但是，这种方式虽然巧妙，但却仍不够简洁优雅（后文提到的Promise将改变这一点）。而且，在回调函数的无数“痛点”中，它只能规避掉一个，如果你尝试规避掉所有的“痛点”，代码将比上面更加复杂而混乱。

3.太晚调用或根本没有调用

因为你失去了对回调的控制权，你的回调可能会出现预期之外的过晚调用或者不调用的情况（为了处理这个“痛点”你又将混入一些复杂的代码逻辑）

4.吞掉报错

回调内的报错是可能被包裹回调的外部函数捕捉而不报错，（为了处理这个“痛点”你又又又将混入一些复杂的代码逻辑）

5.复杂情况下可读性差

请问这段代码的调用顺序？

doA( function(){
    doB();
    doC( function(){
      doD();
          } )
    doE();
} );
doF();

让人一脸蒙逼的回调函数地狱

setTimeout(function (name) {
  var catList = name + ','
  setTimeout(function (name) {
    catList += name + ',';
    setTimeout(function (name) {
      catList += name + ',';
      setTimeout(function (name) {
        catList += name + ',';
        setTimeout(function (name) {
          catList += name;
          console.log(catList);
        }, 1, 'Lion');
      }, 1, 'Snow Leopard');
    }, 1, 'Lynx');
  }, 1, 'Jaguar');}, 1, 'Panther');

6.门

什么叫“门”？，你可以大概理解成：现在有一群人准备进屋，但只有他们所有人都到齐了，才能“进门” ，也就是：只有所有的异步操作都完成了，我们才认为它整体完成了，才能进行下一步操作

下面这个例子里，我们试图通过两个异步请求操作，希望当a和b的取值都到达的时候才输出！！

var a, b;
function foo(x) {
   a = x * 2;
   if (a && b) {
        baz();
    }
}
function bar(y) {
    b = y * 2;
    if (a && b) {
           baz();
    }
}
function baz() {
     console.log( a + b );
}
// ajax(..)是某个库中的某个Ajax函数
ajax( "http://some.url.1", foo );
ajax( "http://some.url.2", bar );

这段代码比前面那段“链式”里的回调地狱好懂多了，但是却依然存在这一些问题：我们使用了两个 if (a && b) { } 去分别保证baz是在a和b都到达后才执行的，试着思考一下：两个 if (a && b) { } 的判断条件是否可以合并到一起呢，因为这两个判断条件都试图表达同一种语意： a 和 b都到达，能合并成一条语句的话岂不是更加简洁优雅？（一切都在为Promise做铺垫哦~~~~啦啦啦）

7.竞态

一组异步操作，其中一个完成了，这组异步操作便算是整体完成了。在下面，我们希望通过异步请求的方式，取得x的值，然后执行foo或者bar，但希望只把foo或者bar其中一个函数执行一次

var flag = true;
function foo(x) {
    if (flag) {
        x = x + 1
        baz(x);
        flag = false
     }
}
function bar(x) {
     if (flag) {
         x = x*2
         baz(x);
         flag = false
     }
}
function baz( x ) {
       console.log( x );
}
// ajax(..)是某个库中的某个Ajax函数
ajax( "http://some.url.1", foo );
ajax( "http://some.url.2", bar );

在这里，我们设置了一个flag，设它的初始值为true, 这时候foo或者bar在第一次执行的时候，是可以进入if内部的代码块并且执行baz函数的，但在if内部的代码块结束的时候，我们把flag的值置为false,这个时候下一个函数就无法进入代码块执行了，这就是回调对于竞态的处理。

二、Promise 的含义

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。

所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。

Promise对象有以下两个特点。

（1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。

（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

注意，为了行文方便，本章后面的resolved统一只指fulfilled状态，不包含rejected状态。

有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。

Promise也有一些缺点。首先，无法取消Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。第三，当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

如果某些事件不断地反复发生，一般来说，使用 Stream 模式是比部署Promise更好的选择。

三、Promise是怎么解决问题的

1.回调过早调用
让我们回到那个回调的痛点：我们有可能会写出一个既可能同步执行，又可能异步执行的“zalgo”函数。但Promise可以自动帮我们避免这个问题：如果对一个 Promise 调用 then(..) 的时候，即使这个 Promise是立即resolve的函数（即Promise内部没有ajax等异步操作，只有同步操作），提供给then(..) 的回调也是会被异步调用的，这帮助我们省了不少心

回调调用次数过多
Promise 的内部机制决定了调用单个Promise的then方法，回调只会被执行一次，因为Promise的状态变化是单向不可逆的，当这个Promise第一次调用resolve方法，使得它的状态从pending（正在进行）变成fullfilled（已成功）或者rejected（被拒绝）后，它的状态就再也不能变化了。所以你完全不必担心Promise.then( function ) 中的function会被调用多次的情况
回调中的报错被吞掉
要说明一点的是Promise中的then方法中的error回调被调用的时机有两种情况：

a. Promise中主动调用了reject (有意识地使得Promise的状态被拒绝)，这时error回调能够接收到reject方法传来的参数（reject(error)）
b. 在定义的Promise中，运行时候报错（未预料到的错误），也会使得Promise的状态被拒绝，从而使得error回调能够接收到捕捉到的错误

例如：

var p = new Promise( function(resolve,reject){
      foo.bar(); // foo未定义，所以会出错！
      resolve( 42 ); // 永远不会到达这里 :( 
 } );
p.then(
   function fulfilled(){
       // 永远不会到达这里 :(    
   },
   function rejected(err){
       // err将会是一个TypeError异常对象来自foo.bar()这一行      
   }
);

还有一种情况是回调根本就没有被调用，这是可以用Promise的race方法解决（下文将介绍）

// 用于超时一个Promise的工具 
function timeoutPromise(delay) {
   return new Promise( function(resolve,reject){
      setTimeout( function(){
            reject( "Timeout!" );
          }, delay );
      } );
}

// 设置foo()超时 
Promise.race( [
   foo(), // 试着开始foo()
   timeoutPromise( 3000 ) // 给它3秒钟
] ).then(
   function(){
     // foo(..)及时完成！ 
   },
   function(err){
     // 或者foo()被拒绝，或者只是没能按时完成
     // 查看err来了解是哪种情况 
   }
);

5.链式
我们上面说了，纯回调的一大痛点就是“金字塔回调地狱”，这种“嵌套风格”的代码丑陋难懂，但Promise就可以把这种“嵌套”风格的代码改装成我们喜闻乐见的“链式”风格。因为then函数是可以链式调用的，你的代码可以变成这样

Promise.then(
  // 第一个异步操作 
).then(
  // 第二个异步操作 
).then(
  // 第三个异步操作
)

6.门Promise.all，竞态Promise.race见后文

四、基本用法

ES6 规定，Promise对象是一个构造函数，用来生成Promise实例。下面代码创造了一个Promise实例。

const promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供，不用自己部署。

resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

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

promise.then(function(value) {
  // success
}, function(error) {
  // failure
});

then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。其中，第二个函数是可选的，不一定要提供。这两个函数都接受Promise对象传出的值作为参数。

下面是一个Promise对象的简单例子。

function timeout(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, ms, 'done');
  });
}

timeout(100).then((value) => {
  console.log(value);
});

上面代码中，timeout方法返回一个Promise实例，表示一段时间以后才会发生的结果。过了指定的时间（ms参数）以后，Promise实例的状态变为resolved，就会触发then方法绑定的回调函数。

下面是一个用Promise对象实现的 Ajax 操作的例子。

const getJSON = function(url) {
  const promise = new Promise(function(resolve, reject){
    const handler = function() {
      if (this.readyState !== 4) {
        return;
      }
      if (this.status === 200) {
        resolve(this.response);
      } else {
        reject(new Error(this.statusText));
      }
    };
    const client = new XMLHttpRequest();
    client.open("GET", url);
    client.onreadystatechange = handler;
    client.responseType = "json";
    client.setRequestHeader("Accept", "application/json");
    client.send();

  });

  return promise;
};

getJSON("/posts.json").then(function(json) {
  console.log('Contents: ' + json);
}, function(error) {
  console.error('出错了', error);
});

上面代码中，getJSON是对 XMLHttpRequest 对象的封装，用于发出一个针对 JSON 数据的 HTTP 请求，并且返回一个Promise对象。需要注意的是，在getJSON内部，resolve函数和reject函数调用时，都带有参数。

五、Promise.prototype.then()

前面说过，then方法的第一个参数是resolved状态的回调函数，第二个参数（可选）是rejected状态的回调函数。

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

getJSON("/posts.json").then(function(json) {
  return json.post;
}).then(function(post) {
  // ...
});

上面的代码使用then方法，依次指定了两个回调函数。第一个回调函数完成以后，会将返回结果作为参数，传入第二个回调函数。

采用链式的then，可以指定一组按照次序调用的回调函数。这时，前一个回调函数，有可能返回的还是一个Promise对象（即有异步操作），这时后一个回调函数，就会等待该Promise对象的状态发生变化，才会被调用。

getJSON("/post/1.json").then(function(post) {
  return getJSON(post.commentURL);
}).then(function funcA(comments) {
  console.log("resolved: ", comments);
}, function funcB(err){
  console.log("rejected: ", err);
});

上面代码中，第一个then方法指定的回调函数，返回的是另一个Promise对象。这时，第二个then方法指定的回调函数，就会等待这个新的Promise对象状态发生变化。如果变为resolved，就调用funcA，如果状态变为rejected，就调用funcB。

如果采用箭头函数，上面的代码可以写得更简洁。

getJSON("/post/1.json").then(
  post => getJSON(post.commentURL)
).then(
  comments => console.log("resolved: ", comments),
  err => console.log("rejected: ", err)
);

六、Promise.prototype.catch()

Promise.prototype.catch方法是.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));

下面代码中，getJSON方法返回一个 Promise 对象，如果该对象状态变为resolved，则会调用then方法指定的回调函数；如果异步操作抛出错误，状态就会变为rejected，就会调用catch方法指定的回调函数，处理这个错误。另外，then方法指定的回调函数，如果运行中抛出错误，也会被catch方法捕获。

getJSON('/posts.json').then(function(posts) {
  // ...
}).catch(function(error) {
  // 处理 getJSON 和 前一个回调函数运行时发生的错误
  console.log('发生错误！', error);
});

七、Promise.prototype.finally()

finally方法用于指定不管 Promise 对象最后状态如何，都会执行的操作。该方法是 ES2018 引入标准的。

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

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

下面是一个例子，服务器使用 Promise 处理请求，然后使用finally方法关掉服务器。

server.listen(port)
  .then(function () {
    // ...
  })
  .finally(server.stop);

finally方法的回调函数不接受任何参数，这意味着没有办法知道，前面的 Promise 状态到底是fulfilled还是rejected。这表明，finally方法里面的操作，应该是与状态无关的，不依赖于 Promise 的执行结果。

八、Promise.all()

试想一个页面聊天系统，我们需要从两个不同的URL分别获得用户的个人信息和好友列表，这两个任务是可以并行执行的，用Promise.all()实现如下：

var p1 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 500, 'P1');
});
var p2 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 600, 'P2');
});
// 同时执行p1和p2，并在它们都完成后执行then:
Promise.all([p1, p2]).then(function (results) {
    console.log(results); // 获得一个Array: ['P1', 'P2']
});

九、Promise.race()

有些时候，多个异步任务是为了容错。比如，同时向两个URL读取用户的个人信息，只需要获得先返回的结果即可。这种情况下，用Promise.race()实现：

var p1 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 500, 'P1');
});
var p2 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 600, 'P2');
});
Promise.race([p1, p2]).then(function (result) {
    console.log(result); // 'P1'
});

由于p1执行较快，Promise的then()将获得结果'P1'。p2仍在继续执行，但执行结果将被丢弃。