Promise経由でダウンロードプログラムを送信する

Question

helperFileを使用すると、Promiseを返すことによってdownload completeをコンポーネントに送り返すことができます。しかし、どのように進捗変数をコンポーネントに送り返して、後でダウンロードプログレスバーを実装することができますか？

コンポーネントの中にすべてのコードを入れてもそれはできますが、それは恐ろしいことです。

ヘルパーファイルは

const request = require('request'); 

class helperFile{ 
    static downloadFile(file_url, targetPath, callback) { 
     return new Promise(function (resolve, reject) { 
      let received_bytes = 0; 
      let total_bytes = 0; 

      let req = request({ 
       method: 'GET', 
       uri: file_url 
      }); 

      let out = fs.createWriteStream(targetPath); 
      req.pipe(out); 

      req.on('response', function (data) { 
       total_bytes = parseInt(data.headers['content-length']); 
      }); 

      req.on('data', function (chunk) { 
       received_bytes += chunk.length; 
       let progress = (received_bytes * 100)/total_bytes; 

       return progress 
      }); 

      req.on('end', function() { 
       resolve(true) 
       console.log("File succesfully downloaded"); 
      }); 
     }) 
    } 
} 

はコンポーネント

import helperFile from '../actions/download' 

    handleDownloadFile() { 
     helperFile.downloadFile('https:...', 'path') 
     .then((response) => console.log(response)) 
    } 

反応し、予想される出力が1,2,3、... 100であるべきであり、ときtrueを終えました。

Answer 1

リアクションコンポーネントの状態を更新するコールバックを使用できます。私は、ダウンロードプログレスバーを実装するためのコンポーネントでそれを使用する必要があるので、あなたに

req.on('data', function (chunk) { 
    received_bytes += chunk.length; 

    const progress = (received_bytes * 100)/total_bytes; 

    callback(progress); 
}); 

は

handleDownloadFile() { 
    helperFile.downloadFile('https:...', 'path', this.updateProgress) 
    .then((response) => console.log(response)) 
} 

updateProgress(progress) { 
    this.setState({progress}); 
}