JS Promise-在不兑现承诺的情况下返回一些结果

时间:2019-05-23 12:03:51

标签: javascript promise

我正在执行一个使用Firebase存储上传视频的功能。 我想获取上载过程的进度状态,并通过Promise获得该过程的成功或失败。

这是代码:

video.service.js

function uploadVideo(generatedFileName, file) {
  return new Promise((resolve, reject) => {
    firebaseStorageReference
      .child("videos/" + generatedFileName)
      .put(file)
      .on(
        "state_changed",
        snapshot => ???,
        error => reject(error),
        () => resolve(file)
      );
  });
}

video.component.js

function uploadVideo() {
    videoService
      .uploadVideo()
      .then(video => success(video))
      .catch(error => error());
};

我想在video.component.js文件中触发某种事件以检测进度变化。但是,我仍然希望我的诺言能够在文件成功解析后实现。

有什么建议吗?

谢谢

2 个答案:

答案 0 :(得分:1)

从firebase文档中:

  1. put function returns UploadTask object
  2. UploadTask provide a way to get updates on the progress of the upload

一种实现目标的方法是将回调作为参数发送到uploadVideo,并在每次UploadTask告诉我们有关上传进度的更新时使用该回调:

function uploadVideo(generatedFileName, file, progressCallback) {
  return new Promise((resolve, reject) => {
    firebaseStorageReference
      .child("videos/" + generatedFileName)
      .put(file)
      .on(
        firebase.storage.TaskEvent.STATE_CHANGED,
        'next': snapshot => {
            const percent = snapshot.bytesTransferred / snapshot.totalBytes * 100;
            progressCallback(percent);
         },
        'error': error=> reject(error),
        'complete': complete => resolve(complete)
      );
  });
}

此代码未经测试!我只是更改了他们的示例,以使其满足您的需求。

答案 1 :(得分:0)

我会使用一个好的旧回调来附加

function uploadVideo(attachProgressEvent) {
  return new Promise((resolve, reject) => {
    let i = 0;

    Array.from(new Array(10)).forEach((x, xi) => {
      setTimeout(() => {
        if (typeof attachProgressEvent === 'function') {
          attachProgressEvent(i, 10);
        }

        i += 1;

        if (i === 10) {
          resolve();
        }
      }, xi * 100);
    });
  });
}


uploadVideo((i, tot) => {
    console.log(`Progress of ${i}/${tot}`);
  })
  .then(() => {
    console.log('All done');
  });

相关问题