Promise的实例

通过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:', error);
});

在上面的例子中我们看到的是Promise.prototype.then()方法的使用，还有其他的方法：

虽然Promise有着非常灵活的使用方式，但是仍不免存在一些缺点：
无法中途取消Promise、无法直接从外部知道Promise抛出的错误、无法具体了解pending状态中的阶段。而Promise的这些问题却在我们的下一个话题—generator中得到了解决。

Generator的顺势而为

Generator函数

Generator 函数是 ES6 提供的一种异步编程解决方案。

语法上，可以把它理解成：Generator 函数是一个状态机，封装了多个内部状态。形式上，Generator 函数是一个普通函数。整个Generator函数就是一个封装的异步任务，或者说是异步任务的容器，异步操作需要暂停的地方，都用yield语句。

Generator函数有两个特征：
（1）function 关键字和函数之间有一个星号(*),且内部使用yield表达式，定义不同的内部状态。
（2）调用Generator函数后，该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象。

执行Generator函数会返回一个遍历器对象，可以依次遍历函数内部的每一个状态。这个遍历器对象有三个方法：next()、throw()、return().

本文转载自 Think体验设计公众号。

原文链接：https://mp.weixin.qq.com/s/QgC2OjVF4pvltte9V_gkIQ

创作场景

Javascript 之 async 四重奏（二）