深入理解Promise2

客户端最通用的异步任务就是从服务器获取数据。使用内置XMLHttpRequest对象来完成底层的实现。

console.log('----------------------创建一个真实promise案例-----------------------');
console.log('-----------------创建getJSON promise----------------');
function getJSON(url) {
  //创建并返回一个新的promise对象
  return new Promise((resolve,reject) =>{
    //创建一个XMLHttpRequest对象
    const request = new XMLHttpRequest();
    //初始化请求
    request.open('GET', url);

    //注册一个onload方法，当服务器端的响应后会被调用
    request.onload = function () {
      try{
        //即使服务端正常响应也并不意味着一切如期发生，只有当服务器端返回的状态码为200(一切正常)时，再使用服务器返回结果。
        if (this.status === 200) {
          //尝试解析JSON字符串，倘若解析成功则执行resolve，并将解析后的对象作为参数传入。
          resolve(JSON.parse(this.response));
        } else {
          reject(this.status + " " + this.statusText);
        }
      } catch (e) {
        //如果服务器返回不同的状态码，或者如果在解析JSON字符串时发生了异常，则该promise执行reject方法
        reject(e.message);
      }
    }

    //如果和服务器端通信过程中发生了错误，则对该promise执行reject方法
    request.onerror = function () {
      reject(this.status + " " + this.statusText);
    };

    //发送请求
    request.send();
  });
}

getJSON('https://www.baidu.com/').then(ninjas =>{
  if (ninjas != null) {
    console.log('Ninjas obtained!');
  }
}).catch(e =>{
  console.log("should not be here:" + e);
});

 

 

 

为了从服务端异步获取JOSN格式的数据，我们的目标是创建一个getJSON函数，它返回一个promise对象。通过该对象，我们能够在上面注册成功和失败的回调函数。我们采用内置XMLRequest来完成底层实现。该内置包含两种事件：onload和onerror。当浏览器从服务器端接收到一个响应，onload事件就会被触发，当通信出错则会触发onerror事件。一旦事件发生后，浏览器会异步调用相应的事件处理函数。

如果通信中出现了错误，我们完全无法从服务器中获取数据，所以最真诚的方式就是拒绝掉我们的承诺。

//如果和服务器端通信过程中发生了错误，则对该promise执行reject方法

request.onerror = function () {

reject(this.status + " " + this.statusText);

}

如果从服务器端接收一个响应，我们必须分析响应内容并判断当前处于什么状况。我们仅仅关心响应成功（状态码为200）。如果不是这种状态，一律将promise拒绝。

因为我们的目标是从服务端获取JSON格式的数据，而JSON代码很容易出现语法错误。所以我们把JSON.parse的调用包裹在一个try-catch语句中。如果在解析服务器相应内容的时候发生错误，我们同样需要reject掉promise。

如果不发生错误，就可以获取到所需要的对象，从而安全地解决promise。

getJSON('https://www.baidu.com/').then(ninjas =>{

if (ninjas != null) {

console.log('Ninjas obtained!');

}

}).catch(e =>{

console.log("should not be here:" + e);

});

本例中存在3个潜在的错误源：客户端和服务端之间的连接错误、服务器返回错误数据（无效响应状态码），以及无效的JSON代码。但从使用getJSON函数的角度来说，我们不必关心错误源的种类。我们只需提供一个回调函数，当一切正常工作且数据也正确返回时触发该回调函数，并提供另一个回调函数，当任何错误发生时触发该回调函数，这种方式可以减轻开发者的工作量。

 

链式调用promise

我们可以在then函数上注册一个回调函数，一旦promise成功兑现就会触发该回调函数。还有一个秘密是调用then方法后还会再返回一个新的promise对象。

console.log('---------------使用then链式调用promise--------------');
//可以对then方法进行链式调用，来顺序执行多个步骤
getJSON('data/ninjas.json')
  .then(ninjas => getJSON(ninjas[0].missionsUrl))
  .then(missions => getJSON(missions[0].detailsUrl))
  .then(mission => {
    if(mission !== null) {
      console.log('------------Ninja mission obtained!------------');
    }
  })
  //捕获任何步骤中产生的promise错误
  .catch(error=>{
    console.log('An error has occurred!');
  });

如果一切按计划执行，这段代码会创建一系列promise，一个接着一个解决。首先使用getJSON('data/ninjas.json')方法从服务器中文件中获取一个数据。使用标准回调函数书写上述代码会生成很深的嵌套回调函数序列。

Promise链中错误捕捉

当处理一连串异步任务步骤的时候，任何一步都有可能出错。既然可以通过then方法传递第二个回调函数，也可以在链式地调用一个catch方法并向其中传入错误处理回调函数。如果只关心整个序列，步骤的成功或者失败时，为每一步都指定错误处理函数就显得很冗长乏味。

console.log('---------------使用then链式调用promise--------------');
//可以对then方法进行链式调用，来顺序执行多个步骤
getJSON('data/ninjas.json')
  .then(ninjas => getJSON(ninjas[0].missionsUrl))
  .then(missions => getJSON(missions[0].detailsUrl))
  .then(mission => {
    if(mission !== null) {
      console.log('------------Ninja mission obtained!------------');
    }
  })
  //捕获任何步骤中产生的promise错误
  .catch(error=>{
    console.log('An error has occurred!');
  });

如果错误在前面的任何一个promise中产生，catch方法就会捕捉到它。如果没有发生任何错误，则程序流程只会无障碍地继续通过。

等待多个promise

除了处理相互依赖的异步任务序列以外，对于等古代多个独立的异步任务，promise也能够显著地减少代码量。

console.log('-----------------使用Promise.all等待多个promise--------------');
//Promise.all方法接收一个promise数组，并创建一个新的promise对象，当所有的promises均成功时，该promise为成功状态；反之，若其中任一promise失败，则该promise为失败状态。
Promise.all([getJSON('data/ninjas.json'), getJSON('data/mapInfo.json'), getJSON('data/plan.json')])
  .then(results =>{
    //结果将是所有promsie成功值组成的数组，数组中的每一项都对应promise数组中的对应项
    const ninjas = results[0], mapInfo = results[1],plan = results[2];
    if (ninjas !== undefined && mapInfo !== undefined && plan !== undefined) {
      console.log('The plan is ready to be set in motion!');
    }
  }).catch(error=>{
    console.log('A problem in carrying out our plan!');
});

观察上述代码，我们不必关心任务执行的顺序，以及它们是不是都已经进入完成状态。通过使用内置方法Promise.all可以等待多个promise。这个方法将一个promise数组作为一个参数，然后创建一个新的promise对象，一旦数组中的promise全部被解决，这个返回的promsie就会被解决，而一旦其中有一个promise失败了，那么整个新promise对象也会被拒绝。后续的回调函数接收成功值组成的数组，数组中的每一项都对应promise数组中的对应项。Promise.all方法等待列表中的所哟promise。但如果我们只关心第一个成功的(或失败)的promise，可以尝试一下Promise.race方法。

Promise竞赛

console.log('--------------------使用Promise.race实现promise竞赛-------------------------');
Promise.race([getJSON('data/yoshi.json'), getJSON('data/hattori.json'), getJSON('data/hanzo.json')])
  .then(ninja => {
    if (ninja !== null) {
      console.log(ninja.name + " responded first!");
    }
  })
  .catch(error => {
    console.log('Failure!!!');
  });

使用Promise.race方法传入一个promise数组会返回一个全新的promise对象，一旦数组中某一个promise被处理或被拒绝，这个返回的promise就同样会被处理或者被拒绝。

 

参考《JavaScript忍者秘籍》