javascript把生成器和promise相结合

结合生成器（以及生成器暂停和恢复执行的能力）和promise，来实现更加优雅的异步代码。

try{
  const ninjas = syncGetJSON('data/ninja.json');
  const missions = syncGetJSON(ninjas[0].missionsUrl);
  const missionDetails = syncGetJSON(missions[0].detailsUrl);
  //Study the mission description
} catch (e) {
  //Oh no,we were not able to get the mission details
}

尽管这段代码对于简化错误处理很方便，但UI被阻塞了，用户不希望看到这个结果。则可以使用生成器和promise结合。从生成器中让渡后会挂起执行而不会发生阻塞。而且仅需调用生成器迭代器的next方法就可以唤醒生成器并继续执行。而promise在未来触发某种条件的情况下让我们得到它事先允诺的值，而且当错误发生后也会执行相应的回调函数。

这个方法将要以如下方式结合生成器和promise。

把异步任务放入一个生成器中，然后执行生成器函数。所以生成器执行的时候，我们会将执行权让渡给生成器，从而不会导致阻塞。过一会儿，当承若被兑现，我们会继续通过迭代器的next函数执行生成器。只要有需要就可以重复这个过程。

 

console.log('-------------将promise和生成器结合---------');
//返回异步结果的函数在等待异步结果返回时应当能够暂停，注意function*，使用生成器
async(function* () {
  try{
    //对每个任务均执行yield
    const ninjas = yield getJSON('data/ninjas.json');
    const missions = yield getJSON(ninjas[0].missionsUrl);
    const missionDescription = yield getJSON(missions[0].detailsUrl);
    //Study the mission description
  } catch (e) {
    //依旧可以使用标准的语言结构，诸如try-catch语句或循环语句
    //Oh no,we were not able to get the mission details
  }
});

//定义一个辅助函数，用于对我们定义的生成器执行操作
function async(generator) {
  //创建 一个迭代器，进而我们可以控制生成器
  var iterator = generator();

  //定义函数handle，用于对生成器产生的每个值进行处理。
  function handle(iteratorResult) {
    //当生成器没有更多结果返回时停止执行。
    if (iteratorResult.done) {
      return;
    }

    const iteratorValue = iteratorResult.value;
    //如果生成的值是一个promise，则对其注册成功和失败的回调。这是异步处理的部分。如果promise成功返回，则恢复生成器的执行并传入promise的返回结果。如果遇到错误，则生成器抛出异常。
    if (iteratorValue instanceof Promise) {
      iteratorValue.then(res =>{
        handle(iterator.next(res));
      }).catch(err =>{
        iterator.throw(err);
      });
    }
  }
 
  //重启生成器的执行
  try{
    handle(iterator.next());
  } catch (e) {
    iterator.throw(e);
  }
}

 

async函数内，我们声明了一个处理函数用于处理从生成器中返回的值——迭代器的一次“迭代”。如果生成器的结果是一个被成功兑现的承若，我们就是用迭代器的next方法把承诺的值返回给生成器并恢复执行。如果出现错误，承若被违背，我们就使用迭代器的throw方法抛出一个异常。直到生成器完成前，一直重复这几个操作。

注意：

这只是一个粗略的草稿，一个最小化的代码应该把生成器和promise结合在一起。不推荐生产环境下出现这些代码。

现在仔细看看这个生成器，在第一次调用迭代器的next方法后，生成器执行第一次getJSON('data/ninjas.json')调用。此次调用创建了一个promise，该promise会包含需要的信息。但是这个值是异步获取的，所以我们完全不知道浏览器会花多少时间来获取它。但我们明白一件事，我们不希望在等待中阻塞应用的执行。所以对于这个原因，在执行的这一刻，生成器让渡了控制权，生成器暂停，并把控制流还给了回调函数的执行。由于让渡的值是一个promise对象getJSON，在这个回调函数中，通过使用promise的then和catch方法，我们注册了一个success和一个error回调函数，从而继续了函数的执行。当浏览器接收到了响应（可能是成功的响应，也可能是失败的响应），promise的两个回调函数之一则被调用了。如果promise被成功解决，则会执行success回调函数，随之而来的是迭代器next方法的调用，用于向生成器请求新的值，从而向生成器请求新值，从而生成器从挂起状态恢复，并把得到的值回传给回调函数。这意味着，程序又重新进入到生成器函数体内，当第一次执行yield表达式后，得到的值变成从服务器端获取的信息。

下一行代码的生成器函数中，我们使用获取到的数据ninjas[0].missionsUrl来发起新的geJSON请求，从而创建一个新的promise对象，最后返回最新的数据。我们依然不知道这个异步任务会执行多久，所以我们再一次让渡了这次执行，并重复这个过程。只要生成器中有异步任务，这个过程就会重新执行一次。

这个例子有一点不同，但它结合了许多知识点：

1.函数是第一类对象——我们向async函数了一个参数，该参数也是函数。

2.生成器函数——用它的特性来挂起和恢复执行。

3.pomise——帮我们处理异步代码。

4.回调函数——在promise对象上注册成功和失败的回调函数。

5.箭头函数——箭头函数的简洁适合用在回调函数上。

6.闭包——在我们控制生成器的过程中，迭代器在async函数内被创建，随之我们在promise的回调函数内通过闭包来获取该迭代器。

 

逻辑代码的书写如下方式：

getJSON("data/ninjas.json", (err, ninjas) =>{
  if (err) {
    console.log('Error fetchig ninjas', err);
    return;
  }

  getJSON(ninjas[0].missingsUrl, (err, missions) =>{
    if (err) {
      console.log("Error locating ninja missions", err);
      return;
    }
    console.log(missions);
  })
});

 

不同于把错误处理和流程中控制混合在一起，我们使用类似以下写法结束了代码的混乱：

async(function* () {
  try{
    //对每个任务均执行yield
    const ninjas = yield getJSON('data/ninjas.json');
    const missions = yield getJSON(ninjas[0].missionsUrl);
    //Study the mission description
  } catch (e) {
    //依旧可以使用标准的语言结构，诸如try-catch语句或循环语句
    //Oh no,we were not able to get the mission details
  }
});

 

最终结果结合了同步代码和异步代码的优点。有了同步代码，我们能更容易地理解、使用标准控制流以及异常处理机制、try-catch语句能力。而对于异步代码来说，我们有着天生的阻塞：当等待长时间运行的异步任务时，应用的执行不会被阻塞。

 

参考《JavaScriipt忍者秘籍》