Promise- 异步编程的强大工具
如上一篇《黑魔法,白魔法,能摸鱼的就是好魔法》中提到,我最近为后续开发一些数据类产品,在通过尝试编写微信小程序,积累相关技术储备。面向项目实践的针对性学习,是个人在技术方面获得快速成长的首选方法。因此,在短暂的时间里,我对作为微信开发平台主要语言Javascript有了更多了解,觉得其中有很多既有趣又值得分享的内容,比如异步编程。这篇就来聊聊这个话题,以及Javascript中为此提供的一个强大设计Promise。
- 异步编程的初识
首先想象一个日常场景:当你在网页或小程序上,点击一个按钮,向网络远端请求数据,由于各种不确定性,我们其实无法估计数据到底需要多长时间才能返回,也许几百毫秒,也许几分钟,甚至有可能在数据返回前,三体人通过水滴袭击了所有主干通讯,导致我们所请求的数据再也不可能返回,于是,在数据返回前,网页或小程序处于卡死状态,用户除了盯着惨白的屏幕发呆,再无法进行其他操作。这是个多么悲惨的故事啊。怎么解决呢,这就需要用到异步编程,或者说异步调用。 异步调用,是指函数在尚未全部执行完成函数体功能时,便尽早返回调用者,以便让调用者继续执行后续操作,而当函数体功能执行完成后,再设法通知调用者。如前文《软件程序结构演变不完全简史》所说,这是一种软件程序结构的新模式,让程序尽早返回调用者,从而使网页或小程序能够继续执行其他用户响应事件,确保用户界面保持流畅、不卡死,同时也能让程序员以一种合理的思考逻辑和编码方式,来有效处理IO、请求、定时任务等需要等待的任务,同时它们还与程序主逻辑的执行保持并行不悖。这的确是一种先进的编程技术。 微信作为国民级应用,为了确保用户体验顺畅,自然将其所提供的大多数常用接口函数,都以异步调用的形式呈现。可以说,只有把异步编程的基本范式熟练掌握并应用起来,小程序或现代网页应用的开发,才算是入了门。 2. Promise的诞生
最简单的异步编程可以通过回调函数(callback)实现。但是,当异步操作频繁且复杂时,回调函数很容易导致“回调地狱”(callback hell)——代码层层嵌套,难以阅读和维护。 为了解决这一问题,ES6(也被称为 ECMAScript 2015, 是 JavaScript 语言的一个重大版本更新)正式引入了 Promise 对象,一个代表了未来将要发生的事件的结果。Promise有三种状态:Pending(进行中)、Fulfilled(已成功)和 Rejected(已失败)。 2.1 基本使用
创建一个Promise非常简单:
let promise = new Promise(function(resolve, reject) {
// … 在这里编写具体的异步操作过程 …
if (/* 判断是否操作成功 */){
resolve(value) // 将处理完成的数据,传给resolve函数
} else {
reject(error) // 构造错误信息(字符串),传给reject函数
}
}) 这里,Promise的构造需要以一个函数作为参数,该函数有两个参数,resolve和reject,均为函数类型,分别处理成功和失败的情况。这个用于构造Promise的函数,通常并不在其他地方被调用,因此如上面的代码所示,它可以不用指定函数名,而仅在构造过程中,嵌入(inline)地直接写出该实现即可。 Promise对象一旦创建,通过调用它的 .then() 函数,就可实际开始执行它所定义的异步操作。
promise.then(function(value) {
// 处理成功情况
}, function(error) {
// 处理失败情况
}) 上述 .then() 函数是立即返回的。传给它的两个参数,都是函数,前一个是处理成功情况的,对应之前的 resolve,后一个是处理失败情况的,对应之前的 reject。当上面描述的异步操作执行完成后,根据结果成功与否,分别调用 resolve 或 reject ,最终其实也就传递到此,分别调用了这里定义的第一个或第二个函数。
.then() 函数其实只是建立了联系,告诉异步过程完成后,该回调哪个函数(包括成功情况和失败情况)。 当然,这两个函数也可以分开来写,分别提供给 .then() 和 .catch()。
promise.then(function(value) {
// 处理成功情况
})
.catch(function(error) {
// 处理失败情况
}) 上述 .then 只传入一个参数,即处理成功情况的函数。而对于失败情况,放到了单独的 .catch() 中。
2.2 链式调用 Promise真正的强大之处在于它的链式调用(chaining)特性:
promise.then(function(value) {
// 第一阶段
…
return new Promise(…) // 返回一个新的Promise
})
.then(function(value) {
// 第二阶段
}) 在上面的代码中,传递给第一个 .then() 函数的回调函数中,其末尾返回了一个新的Promise,这使得当该 .then() 返回后,可以继续调用 .then() 函数,传递一个新的回调函数。这两个回调函数是顺序运行的,第二个回调函数必然在第一个回调函数结束后才会被调用。从而,实现了异步链式调用。同样地,上面整个代码(包括两个 .then())都是在建立好回调链式关系后就立即返回的,并不影响后续用户界面响应,回调函数的真正执行,是在异步操作完成后,才单独发生的。
如果有多个异步调用,依葫芦画瓢,依次进行链式调用即可:
promise.then(function(value) {
// 第一阶段
})
.then(function(value) {
// 第二阶段
})
.then(function(value) {
// 第三阶段
})
// … 这里可以依次写入多个阶段
.then(function(value) {
// 第N阶段
}) 2.3 错误处理
在链式调用中,可以在每个阶段的 .then() 后加上 .catch() 进行错误处理即可:
promise
.then(result => {/* 第一阶段处理成功场景 */})
.catch(error => {/* 第一阶段处理错误 */})
.then(result => {/* 第二阶段处理成功场景 */})
.catch(error => {/* 第二阶段处理错误 */})
// … 这里可以依次写入多个阶段
.then(result => {/* 第N阶段处理成功场景 */})
.catch(error => {/* 第N阶段处理错误 */}) 上述 .catch() 都是可选的,如果不处理,该阶段所产生的错误,会累积到最后一个 .catch() 被一次性处理。这种方式比传统的 try…catch (一层套一层)写法优雅多了。 值得一提的是,Promise 本身其实就是基于 try…catch 来实现的。我们可以通过在回调函数中的错误抛出,看出相应端倪。
promise
.then(res => {
// 阶段一
if (/* 出现错误 */) {
throw new Error('Error message')
}
return new Promise(...)
})
.then(res => {
// 阶段二
if (/* 出现错误 */) {
return Promise.reject('Error message')
}
return new Promise(...)
})
.catch(error => {
console.error('Caught an error:', error);
})
上面的示例代码中,两个阶段分别以不同形式抛出错误,阶段一通过传统异常机制抛出异常,阶段二通过调用Promise.reject()函数,两者在结果上是等效的,都会将错误传递到最终的那个 .catch() 中。
- Promise的进阶用法
3.1 同时处理多个Promise Promise.all方法用于将多个Promise实例,包装成一个新的Promise实例。
Promise.all([promise1, promise2]).then(function(res) {
// 当 promise1 和 promise2 都完成时执行
})
.catch(error => {
// 任何一个或多个 promise 失败即触发
}); 3.2 箭头式函数定义 不写出函数名,而将函数体直接嵌入(inline)地写在需要提供函数的地方,这种方式导致了关于“this 到底指向哪里”的诸多问题。 为了确保 this 指向当前所在的对象(比如小程序中的Page),被优先推荐的方式,是采用箭头式函数定义:
Page({
onLoad: function() {
promise.then(value => {
// 在这里使用this,所指的就是Page对象
...
})
}
} 3. 总结
简单总结几点,作为应遵循的实践建议:
始终返回Promise: 在then链中始终返回新的值或Promise,以便可以继续链式调用。
分离链条: 不要在一个then中既处理resolve又处理reject。应该使用.then()处理resolve,使用.catch()处理reject,使逻辑清晰。
错误处理: 保证链的末端有.catch()来捕获前面可能出现的任何错误。
并行执行: 利用Promise.all()来并行处理多个异步操作。 Promise是JavaScript异步编程中的一大利器。通过使用Promise,我们可以写出更加清晰和可维护性更高的异步代码。虽然随着async/await的出现,使得异步代码更加简洁,但Promise仍是其背后的基石。
注:本文首发表于“不靠谱颜论”公众号,并同步至本站。