javascript – 扩展承诺以支持进度报告

前端之家收集整理的这篇文章主要介绍了javascript – 扩展承诺以支持进度报告前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

因此,我想扩展Promise以获得“进度”部分,以便我可以使用Promise为我的异步任务报告它的进度.

因此我像这样扩展了Promise:

  1. class promisePro extends Promise {
  2. constructor(fn) {
  3. super(function (resolve,reject) {
  4. fn(resolve,reject,this._progress.bind(this));
  5. });
  6. }
  7. _progress(v) {
  8. if (this.progressCB)
  9. this.progressCB(v);
  10. }
  11. progress(fn) {
  12. this.progressCB = fn;
  13. }
  14. }

并使用它:

  1. function ptest() {
  2. return new promisePro((resolve,progress) => {
  3. setTimeout(() => {
  4. progress(0.3)
  5. },1000)
  6. setTimeout(() => {
  7. progress(0.6)
  8. },2000)
  9. setTimeout(() => {
  10. progress(0.9)
  11. },3000)
  12. setTimeout(() => {
  13. resolve(1)
  14. },4000)
  15. })
  16. }

并使用itt:

  1. ptest().then((r) => {
  2. console.log('finiished: ' + r)
  3. }).progress((p) => {
  4. console.log('progress: ' + p)
  5. })

并得到此错误

  1. ptest().then((r) => {
  2. ^
  3. TypeError: Promise resolve or reject function is not callable

我在这做错了什么?

我使用的是节点7.5,更新到8.4.两个版本都有错误.

谢谢.

@H_404_42@最佳答案
这里有一些值得关注的问题.

首先,在调用超级函数之前,“this”关键字是未定义的.因此,您可以将构造函数更改为类似下面的内容,使用函数将实例化变量引用到sel

  1. constructor(fn) {
  2. let self;
  3. super(function (resolve,reject) {
  4. fn(resolve,value => self._progress(value));
  5. });
  6. self = this;
  7. }

其次,请记住,您正在扩展promise类型,因此当您在其上调用“then”函数时,它将返回一个新的promise对象,而不是新的promise类型,因此progress函数在那里是未定义的.一种避免这种情况的方法是在进度函数中返回“this”,并在使用之前使用进度函数,如下所示

  1. progress(fn) {
  2. this.progressCB = fn;
  3. return this;
  4. }

并用于使用

  1. ptest().progress((p) => {
  2. console.log('progress: ' + p)
  3. }).then((r) => {
  4. console.log('finiished: ' + r)
  5. })

但是现在你将失去承诺的好处,并且无法通过进步链接更多的承诺(仍然取决于你的用例).

作为对不同方法的建议,您是否尝试过使用Observables?
http://reactivex.io/rxjs/

猜你在找的JavaScript相关文章