我对es6 promises中this的上下文有点困惑。下面是一些使用Promise处理异步函数的代码。
/**
* Generic recreation of apple photobooth on electron (javascript practice)
*/
class Photobooth {
constructor(height=320, width=320) {
this._height = 320;
this._width = 320;
this.video = video ? $(video) : $(document.createElement('video'));
}
getStream() {
return new Promise(function (resolve, reject) {
return navigator.webkitGetUserMedia({ video: true }, resolve, reject);
});
}
streamTo(stream, element) {
element.appendChild(self.video);
var self = this;
return new Promise(function (resolve, reject) {
self.video.attr('src', window.URL.createObjectUrl(stream));
self.video.on('loadedmetadata', function () {
self.video.get(0);
resolve();
});
});
}
}我想实现链接,使其看起来像下面这样。
Photobooth
.getStream()
.streamTo(document.body);Lodash具有类似的链式功能。
// gets sorted scores for class.
_([
{ name: 'Jeff', scores: [0.78, 0.85] },
{ name: 'Jessica', scores: [0.84, 0.68] },
{ name: 'Tim', scores: [0.92, 0.67] }
])
.pluck('scores')
.flatten()
.map(x => x * 100)
.sortBy()
.value();如何在javascript中实现基于类的promise-chaining?
发布于 2015-07-26 00:42:40
我被es6 promises中的上下文搞糊涂了
promises没有什么特别之处,this一如既往地工作。对于ES6,它确实简化了使用箭头函数进行promise回调的工作。
我想实现链接
目前,您的函数确实返回promises,尽管是使用then,但promises确实是连锁的。对于自定义链接,就像下划线一样,您必须将数据(在本例中为promises)包装在具有所需方法的自定义对象中。
但是,在您特定情况下,您可能根本不使用getStream方法,它似乎是您的PhotoBoth实例的唯一目的,因此您可以将其放入构造函数中。我会这么做的
class Photobooth {
constructor(video=document.createElement('video'), height=320, width=320) {
this._height = 320;
this._width = 320;
this.video = $(video);
this.initStream()
}
initStream() {
this.stream = new Promise((resolve, reject) =>
navigator.webkitGetUserMedia({video: true}, resolve, reject);
);
}
streamTo(element) {
this.video.appendTo(element);
return this.stream.then((stream) => new Promise((resolve, reject) => {
this.video.prop('src', window.URL.createObjectUrl(stream));
this.video.on('loadedmetadata', function(e) {
resolve(this);
});
}), (err) => {
$(element).text("Failed to get stream");
throw err;
});
}
}https://stackoverflow.com/questions/31615573
复制相似问题