面试题：JavaScript中async/await处理复杂异步流程

Question

假设有一组图片的URL数组，需要使用fetch函数（结合async和await）依次下载这些图片，并且在下载每张图片后，将其转换为Base64编码格式并存储在一个新的数组中。在所有图片都处理完成后，打印这个新数组。请编写完整的JavaScript代码实现此功能。

Answer 1

async function downloadAndConvertImages(urls) {
    const base64Array = [];
    for (const url of urls) {
        const response = await fetch(url);
        const blob = await response.blob();
        const base64 = await convertBlobToBase64(blob);
        base64Array.push(base64);
    }
    console.log(base64Array);
    return base64Array;
}

function convertBlobToBase64(blob) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onloadend = () => resolve(reader.result.split(',')[1]);
        reader.onerror = reject;
        reader.readAsDataURL(blob);
    });
}

// 示例使用
const imageUrls = [
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg',
    'https://example.com/image3.jpg'
];
downloadAndConvertImages(imageUrls);