fetch 语句完成后的 Javascript 执行语句

Question

在这里，我将 blob urls 存在于名为 imgs[] 的数组中转换为 base64 data，然后将 base 64 数据推送到名为 imgsPost[] 的数组中。 将所有 base64 数据推入数组后，我想在函数中使用该数组。

let imgsPost = [];
let imgs = ["bloburl1", "bloburl2", "bloburl3", "bloburl4"];
for (let i = 0; i < imgs.length; i++) {
    fetch(imgs[i].src)
        .then(res => {
            if (!res.ok) {
                throw Error(res.statusText);
            }
            return res.blob();
        })
        .then(data => {
            let tempBlob = data;
            let reader = new FileReader();
            reader.readAsDataURL(tempBlob);
            reader.onloadend = function () {
                let base64data = reader.result;
                imgsPost.push(base64data);
            }
        })
        .catch(error => {
            console.error('Error:', error);
        })
}
        //After all execution
        foo($imgsPost);

现在该函数首先使用一个空数组执行。所有其他代码都在运行。

Answer 1

这是一个异步问题。您告诉 4 次执行一些代码在结果到达之后，然后您在结果到达之前执行foo($imgsPost);之前。

使用Promise.all的解决方案：

const imgs = [
    'https://www.gravatar.com/avatar/5ac4d13d84719bf7f11cfd9ba7e0b15b?s=32&d=identicon&r=PG&f=1',
    'https://www.gravatar.com/avatar/f1f3cf96ee354f414ec58c2824f80938?s=32&d=identicon&r=PG&f=1'
];

const promises = imgs.map(img => fetch(img)
    .then(res => {
        if (!res.ok) {
            throw Error(res.statusText);
        }
        return res.blob();
    })
    .then(data => {
        const reader = new FileReader();
        reader.readAsDataURL(data);
        return new Promise(resolve => reader.onloadend = () => resolve(reader));
    })
    .then(({ result }) => result)
);

const foo = console.log;

Promise.all(promises).then(foo).catch(error => {
    console.error('Error: ', error);
});

您还可以使用async/await 语法，它提供了非常有用的语法糖而不是承诺，并使代码看起来像是同步的。

Answer 2

这是因为foo($imgsPost) 是同步的，并且在异步获取请求完成之前被调用。您可以尝试创建一堆 fetch 请求并将它们放入一个数组中，然后使用 Promise.all() 等待所有请求完成，然后再调用 foo()。

我不确定这是拼写错误还是只是一个示例，但您的 imgs 数组中没有 .src 属性。

const imgs = ["bloburl1", "bloburl2", "bloburl3", "bloburl4"];
const fetchRequests = imgs.map(img => {
    return fetch(img.src)
              .then(res => {
                 if (!res.ok) {
                    throw Error(res.statusText);
                 }
                 return res.blob();
                })
               .then(data => {
                  let tempBlob = data;
                  let reader = new FileReader();
                  reader.readAsDataURL(tempBlob);
                  reader.onloadend = function () {
                  return reader.result;            
                }
            })
            .catch(error => {
                console.error('Error:', error);
            })
        }

   Promise.all(fetchRequests).then(allRes => foo(allRes))