Question

我想异步调用一个函数数组，这样只有func1解析后才能调用func2。

＆＃13;

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])

＆＃13;

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.
}

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

Answer 2

你可以链接承诺并一个接一个地返回：

function myAsyncFunction(url) {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(url), 2000)
  })
}

const func1 = () => myAsyncFunction('a')
const func2 = () => myAsyncFunction('b')
const func3 = () => myAsyncFunction('c')

func1()
  .then(result1 => {
    console.log('result from func1:', result1)
    return func2()
  })
  .then(result2 => {
    console.log('result from func2:', result2)
    return func3()
  })
  .then(result3 => {
    console.log('result from func3:', result3)
    console.log('finished!')
  })

异步调用函数数组

2 个答案: