首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >在类中实现链接的es6 promises

在类中实现链接的es6 promises
EN

Stack Overflow用户
提问于 2015-07-25 00:34:09
回答 1查看 431关注 0票数 0

我对es6 promises中this的上下文有点困惑。下面是一些使用Promise处理异步函数的代码。

代码语言:javascript
复制
/**
* 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();
      });
    });
  }
}

我想实现链接,使其看起来像下面这样。

代码语言:javascript
复制
Photobooth
  .getStream()
  .streamTo(document.body);

Lodash具有类似的链式功能。

代码语言:javascript
复制
// 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?

EN

回答 1

Stack Overflow用户

发布于 2015-07-26 00:42:40

我被es6 promises中的上下文搞糊涂了

promises没有什么特别之处,this一如既往地工作。对于ES6,它确实简化了使用箭头函数进行promise回调的工作。

我想实现链接

目前,您的函数确实返回promises,尽管是使用then,但promises确实是连锁的。对于自定义链接,就像下划线一样,您必须将数据(在本例中为promises)包装在具有所需方法的自定义对象中。

但是,在您特定情况下,您可能根本不使用getStream方法,它似乎是您的PhotoBoth实例的唯一目的,因此您可以将其放入构造函数中。我会这么做的

代码语言:javascript
复制
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;
    });
  }
}
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/31615573

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档