在 Array.map 同步中使用异步函数

Question

processImage()是一个异步处理图像的函数。

uploadImage()是一个异步上传图片的函数

他们两个return承诺。

sizes 是长度为 4 的数组。

图片经过处理后才能上传。无法并行上传和处理单一尺寸。

我想做的是立即一个接一个启动所有4个process/upload作业，让它们一起异步执行。一旦所有 4 个都完成，我将执行一些其他代码。

由于我将异步函数作为参数传递给映射，其中的 await 关键字是否会暂停执行，直到第一个图像的 processing/uploading 完成？在这种情况下，这将成为同步执行。我不明白这里到底发生了什么。如果此代码确实是同步的，我如何使其异步？

var responses = await Promise.all(sizes.map(async function (size) {
        let processedBuffer = await processImage(buffer, size);
        let response = await uploadImage(processedBuffer.toString('base64'));
        return response;
    }));

//some other code

Answer 1

async 是函数返回承诺的语法糖。

考虑这个简单的例子：

async function ret42() {
   return 42;
}

这相当于：

function ret42() {
   return Promise.resolve(42);
}

从这个角度来看，回调中的异步函数是同步的，直到遇到 await（这是 .then(() => 的语法糖）。

如果你想让每个函数都执行完才能执行下一个函数，你必须使用for await，或者只是：

for (const fn of sizes) {
  await fn();
}

Answer 2

您的代码是异步的。您可以自己轻松查看。

const mockAsyncFn = () =>
    new Promise(resolve => setTimeout(() => resolve(), 2000));

const someAsync = async () => {
    const from = new Date();
    await Promise.all(
        [mockAsyncFn, mockAsyncFn].map(async fn => await fn())
    );
    const to = new Date();
    return to - from;
};

(async () => console.log(await someAsync()))();

结果将是 ~2s 但不是 4。

在 Array.map 同步中使用异步函数

Is using an async function inside Array.map synchronous

javascript

async-await

es6-promise