使用 Promise 和 http 调用在 Angular 中循环

Question

我的目标是通过 for 循环填充一个数组。然后在HTTPPOST调用中发送该数组，

即：首先上传所有文件，然后将每个文件的详细信息推送到数组中。

// For multiple files
for (let i = 0; i < projectRefFilesForUploading.length; i++) {
    this.postSingleFile([] = projectRefFilesForUploading[i].file, projectDir).then(uploadedFiles => {

        let filePath = uploadedFiles['projectRefFiles'][0].fd;
        filePath = filePath.substring(filePath.lastIndexOf("/") + 1, filePath.lastIndexOf("."));
        let filename = uploadedFiles['projectRefFiles'][0].filename;
        let size = uploadedFiles['projectRefFiles'][0].size;
        let type = uploadedFiles['projectRefFiles'][0].type;
        let status = uploadedFiles['projectRefFiles'][0].status; // finished
        let fileNote = projectRefFilesForUploading[i].fileNote;

        projectRefFilesDataArray.push({fileName: filename, filePath: filePath, size: size, type: type, fileNote: fileNote});
    });   
}

即：现在在 http post 调用中发布数组。

let body = {
    projectId: projectId,
    projectRefFiles: projectRefFilesDataArray
}

let headers = new Headers();
let options: RequestOptionsArgs = { headers: headers, withCredentials: true }
return new Promise((resolve, reject) => {

    this.http.post( this.apiEndpoint + "/add/all", body, options).toPromise()
    .then(response => {
        let jsonData = response.json();
        if (jsonData.apiStatus == 1) {
            resolve(jsonData);
        }
        else reject(jsonData.message);
    })
    .catch(reason => reject(reason.statusText));
});

问题是由于async 函数调用，http 调用将其数据并行发布到循环执行。所以它在http 调用中发送一个空数组。如果我将调用方法放在循环中，那么它就可以工作。但它创建了太多 http 调用以及循环。

请帮助我如何检测，循环在http调用之后完成它的执行

Answer 1

试试这个：

let promise = new Promise((resolve, reject) => {
        let count = 0;
        for (let i = 0; i < projectRefFilesForUploading.length; i++) {
            this.postSingleFile([] = projectRefFilesForUploading[i].file, projectDir).then(uploadedFiles => {
                count++;
                let filePath = uploadedFiles['projectRefFiles'][0].fd;
                filePath = filePath.substring(filePath.lastIndexOf("/") + 1, filePath.lastIndexOf("."));
                let filename = uploadedFiles['projectRefFiles'][0].filename;
                let size = uploadedFiles['projectRefFiles'][0].size;
                let type = uploadedFiles['projectRefFiles'][0].type;
                let status = uploadedFiles['projectRefFiles'][0].status; // finished
                let fileNote = projectRefFilesForUploading[i].fileNote;

                projectRefFilesDataArray.push({fileName: filename, filePath: filePath, size: size, type: type, fileNote: fileNote});
               if(count === projectRefFilesForUploading.length){
                  resolve(projectRefFilesForUploading);
               }
            });   
        }
        });


    promise.then(function(projectRefFilesDataArray){
    let body = {
        projectId: projectId,
        projectRefFiles: projectRefFilesDataArray
    }

    let headers = new Headers();
    let options: RequestOptionsArgs = { headers: headers, withCredentials: true }
    return new Promise((resolve, reject) => {

        this.http.post( this.apiEndpoint + "/add/all", body, options).toPromise()
        .then(response => {
            let jsonData = response.json();
            if (jsonData.apiStatus == 1) {
                resolve(jsonData);
            }
            else reject(jsonData.message);
        })
        .catch(reason => reject(reason.statusText));
    });

    });