javascript - 如何正确处理父异步调用中的一系列异步调用

Question

我有一个用例，我想进行异步调用(认为它类似于ajax)，然后在该调用的成功 block 中，我想使用由生成的id在循环中进行一系列异步调用家长电话。我的要求是:

1. 显示成功 toast 的代码应该放在哪里？目前，我将它放在 success block 内的 for 循环之后，但它有一个问题，它将在子异步调用完成之前执行，因为 for 循环不会等待调用，并且会立即执行，并且代码将执行庆祝成功。
2. 如果任何一个子调用失败，则不应发生进一步的调用(这更多是从效率的 Angular 来看)，而且在这种情况下，我应该能够删除创建的父记录，那么如何也能处理这个问题吗？提前致谢!

示例代码片段:

asyncCallA(inputId)
    .then(output => {
        // inputIdsForChildCalls is the list of inputIds for child async 
        // calls
        inputIdsForChildCalls = [do something with output]
        for (let i = 0; i < inputIdsForChildCalls.length; i++) {
            asyncCallB(inputIdsForChildCalls[i])
                .then(output => {
                    // do something
                })
                .catch(error => {
                    // do something with error
                });
        }
        showSuccessToast("Records created successfully!");
    })
    .catch(error => {
        // do something with error
    });

Answer 1

因为听起来您想连续运行 asyncCallB() ，这样如果其中一个调用失败，您就可以避免任何其他调用，那么使用 async/await< 实现这将是最简单的方法.

为此，您必须将包含函数标记为async，以便您可以使用await。然后，您可以使用 await 对异步操作进行排序:

async function someFunc(inputId) {
    try {
        let output = await asyncCallA(inputId);
        // inputIdsForChildCalls is the list of inputIds for child async 
        // calls
        let inputIdsForChildCalls = [do something with output]
        for (let childId of inputIdsForChildCalls) {
            let childResult = await asyncCallB(inputIdsForChildCalls[childId]);
            // process child result here
            // errors in asyncAllB() will have gone to the catch(e) statement below
        }
        showSuccessToast("Records created successfully!");
    } catch(e) {
        // handle error here
        // throw an error here if you want the caller to be able to see the error
    }
}

为了获得更快的性能，您可以并行运行 asyncCallB() 操作，如下所示，但所有 asyncCallB() 调用都将运行，即使第一个调用也是如此其中一个出现错误(因为它们都是并行启动的):

async function someFunc() {
    try {
        let output = await asyncCallA(inputId);
        // inputIdsForChildCalls is the list of inputIds for child async 
        // calls
        let inputIdsForChildCalls = [do something with output]
        let allResults = await Promise.all(inputIdsForChildCalls.map(childId => {
            return asyncCallB(childId);
        }));
        // process allResults array here
        // errors will have gone to the catch(e) statement below
        showSuccessToast("Records created successfully!");
    } catch(e) {
        // handle error here
    }
}