javascript - 异步调用函数数组

Question

我想异步调用函数数组，以便只有在 func1 解析后，才会调用 func2。

function myAsyncFunction(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.onload = () => resolve(xhr.responseText);
    xhr.onerror = () => reject(xhr.statusText);
    xhr.send();
  });
}

const func1 = () => myAsyncFunction('a');
const func2 = () => myAsyncFunction('b');
const func3 = () => myAsyncFunction('c');

function asychFunctions(arguments) {
  arguments.forEach(func => {
    func();
  });
}

asychFunctions([func1, func2, func3])

Answer 1

不要使用forEach循环。

您需要将调用下一个函数的逻辑放入前一个函数的 then 处理程序中。

创建一个变量来跟踪您正在处理的函数。然后，每当您想要调用一个函数时(即在开始时和前一个函数完成时)，递增该变量，查看该索引处是否有一个函数等待调用，然后调用它。

function asychFunctions(args) {
    var index = -1;

    function call_next_function() {
        index++;
        if (args[index]) {
            args[index]().then(call_next_function);
        }
    }

    call_next_function(); // At this point, the next function is the first function.
}

<小时/>

这可能是一个坏主意。异步函数的优点是你可以在等待它们的同时继续处理其他事情。在大多数情况下，这种方法只会减慢速度，最好同时运行它们。