写点什么

JavaScript 异步编程的 Promise 模式

  • 2011-09-15
  • 本文字数:4796 字

    阅读完需:约 16 分钟

异步模式在 web 编程中变得越来越重要,对于 web 主流语言 Javascript 来说,这种模式实现起来不是很利索,为此,许多 Javascript 库(比如 jQuery 和 Dojo)添加了一种称为 promise 的抽象(有时也称之为 deferred)。通过这些库,开发人员能够在实际编程中使用 promise 模式。IE 官方博客最近发表了一篇文章,详细讲述了如何使用 XMLHttpRequest2 来实践 promise 模式。我们来了解一下相关的概念和应用。

考虑这样一个例子,某网页存在异步操作(通过 XMLHttpRequest2 或者 Web Workers )。随着 Web 2.0 技术的深入,浏览器端承受了越来越多的计算压力,所以“并发”具有积极的意义。对于开发人员来说,既要保持页面与用户的交互不受影响,又要协调页面与异步任务的关系,这种非线性执行的编程要求存在适应的困难。先抛开页面交互不谈,我们能够想到对于异步调用需要处理两种结果——成功操作和失败处理。在成功的调用后,我们可能需要把返回的结果用在另一个 Ajax 请求中,这就会出现“函数连环套”的情况(在笔者的另一篇文章《 NodeJS 的异步编程风格》中有详细的解释)。这种情况会造成编程的复杂性。看看下面的代码示例(基于 XMLHttpRequest2):

复制代码
function searchTwitter(term, onload, onerror) {
    var xhr, results, url;
    url = 'http://search.twitter.com/search.json?rpp=100&q=' + term;
    xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.onload = function (e) {
        if (this.status === 200) {
            results = JSON.parse(this.responseText);
            onload(results);
        }
    };
    xhr.onerror = function (e) {
        onerror(e);
    };
    xhr.send();
}
function handleError(error) {
    /* handle the error */
}
function concatResults() {
    /* order tweets by date */
}
function loadTweets() {
    var container = document.getElementById('container');
    searchTwitter('#IE10', function (data1) {
        searchTwitter('#IE9', function (data2) {
            /* Reshuffle due to date */
            var totalResults = concatResults(data1.results, data2.results);
            totalResults.forEach(function (tweet) {
                var el = document.createElement('li');
                el.innerText = tweet.text;
                container.appendChild(el);
            });
        }, handleError);
    }, handleError);
}

上面的代码其功能是获取 Twitter 中 hashtag 为 IE10 和 IE9 的内容并在页面中显示出来。这种嵌套的回调函数难以理解,开发人员需要仔细分析哪些代码用于应用的业务逻辑,而哪些代码处理异步函数调用的,代码结构支离破碎。错误处理也分解了,我们需要在各个地方检测错误的发生并作出相应的处理。

为了降低异步编程的复杂性,开发人员一直寻找简便的方法来处理异步操作。其中一种处理模式称为 promise,它代表了一种可能会长时间运行而且不一定必须完整的操作的结果。这种模式不会阻塞和等待长时间的操作完成,而是返回一个代表了承诺的(promised)结果的对象。

考虑这样一个例子,页面代码需要访问第三方的 API,网络延迟可能会造成响应时间较长,在这种情况下,采用异步编程不会影响整个页面与用户的交互。promise 模式通常会实现一种称为 then 的方法,用来注册状态变化时对应的回调函数。比如下面的代码示例:

复制代码
searchTwitter(term).then(filterResults).then(displayResults);

promise 模式在任何时刻都处于以下三种状态之一:未完成(unfulfilled)、已完成(resolved)和拒绝(rejected)。以 CommonJS Promise/A 标准为例,promise 对象上的 then 方法负责添加针对已完成和拒绝状态下的处理函数。then 方法会返回另一个 promise 对象,以便于形成 promise 管道,这种返回 promise 对象的方式能够支持开发人员把异步操作串联起来,如 then(resolvedHandler, rejectedHandler); 。resolvedHandler 回调函数在 promise 对象进入完成状态时会触发,并传递结果;rejectedHandler 函数会在拒绝状态下调用。

有了 promise 模式,我们可以重新实现上面的 Twitter 示例。为了更好的理解实现方法,我们尝试着从零开始构建一个 promise 模式的框架。首先需要一些对象来存储 promise。

复制代码
var Promise = function () {
        /* initialize promise */
    };

接下来,定义 then 方法,接受两个参数用于处理完成和拒绝状态。

复制代码
Promise.prototype.then = function (onResolved, onRejected) {
    /* invoke handlers based upon state transition */
};

同时还需要两个方法来执行理从未完成到已完成和从未完成到拒绝的状态转变。

复制代码
Promise.prototype.resolve = function (value) {
    /* move from unfulfilled to resolved */
};
Promise.prototype.reject = function (error) {
    /* move from unfulfilled to rejected */
};

现在搭建了一个 promise 的架子,我们可以继续上面的示例,假设只获取 IE10 的内容。创建一个方法来发送 Ajax 请求并将其封装在 promise 中。这个 promise 对象分别在 xhr.onload 和 xhr.onerror 中指定了完成和拒绝状态的转变过程,请注意 searchTwitter 函数返回的正是 promise 对象。然后,在 loadTweets 中,使用 then 方法设置完成和拒绝状态对应的回调函数。

复制代码
function searchTwitter(term) {
    var url, xhr, results, promise;
    url = 'http://search.twitter.com/search.json?rpp=100&q=' + term;
    promise = new Promise();
    xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.onload = function (e) {
        if (this.status === 200) {
            results = JSON.parse(this.responseText);
            promise.resolve(results);
        }
    };
    xhr.onerror = function (e) {
        promise.reject(e);
    };
    xhr.send();
    return promise;
}
function loadTweets() {
    var container = document.getElementById('container');
    searchTwitter('#IE10').then(function (data) {
        data.results.forEach(function (tweet) {
            var el = document.createElement('li');
            el.innerText = tweet.text;
            container.appendChild(el);
        });
    }, handleError);
}

到目前为止,我们可以把 promise 模式应用于单个 Ajax 请求,似乎还体现不出 promise 的优势来。下面来看看多个 Ajax 请求的并发协作。此时,我们需要另一个方法 when 来存储准备调用的 promise 对象。一旦某个 promise 从未完成状态转化为完成或者拒绝状态,then 方法里对应的处理函数就会被调用。when 方法在需要等待所有操作都完成的时候至关重要。

复制代码
Promise.when = function () {
    /* handle promises arguments and queue each */
};

以刚才获取 IE10 和 IE9 两块内容的场景为例,我们可以这样来写代码:

复制代码
var container, promise1, promise2;
container = document.getElementById('container');
promise1 = searchTwitter('#IE10');
promise2 = searchTwitter('#IE9');
Promise.when(promise1, promise2).then(function (data1, data2) {
    /* Reshuffle due to date */
    var totalResults = concatResults(data1.results, data2.results);
    totalResults.forEach(function (tweet) {
        var el = document.createElement('li');
        el.innerText = tweet.text;
        container.appendChild(el);
    });
}, handleError);

分析上面的代码可知,when 函数会等待两个 promise 对象的状态发生变化再做具体的处理。在实际的 Promise 库中,when 函数有很多变种,比如 when.some()、when.all()、when.any() 等,读者从函数名字中大概能猜出几分意思来,详细的说明可以参考 CommonJS 的一个 promise 实现 when.js

除了 CommonJS,其他主流的 Javascript 框架如 jQuery、Dojo 等都存在自己的 promise 实现。开发人员应该好好利用这种模式来降低异步编程的复杂性。我们选取 Dojo 为例,看一看它的实现有什么异同。

Dojo 框架里实现 promise 模式的对象是 Deferred,该对象也有 then 函数用于处理完成和拒绝状态并支持串联,同时还有 resolve 和 reject,功能如之前所述。下面的代码完成了 Twitter 的场景:

复制代码
function searchTwitter(term) {
    var url, xhr, results, def;
    url = 'http://search.twitter.com/search.json?rpp=100&q=' + term;
    def = new dojo.Deferred();
    xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.onload = function (e) {
        if (this.status === 200) {
            results = JSON.parse(this.responseText);
            def.resolve(results);
        }
    };
    xhr.onerror = function (e) {
        def.reject(e);
    };
    xhr.send();
    return def;
}
dojo.ready(function () {
    var container = dojo.byId('container');
    searchTwitter('#IE10').then(function (data) {
        data.results.forEach(function (tweet) {
            dojo.create('li', {
                innerHTML: tweet.text
            }, container);
        });
    });
});

不仅如此,类似 dojo.xhrGet 方法返回的即是 dojo.Deferred 对象,所以无须自己包装 promise 模式。

复制代码
var deferred = dojo.xhrGet({
    url: "search.json",
    handleAs: "json"
});
deferred.then(function (data) {
    /* handle results */
}, function (error) {
    /* handle error */
});

除此之外,Dojo 还引入了 dojo.DeferredList, 支持开发人员同时处理多个 dojo.Deferred 对象,这其实就是上面所提到的 when 方法的另一种表现形式。

复制代码
dojo.require("dojo.DeferredList");
dojo.ready(function () {
    var container, def1, def2, defs;
    container = dojo.byId('container');
    def1 = searchTwitter('#IE10');
    def2 = searchTwitter('#IE9');
    defs = new dojo.DeferredList([def1, def2]);
    defs.then(function (data) {
        // Handle exceptions
        if (!results[0][0] || !results[1][0]) {
            dojo.create("li", {
                innerHTML: 'an error occurred'
            }, container);
            return;
        }
        var totalResults = concatResults(data[0][1].results, data[1][1].results);
        totalResults.forEach(function (tweet) {
            dojo.create("li", {
                innerHTML: tweet.text
            }, container);
        });
    });
});

上面的代码比较清楚,不再详述。

说到这里,读者可能已经对 promise 模式有了一个比较完整的了解,异步编程会变得越来越重要,在这种情况下,我们需要找到办法来降低复杂度,promise 模式就是一个很好的例子,它的风格比较人性化,而且主流的 JS 框架提供了自己的实现。所以在编程实践中,开发人员应该尝试这种便捷的编程技巧。需要注意的是,promise 模式的使用需要恰当地设置 promise 对象,在对应的事件中调用状态转换函数,并且在最后返回 promise 对象。

技术社区对异步编程的关注也在升温,国内社区也发出了自己的声音。资深技术专家老赵就发布了一套开源的异步开发辅助库 Jscex,它的设计很巧妙,抛弃了回调函数的编程方式,采用一种“线性编码、异步执行”的思想,感兴趣的读者可以查看这里

不仅仅是前端的 JS 库,如今火热的 NodeJS 平台也出现了许多第三方的 promise 模块,具体的清单可以访问这里

注:本文中的所有代码示例均来自于 IE 官方博客。

作者的微信公众号“老崔瞎编”,关注 IT 趋势,承载前沿、深入、有温度的内容。感兴趣的读者可以搜索 ID:laocuixiabian,或者扫描下方二维码加关注。

2011-09-15 01:4275601
用户头像

发布了 501 篇内容, 共 262.8 次阅读, 收获喜欢 61 次。

关注

评论

发布
暂无评论
发现更多内容

Go 事,如何成为一个Gopher ,并在7天找到 Go 语言相关工作,第1篇

梦想橡皮擦

Python 爬虫 8月月更

Android进阶(十五)socket通信实现聊天室应用开发总结

No Silver Bullet

android 8月月更 开发总结

易周金融分析 :支付科技着力服务产业数字化升级

易观分析

金融 产业数字化 分析 支付科技

PyTorch 与 TensorFlow 怎么选?

博文视点Broadview

阿里云杨红军:应用管理——云上资源DevOps最佳实践

阿里云弹性计算

阿里云 DevOps 运维 应用管理 云上资源管理

即日起,ONES 团队版50人以下免费

万事ONES

2022 CCF国际AIOps挑战赛决赛暨AIOps研讨会成功举办

BizSeer必示科技

人工智能 AIOPS

SAP ABAP Netweaver 服务器的标准登录方式讲解

汪子熙

web开发 web服务器 abap Netweaver 8月月更

开源一夏 | 如何使用Java操作华为对象存储OBS删除一个目录?

wljslmz

Java 开源 对象存储 华为云 8月月更

STM32入门开发 介绍IIC总线、读写AT24C02(EEPROM)(采用模拟时序)

DS小龙哥

8月月更

3 分钟看 3 个 JS 小把戏

掘金安东尼

JavaScript 前端 8月月更

NFT服务平台如何选择——搭建NFT平台技术

开源直播系统源码

数字藏品 数字藏品软件开发 数字藏品系统软件开发 数字藏品交易平台开发

EasyNLP集成K-BERT算法,借助知识图谱实现更优Finetune

阿里云大数据AI技术

深度学习 阿里云 算法 开源技术 基础模型

一文讲透Java核心技术之高可扩展利器SPI

冰河

Java 程序员 架构师 spi 核心技术

首批成员!博云入选信通院“可信边缘计算推进计划”

BoCloud博云

云计算 开源 云原生

干货复盘 | 银行数智化转型十大趋势

易观分析

金融 银行 数智化转型

令人上头的AI论文(上) | IDP Inspiration

Baihai IDP

面试官偷偷告诉我:原来这样优化提升接口的性能

知识浅谈

API 优化 8月月更

HttpClient 在vivo内销浏览器的高并发实践优化

vivo互联网技术

Java 高并发 HttpClient

virtio 1.2 来了!龙蜥社区携手业界打造新版虚拟化 IO 标准

OpenAnolis小助手

开源 虚拟化 龙蜥技术 virtio

零门槛掌握基于大模型技术的AIGC场景应用

文心大模型

如何利用CANN DVPP进行图片的等比例缩放?

华为云开发者联盟

人工智能 图像 昇腾AI

面试官:如何设计更好的分布式系统?

Java全栈架构师

程序员 架构 面试 分布式 后端

科技赋能会展!3DCAT助力广东旅博会元宇宙场景的首次搭建

3DCAT实时渲染

云计算 元宇宙

RT-Thread记录(八、理解 RT-Thread 内存管理)

矜辰所致

内存管理 RT-Thread 8月月更

CCF国际AIOps挑战赛

云桌派

2分钟一图看懂AntDB数据库产品

亚信AntDB数据库

AntDB 国产数据库 aisware antdb

2篇论文入选KDD 2022!腾讯广告持续探索效果提升新思路

Geek_2d6073

极狐 GitLab 冷知识:在 Gitlab CI Pipeline 中进行 Git Push 操作

郭旭东

极狐GitLab JIHULAB 101

Java 异步调用原理与实战

PPPHUANG

性能优化 线程池 Async Java core java nio

SAP ABAP 关键字语法图和 ABAP 代码自动生成工具 Code Composer

汪子熙

Java SAP abap commerce 8月月更

JavaScript异步编程的Promise模式_JavaScript_崔康_InfoQ精选文章