Dropbox JS SDK：.then-functionの内部でi ++を実行する

Question

私はこの質問に少し苦労しましたが、私はそれをかなり早く説明しようとします。

私はDropbox JavaScript SDKを使用して特定のフォルダから共有リンクを取得しています。まず第一に、私はフォルダからファイルを取得するには、次のコードを使用しています：

var DROPBOX_PATH = path; 
var ACCESS_TOKEN = '***'; 
var dbx = new Dropbox({ accessToken: ACCESS_TOKEN }); 

function listFiles() { 
    dbx.filesListFolder({ path: DROPBOX_PATH }) 
    .then(function(response) { 
     displayFiles(response.entries); 
    }) 
    .catch(function(error) { 
     console.error(error); 
    }); 

    return false; 
} 

私はこれらのファイルをループdbx.sharingGetSharedLinks()、dbx.filesGetTemporaryLink()などdbx.sharingGetSharedLinkFile()を使用して、そのリンクを取得します。問題は、フォルダに2つのファイルが含まれている場合に、このプロセスに時間がかかることがあり、進捗状況を示すために<progress>要素を使用したいと考えています。

まず、私はdbx.sharingGetSharedLinkFile()さん.then()プロセスの下でバーの値を進めるために、上記の3つの機能をラップし、iを追加するfor(var i = 0; i < files.length; i++)ループを使用しようとしましたが、彼らは同期していないよ - i値が前に増加していますこれらの関数はすべてそれぞれの端に到達し、何かを出力することができます。

代わりに、ループをwhile()ループに置き換えて、最後のdbx関数の中にi++を入れてみましたが、Webブラウザが過負荷になり、無限ループに終わる可能性があります。

dbx.sharingGetSharedLinkFile().then()に対応してiの値を増やす方法はありますか？

---

注：他の部分が完全に行われ、おそらくビット不格好されていないので、私はただ、ここで最も基本的なコードを書いています。 http://paste.ofcode.org/HWdmBfjwRKSSpiRNVLsPcu

Answer 1

予想される動作を実現するには、サイクルではなく関数を使用して反復処理を行う必要があります。

dropbox APIメソッドsharingGetSharedLinksのコールバックは、メインループがファイルリストを反復しながら、（このメソッド内の）ドロップボックスサーバーへの非同期要求が実行された後にのみ実行されるため、現在のコードは期待どおりに機能しません。

最後に、それは約束についてすべてですので、私は、このリンクMDN about Promisesと少しのコード例を正しい方向にあなたを指すようにしてみてください。

function displayFiles(files) { 

     //... your code 
     // i'll show you only changes 

     var i = 0; 

     (function listNextFile(){ 


      let file = files[i] 

      if (file) { 

      var name = file.name.slice(4).slice(0, -7).replace('_', '/'), 
       file_path = file.path_display; 

      dbx.sharingGetSharedLinks({ path : file_path }).then(function(response){ 

       // ... 
       // there is your code 
       // after all you need to icrease counter and call function again 

       i++ 
       listNextFile(); 

      }); 

      } 

     })() 

} 

Answer 2

あなたのコードは本当に厄介です。 es6またはqライブラリを使用できる場合は、このような約束を使ってください。

var promises = []; 
 
    
 

 
files.forEach((file) => { 
 
    promises.push(sharingGetSharedLinks(file_path).then(filesGetTemporaryLink(download_path)).then(sharingGetSharedLinkFile(download_url))); 
 
}); 
 

 
Promise.all(promises).then((values) => { 
 
// values are, an array of responses where each response is the three requests per each file 
 
});

filesGetTemporaryLinkがsharingGetSharedLinksの結果と同じことを行うと、新しいHTTP要求を行い、そして最後に、この要求とそれを処理するために結果を返しますsharingGetSharedLinks各要求のためのロジックを分離1つはプロセスを繰り返しますが、結果はfilesGetTemporaryLinkです。

次に、すべてのリクエストを一緒に処理できる必要があります。 [r1, r2, ...]ここで、r1には、SharedShareLinks、filesGetTemporaryLink、およびsharingGetSharedLinkFileへの要求のプロセスが含まれます。

あなたのコードをすべてリファクタリングする必要があります。ここでは簡単に約束を使用することです。https://www.promisejs.org/patterns/