在异步 for 循环中追加到数组

Question

我得到了这个包含其他嵌套异步函数的函数。

我正在解压缩一个 zip 文件，然后将每个 HTMLImageElement 附加到一个数组。

然而，数组是这样打印的

16 是我期望的正确图像数量，但当我 console.log() 它们时它们未定义。

export async function fetchVisuals(TestID: number) {
    var zip = new JSZip();
    const res = await fetch('*DJANGO URL*', {
        body: JSON.stringify(TestID),
        method: 'POST'
    })
    let http_ok = res.ok
    const blob = await res.blob()
    var bufferPromise = await blob.arrayBuffer();
    zip.loadAsync(bufferPromise).then(async ({files}) => {
        const mediaFiles = Object.entries(files).filter(([fileName]) =>
            fileName.endsWith('.jpg'),
        );
        if (!mediaFiles.length) {
            throw new Error('No media files found in archive');
        }
        // I'm very confident the issue is to do with the below function
        let promiseArray = mediaFiles.map(function([,image]) {
            image.async('blob').then((blob: Blob | MediaSource) => {
                console.log("mediaFiles loop")
                const img = new Image();
                img.src = URL.createObjectURL(blob)
                console.log(img)
                return img
            })
        })
        Promise.all(promiseArray).then(function(resultsArray) {
            console.log(resultsArray)
        })
    })
}

我将每个图像的承诺映射到一个数组，然后对该数组执行 Promise.all()，所以我不确定为什么它仍然以 undefined.[=19= 的形式返回]

在 mediaFiles.map() 我做了一些打印，他们成功地打印了 img 数据。

如何用 HTMLImageElements 填充这个数组？

Answer 1

你没有return你在地图函数中的承诺：

        let promiseArray = mediaFiles.map(function([,image]) {
            image.async('blob').then((blob: Blob | MediaSource) => {
                console.log("mediaFiles loop")
                const img = new Image();
                img.src = URL.createObjectURL(blob)
                console.log(img)
                return img
            })
        })

必须变成：


 // I'm very confident the issue is to do with the below function
        let promiseArray = mediaFiles.map(function([,image]) {
            /*just there : */ return image.async('blob').then((blob: Blob | MediaSource) => {
                console.log("mediaFiles loop")
                const img = new Image();
                img.src = URL.createObjectURL(blob)
                console.log(img)
                return img
            })
        })

关于你的第二个问题，你必须等待你的承诺和 return 他们的结果：

export async function fetchVisuals(TestID: number) {
    var zip = new JSZip();
    const res = await fetch('*DJANGO URL*', {
        body: JSON.stringify(TestID),
        method: 'POST'
    })
    let http_ok = res.ok
    const blob = await res.blob()
    var bufferPromise = await blob.arrayBuffer();
    const {files} = await zip.loadASync(bufferPromise);
    const mediaFiles = Object.entries(files).filter(([fileName]) =>
        fileName.endsWith('.jpg'),
    );
    if (!mediaFiles.length) {
        throw new Error('No media files found in archive');
    }
    // I'm very confident the issue is to do with the below function
    let promiseArray = mediaFiles.map(function([,image]) {
        return image.async('blob').then((blob: Blob | MediaSource) => {
            console.log("mediaFiles loop")
            const img = new Image();
            img.src = URL.createObjectURL(blob)
            console.log(img)
            return img
        })
    })
    return await Promise.all(promiseArray);
}

在异步 for 循环中追加到数组

Append to array in async for loop

javascript

arrays

asynchronous

reactjs