Javascript 之 async 四重奏（二）

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