Javascript 之 async 四重奏(二)

阅读数:2 2019 年 12 月 31 日 15:42

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() 方法的使用,还有其他的方法:
Javascript之async四重奏(二)

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

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

评论

发布