Superagentは同じイメージを繰り返し送信し続けます

Question

複数のファイルをアップロードしてCloudineのAPIに送信できるようにしようとしています。私は各画像をループして添付してアップロードしています。しかし、私のコードは、画像をループされ、その後、ファイルの量のために再び上に第1の画像をアップロードする：

let uploadRequest = superagent.post(url) 

    for (let i=0; i<files.length; i++){ 
     uploadRequest.attach('file', files[i]) 
     console.log('file attached', files[i]) 

     Object.keys(params).forEach((key) => { 
      uploadRequest.field(key, params[key]) 
     }) 
     console.log('params attached', files[i]) 

     uploadRequest.then((res) => { 

      console.log('UPLOAD COMPLETE: '+JSON.stringify(res.body)) 
      const uploaded = res.body 
      const imageUrl = res.body.secure_url 
      let updatedArr = this.state.images.slice(); 
      updatedArr.push(imageUrl); 
       this.setState({ 
        images: updatedArr 
       }) 
      }) 

     .catch((error) => { 
      console.log(error) 
      return 
     }) 
    } 

} 

どのように私は私がやりたいことを書き換えることができますか？なぜこれが起こっているのか混乱する

Answer 1

ループの途中で非同期コードを使用することはできません。ループは、要求が完了するのを待機しません。

すべてを別の関数に移動し、ループを使用してその関数を呼び出します。

var uploadFile = function(file){ 
    //do stuff 
} 

for(var i=0; i<files.length; i++){ 
    uploadFile(files[i]); 
}