Javascript：在执行下一个循环之前等待循环完成

Question

我有一个场景，我必须先删除附件，然后再上传新附件。 这是我的代码：

        var programs = this.UploadModel.getProperty("/programs/items"); 

        //Delete files first
        for(var i=0; i<filesToDelete.length; i++){
            oThis._callAttachmentWS("DELETE", proj, filesToDelete[i]);
        }

        //Then save new files   
        for(var i=0; i<programs.length; i++){
            oThis._callAttachmentWS("SAVE", proj, programs[i]);
        }

如何让第二个 for 循环等待第一个循环完成？

Answer 1

由于评论中的 OP 指出......

“......它调用了 web 服务，返回是真还是假”

“... function 来自另一个 controller。它可以更改。由于它是 ajax 调用，因此很可能支持回调”

......看看如何......

oThis._callAttachmentWS("DELETE", proj, filesToDelete[i]);

... 分别...

oThis._callAttachmentWS("SAVE", proj, programs[i]);

...正在使用，可以假设_callAttachmentWS方法返回Promise 。

Promise.all和Promise.allSettled是两个方法，每个方法都对承诺列表的状态进行操作并返回 promise 本身。

下一个提供的示例代码使用后一种方法。 该实现还模拟异步（承诺返回） _callAttachmentWS方法的行为。 对于同样模拟的文件保存/删除任务，有 promise 个返回辅助函数。 称为handleFileDeleteAndFileSave的主要任务显示了如何处理 promise 链的可能解决方案...

 function callAttachmentWS(action, project, fileName) { return new Promise( (resolve, reject) => { setTimeout(() => { // file deletion completed. resolve({ action, fileName }); }, 3000); } ); } // var programs = this.UploadModel.getProperty("/programs/items"); // //Delete files first // for(var i=0; i<filesToDelete.length; i++){ // oThis._callAttachmentWS("DELETE", proj, filesToDelete[i]); // } // // //Then save new files // for(var i=0; i<programs.length; i++){ // oThis._callAttachmentWS("SAVE", proj, programs[i]); // } function triggerFileActions(action, fileList) { console.log(`+++ trigger ${ action.toLowerCase() } files +++`); // returns an array of promises. return fileList.map(fileName => /*oThis._*/callAttachmentWS(action, 'my-project-name', fileName) ) } function deleteFiles(fileList) { // returns a promise. return Promise.allSettled(triggerFileActions('DELETE', fileList)); } function saveFiles(fileList) { // returns a promise. return Promise.allSettled(triggerFileActions('SAVE', fileList)); } function handleFileDeleteAndFileSave(deleteList, saveList) { // returns a promise. return deleteFiles( deleteList ).then(deleteResultList => { deleteResultList.forEach(result => console.log(result)); console.log('... delete files finished...'); }).then(() => { // returns a promise. return saveFiles( saveList ).then(saveResultList => { saveResultList.forEach(result => console.log(result)); console.log('... save files finished...'); }).then(() => '+++ handleFileDeleteAndFileSave is settled +++'); }); } const filesToDelete = ['foo', 'bar', 'baz']; const programs = ['bizz', 'buzz']; handleFileDeleteAndFileSave( filesToDelete, programs, ).then(status => console.log(status));

 .as-console-wrapper { min-height: 100%;important: top; 0; }

如上面的代码所示，文件删除/保存的正确定时处理是基于嵌套的 promise 链。 为了将程序员的注意力从编写和维护此类结构中解放出来，引入了async... await语法。

下一个代码示例重复上面的代码块，只是以一种更加命令式的编程风格......

 async function callAttachmentWS(action, project, fileName) { return new Promise( (resolve, reject) => { setTimeout(() => { // file deletion completed. resolve({ action, fileName }); }, 3000); } ); } function triggerFileActions(action, fileList) { console.log(`+++ trigger ${ action.toLowerCase() } files +++`); // returns an array of promises. return fileList.map(fileName => callAttachmentWS(action, 'my-project-name', fileName) ) } async function deleteFiles(fileList) { // returns a promise. return Promise.allSettled(triggerFileActions('DELETE', fileList)); } async function saveFiles(fileList) { // returns a promise. return Promise.allSettled(triggerFileActions('SAVE', fileList)); } async function handleFileDeleteAndFileSave(deleteList, saveList) { // handles promises (async functions) via `await` syntax, // thus it makes it an async function too // which (implicitly) returns a promise. const deleteResultList = await deleteFiles(deleteList); deleteResultList.forEach(result => console.log(result)); console.log('... delete files finished...'); const saveResultList = await saveFiles(saveList); saveResultList.forEach(result => console.log(result)); console.log('... save files finished...'); return '+++ handleFileDeleteAndFileSave is settled +++'; } const filesToDelete = ['foo', 'bar', 'baz']; const programs = ['bizz', 'buzz']; (async function () { const status = await handleFileDeleteAndFileSave(filesToDelete, programs); console.log(status); }());

 .as-console-wrapper { min-height: 100%;important: top; 0; }

Answer 2

您可以使用异步/等待。 这是关于他们的更多信息