Promise 反模式

简介:

Promises are about making asynchronous code retain most of the lost properties of synchronous code such as flat indentation and one exception channel. – Bluebird Wiki: Promise Anti Patterns

Promises 是为了让异步代码也能保持这些同步代码的属性:扁平缩进和单异常管道。

Deferred 反模式

这种反模式中,deferred 对象的创建是没有意义的,反而会增加代码的复杂度。

例如:

//Code copyright by Twisternha http://stackoverflow.com/a/19486699/995876 CC BY-SA 2.5
myApp.factory('Configurations', function (Restangular, MotorRestangular, $q) {
var getConfigurations = function () {
var deferred = $q.defer();

MotorRestangular.all('Motors').getList().then(function (Motors) {
//Group by Config
var g = _.groupBy(Motors, 'configuration');
//Map values
var mapped = _.map(g, function (m) {
return {
id: m[0].configuration,
configuration: m[0].configuration,
sizes: _.map(m, function (a) {
return a.sizeMm
})
}
});
deferred.resolve(mapped);
});
return deferred.promise;
};

return {
config: getConfigurations()
}

});

这里的 deferred 对象并没有什么意义,而且可能在出错的情况下无法捕获。

正确的写法应该为:

myApp.factory('Configurations', function (Restangular, MotorRestangular, $q) {
var getConfigurations = function () {
//Just return the promise we already have!
return MotorRestangular.all('Motors').getList().then(function (Motors) {
//Group by Cofig
var g = _.groupBy(Motors, 'configuration');
//Return the mapped array as the value of this promise
return _.map(g, function (m) {
return {
id: m[0].configuration,
configuration: m[0].configuration,
sizes: _.map(m, function (a) {
return a.sizeMm
})
}
});
});
};

return {
config: getConfigurations()
}

});

再举一个例子:

function applicationFunction(arg1) {
var deferred = Promise.pending(); // 获取 Q.defer()
libraryFunction(arg1, function(err, value) {
if (err) {
deferred.reject(err);
} else {
deferred.resolve(value);
}
});
return deferred.promise;
}

这就像重复造轮子,因为回调 API 的封装应该使用 promise 库的 promisification(promise 化)方法实现:

var applicationFunction = Promise.promisify(libraryFunction);

通用 promise 化可能更快,因为可以借助 Promise 的内部操作,还能处理一些极端情况:例如 libraryFunction 同步抛异常或者用到了多个成功值。

什么时候使用 deferred?

必须用的时候。

当要封装的回调 API 和规范不一致时,例如 setTimeout

// 通过 setTimeout 返回 promise
function delay(ms) {
var deferred = Promise.pending();
setTimeout(function() {
deferred.resolve();
}, ms);
return deferred.promise;
}

.then(success, fail) 反模式

这样使用 .then 就像下面这段代码:

var t0;
try {
t0 = doThat();
} catch(e) {
}

// 这样报错发生时会 catch 不到
var staff = JSON.parse(t0);

正常的同步写法是:

try {
var stuff = JSON.parse(doThat());
} catch(e) {
}

所以正确的 .then 用法应该是:

doThat()
.then(function(v) {
return JSON.parse(v);
})
.catch(function(e) {
});

嵌套 Promise

例如:

loadSomething().then(function(something) {
loadAnothering().then(function(another) {
DoSomethingOnThem(something, another);
});
});

如果只是想对两个 promise 的结果做处理,可以使用 Promise.all 方法:

Promise.all([loadSomething, loadAnothering]).then(function(something, another) {
DoSomethingOnThem(something, another);
});

断链

例如:

function anAsyncCall() {
var promise = doSomethingAsync();
promise.then(function() {
somethingComplicated();
});
return promise;
}

这里的问题在于加入 somethingComplicated() 出错的话不会被捕获。promise 应该链式调用。也就是说所有的 then 方法都应该返回一个新的 promise。所以上面代码的正确写法为:

function anAsyncCall() {
var promise = doSomethingAsync();
return promise.then(function() {
somethingComplicated();
});
}

集合

例如需要对一个集合中的每个元素执行异步操作:

function workMyCollection(arr) {
var resultArr = [];
function _recursive(idx) {
if (idx >= resultArr.length) return resultArr;
return doSomethingAsync(arr[idx]).then(function(res) {
resultArr.push(res);
return _recursive(idx + 1);
});
}
return _recursive(0);
}

这里的问题在于需要遍历数组,其实可以用 promise.all 解决:

function workMyCollection(arr) {
return q.all(
arr.map(function(item) {
return doSomethingAsync(item);
})
);
}

总结

最容易犯的错误,没有使用 catch 去捕获 then 里抛出的报错:

// snippet1
somePromise().then(function () {
throw new Error('oh noes');
}).catch(function (err) {
// I caught your error! :)
});

// snippet2
somePromise().then(function resolve() {
throw new Error('oh noes');
}, function reject(err) {
// I didn't catch your error! :(
});

这里的问题在于 snippet2 在 function resolve 中出错时无法捕获。而 catch 则可以。

下面的两个示例返回结果是不一样的:

// example1
Promise.resolve('foo').then(Promise.resolve('bar')).then(function (result) {
console.log(result); // foo
});
// example2
Promise.resolve('foo').then(function () {
return Promise.resolve('bar')
}).then(function (result) {
console.log(result); // bar
});

example2 改变了返回值,因而 result 发生了变化。

更多关键词

async flow control, event loop, callback, promises, generators, async/wait, coroutines

Promises 所做的承诺是保证异步代码顺序执行,并能够链式管理异常和错误。相比使用event loop 和回调(callback)来控制异步代码的顺序执行,Promises 能够让代码更加清晰易懂。generator 更是从语言级别上提供了更好的支持。

V8 优化

V8 有两个编译器:通用编译器和优化编译器。也就是V8 中的 JavaScript 代码总是被编译成机器码后才执行的。

例如 a + b 编译成汇编代码为:

mov eax, a
mov ebx, b
call RuntimeAdd

但如果 a 和 b 都是整数的话,则会被编译成:

mov eax, a
mov ebx, b
add eax, ebx

这样编译后的代码性能会快很多,因为跳过了 JavaScript 对不同类型数据相加的处理。

通用编译器会得到前一种汇编码,优化编译器会得到后一种汇编码。两种汇编代码性能很容易产生 100 倍的差异。但是存在一些模式,这些模式下的代码优化编译器不会去处理(称为bail out)。Promises 属于一种被 bail out 的模式。

他山之石

Python greenlets(基于gevent)

go coroutine

参考资料

转载自:http://taobaofed.org/blog/2016/05/03/promise-anti-patterns/
作者:云翮
目录
相关文章
|
前端开发 Go
Golang深入浅出之-Go语言中的异步编程与Future/Promise模式
【5月更文挑战第3天】Go语言通过goroutines和channels实现异步编程,虽无内置Future/Promise,但可借助其特性模拟。本文探讨了如何使用channel实现Future模式,提供了异步获取URL内容长度的示例,并警示了Channel泄漏、错误处理和并发控制等常见问题。为避免这些问题,建议显式关闭channel、使用context.Context、并发控制机制及有效传播错误。理解并应用这些技巧能提升Go语言异步编程的效率和健壮性。
762 5
Golang深入浅出之-Go语言中的异步编程与Future/Promise模式
|
前端开发 JavaScript Java
每日一博 - Java 异步编程的 Promise 模式 CompletableFuture的前世今生 (上)
每日一博 - Java 异步编程的 Promise 模式 CompletableFuture的前世今生 (上)
578 0
每日一博 - Java 异步编程的 Promise 模式 CompletableFuture的前世今生 (上)
|
前端开发 JavaScript 容器
JS 中Promise 模式
异步模式在web编程中变得越来越重要,对于web主流语言Javscript来说,这种模式实现起来不是很利索,为此,许多Javascript库(比如 jQuery和Dojo)添加了一种称为promise的抽象(有时也称之为deferred)。
993 0
|
4月前
|
前端开发 JavaScript API
一文吃透 Promise 与 async/await,异步编程也能如此简单!建议收藏!
在前端开发中,异步编程至关重要。本文详解了同步与异步的区别,通过生活化例子帮助理解。深入讲解了 Promise 的概念、状态及链式调用,并引入 async/await 这一语法糖,使异步代码更清晰易读。还介绍了多个异步任务的组合处理方式,如 Promise.all 与 Promise.race。掌握这些内容,将大幅提升你的异步编程能力,写出更优雅、易维护的代码,助力开发与面试!
253 0
一文吃透 Promise 与 async/await,异步编程也能如此简单!建议收藏!
|
4月前
|
前端开发 JavaScript API
JavaScript异步编程:从Promise到async/await
JavaScript异步编程:从Promise到async/await
472 204
|
前端开发 JavaScript 开发者
Async 和 Await 是基于 Promise 实现
【10月更文挑战第30天】Async和Await是基于Promise实现的语法糖,它们通过简洁的语法形式,借助Promise的异步处理机制,为JavaScript开发者提供了一种更优雅、更易于理解和维护的异步编程方式。
265 1
|
10月前
|
前端开发
使用 async/await 结合 try/catch 处理 Promise.reject()抛出的错误时,有什么需要注意的地方?
使用 async/await 结合 try/catch 处理 Promise.reject()抛出的错误时,有什么需要注意的地方?
413 57
|
前端开发
如何使用async/await解决Promise的缺点?
总的来说,`async/await` 是对 Promise 的一种很好的补充和扩展,它为我们提供了更高效、更易读、更易维护的异步编程方式。通过合理地运用 `async/await`,我们可以更好地解决 Promise 的一些缺点,提升异步代码的质量和开发效率。
258 64
|
前端开发 JavaScript
async/await和Promise在性能上有什么区别?
性能优化是一个综合性的工作,除了考虑异步模式的选择外,还需要关注代码的优化、资源的合理利用等方面。
354 63