Here is an example of nested Promise.all() calls. We are using the Fetch API to load a given path or URL, then requesting the arrayBuffer() of each of the responses we get back. This is a trivial problem if we do it all asynchronously, but we want to do something with the output buffers when we have them all available, and not one by one.
Specifically, this code tries to (1) fetch an array of images; (2) get their array buffers; (3) then obtain their base64 representation. In essence, map an array of images (by providing their paths or URLs) to their corresponding base64 string.
While this technique works in both TypeScript and JavaScript, the code is only shown in TypeScript.
const images = [/* Array of image URLs (or local path if running in Electron) */]
Promise.all(images.map((url) => fetch(url))).then((responses: any) => {
return Promise.all(responses.map((res: Response) => res.arrayBuffer())).then((buffers) => {
return buffers;
});
}).then((buffers: any) => {
return Promise.all(buffers.map((buffer: ArrayBuffer) => {
return this.arrayBufferToBase64(buffer);
}));
}).then((imagesAsBase64: any) => {
// Do something with the base64 strings
window.console.log(imagesAsBase64);
});
const layerImages = [/* Array of image URLs (or local path if running in Electron) */]
Promise.all(layerImages.map((url) => fetch(url))).then((responses: any) => {
return Promise.all(responses.map((res: Response) => res.arrayBuffer())).then((buffers) => {
return buffers.map((buffer) => this.arrayBufferToBase64(buffer));
});
}).then((imagesAsBase64: any) => {
// Do something with the base64 strings
window.console.log(imagesAsBase64);
});
// source: stackoverflow.com
private arrayBufferToBase64(buffer: any) {
let binary = "";
const bytes = [].slice.call(new Uint8Array(buffer));
bytes.forEach((b: any) => binary += String.fromCharCode(b));
// Inside of a web tab
return window.btoa(binary);
}
If you found this useful, you might want to join my newsletter; or take a look at other posts about code, TypeScript, and React.