JS分块文件上传承诺

Question

我在建一个块文件上传器。我明白承诺是最好的处理结果的方法，但我仍然不能把我应该如何从外部捕获承诺的想法缠绕起来。

caller.js

let fileUploader = new ChunkedUpload()
    fileUploader.setFile(file)
    fileUploader.upload().then(result => {
       // Here I'd like to catch the current result of the file
       // If it's not uploaded, I need the percentage and continue 
       // If it is I need the response from the API
       console.log(result)
    })

uploader.js

upload() {
    let totalChunks = Math.ceil(this._file.size/this._sliceSize)

    return this._chunk(0, 0, totalChunks)
}

_chunk(start, chunk, totalChunks) {
    let lastChunk = false
    let end = start + this._sliceSize

    if (this._file.size - end < 0) {
        end = this._file.size
        lastChunk = true
    }

    let slice = this._sliceFile(this._file, start, end)

    let formData = new FormData()
    formData.append('chunk', chunk)
    formData.append('chunks', totalChunks)
    formData.append('file', slice)

    return new Promise((resolve, reject) => {
        axios.post(this._url, formData).then(response => {
            if (lastChunk) {
                // This part is okay, it returns the result
                resolve({
                    uploaded: true,
                    url: response.data,
                    uploadPercentage: 100,
                    uploadSize: this.formatBytes(file.size)
                });

            } else {
                // Here's the issue. Next chunk upload is called, 
                // however I cannot track the process in caller.js
                resolve(this._chunk(
                    start += this._sliceSize,
                    chunk += 1,
                    totalChunks
                ));
            }
        })
    })
}

我接受任何评论和任何。也许我的方法是错的，请告诉我！

Answer 1

承诺应该被用于一次性回调-成功或错误。

你想要的是“进步”信息。

这样你就应该：

• 使用回调函数代替获取有关进度的详细信息；或
• 听并发出事件；

但是，如果你真的想使用诺言而不是使用回调或事件，我建议：

返回包含详细信息的承诺和一个名为continue()的方法，该方法必须被调用，因此该过程可能会继续。

下面是我给你的密码：

caller.js

let fileUploader = new ChunkedUpload()
    fileUploader.setFile(file)
    var callback = result => {
       // Here I'd like to catch the current result of the file
       // If it's not uploaded, I need the percentage and continue 
       // If it is I need the response from the API
       console.log(result);
       if (result.uploaded) {
           console.log('DONE');
       } else {
           console.log('STILL UPLOADING...');
           result.continue()
               .then(callback);
       }
    }
    fileUploader.upload().then(callback);

uploader.js

upload() {
    let totalChunks = Math.ceil(this._file.size/this._sliceSize)

    return this._chunk(0, 0, totalChunks)
}

_chunk(start, chunk, totalChunks) {
    let lastChunk = false
    let end = start + this._sliceSize

    if (this._file.size - end < 0) {
        end = this._file.size
        lastChunk = true
    }

    let slice = this._sliceFile(this._file, start, end)

    let formData = new FormData()
    formData.append('chunk', chunk)
    formData.append('chunks', totalChunks)
    formData.append('file', slice)

    return new Promise((resolve, reject) => {
        axios.post(this._url, formData).then(response => {
            if (lastChunk) {
                // This part is okay, it returns the result
                resolve({
                    uploaded: true,
                    url: response.data,
                    uploadPercentage: 100,
                    uploadSize: this.formatBytes(file.size)
                });

            } else {
                // Here's the issue. Next chunk upload is called, 
                // however I cannot track the process in caller.js
                // you may include in the object below the metrics you need
                resolve({
                    uploaded: false,
                    continue: () => {
                      return this._chunk(
                          start += this._sliceSize,
                          chunk += 1,
                          totalChunks
                    }
                });
            }
        })
    })
}

Answer 2

谢谢拉法！你的回答把我引向了各种事件。

显然，正如@Bergi所提到的那样，我陷入了承诺构造反模式，捕捉到一个拒绝将导致另一个变量定义。

谢谢大家！