具有多个 setIntervals 的异步等待

Question

我有两个 API 请求，一个每 5000 毫秒调用一次，一个每 30000 毫秒调用一次。我想确保在向服务器发出新请求之前完成每个调用。我不希望任何一个请求相互重叠。例如，如果 func1 API 尚未完成，那么我不想在完成之前发出 func2 API 调用。

这是我迄今为止尝试过的。

async function vals() {
            try {
                await func1()
                    .then(response => response.json())
                    .then(result => display_result(result))
                    .catch(error => console.error('Error: ', error));
                await func2()
                    .then(response => response.json())
                    .then(result => display_result(result))
                    .catch(error => console.error('Error: ', error));
            }
            catch(error) {
                return error;
            }
}

vals();

这里是func1和func2。

function func1() {
        return setInterval(() => fetch(url, { method: 'GET' }), 5000);
}

function func2() {
        return setInterval(() => fetch(url, { method: 'GET' }), 30000);
}

我希望它首先运行 func1()，等待它解决，然后运行 ​​func2()。相反，func1() 被调用了两次，并且永远不会到达 func2()。是否应该在 vals() 函数中设置 setIntervals？任何指导来完成这项工作将不胜感激。

Answer 1

好的，这有点棘手！您有两个不同的时间间隔生成任务（http 请求），这需要大量时间，并且您希望确保这些任务不会彼此重合。

我建议不要在超时后立即激活您的请求，而是将请求添加到待完成的工作队列中。该队列将尽快处理一系列串行任务。

// In your example your "long-running-tasks" are http requests.
// In this example I'll use a timeout.
let genLongRunningTask1 = async () => {
  console.log('Task 1 start');
  await new Promise(r => setTimeout(r, 1500));
  console.log('Task 1 end');
};

let genLongRunningTask2 = async () => {
  console.log('Task 2 start');
  await new Promise(r => setTimeout(r, 1600));
  console.log('Task 2 end');
};

// The tail of the promise-queue. If it resolves we're ready
// to begin a new long-running-task. It's initially resolved.
let queueTail = Promise.resolve();
let queueNewTask = async genLongRunningTask => {
  await queueTail;
  await genLongRunningTask();
};

// Now setup our intervals. We don't directly generate any
// long-running-tasks here - instead we "queue" them, and
// then point the tail of the queue to their completion.
console.log('Starting...');
setInterval(() => {
  queueTail = queueNewTask(genLongRunningTask1);
}, 3000);
setInterval(() => {
  queueTail = queueNewTask(genLongRunningTask2);
}, 6000);

在我的示例中，两个间隔分别位于 3000ms 和 6000ms，因此它们应该同时运行每个 6000ms - 但您会看到排队逻辑使它们保持良好和独立！在上一个任务结束之前，您永远不会看到新任务开始。

在您的情况下，您应该只需要编辑 genLongRunningTask1 和 genLongRunningTask2 以便它们等待并处理您的请求。类似于以下内容：

let genLongRunningTask1 = async () => {
  try {
    // Assuming `func1` returns a "response object":
    let response = await func1();
    
    /*
    Assuming the "response object" has a `json` method,
    and `display_result` is an async method for showing
    the json data.
    NOTE: this use of `await` ensures requests will remain queued
    until the previous request is done processing *and* rendering.
    To begin sending the next request after the previous request
    has returned, but overlapping with the period in which that
    request is still *rendering*, omit `async` here.
    */
    await display_result(response.json());
  } catch(err) {
    console.error('Error:', err);
  }
};

警告：请注意，您排队任务的速度不要超过任务完成的速度！