Get images for PDFs from URLs

Question

I Have the below code that gets urls of PDF files, send them to a convert function and returns them as images, is there a way to make this code more readable?

Is there a way to avoid functions chaining?

import PDFtoImages from '../PDFtoImages'
    
export async function convertPDF(file, category) {
const images= await PDFtoImages(file.data)
return {
   category: category ? [category] : [],
    images
  }
}
    
export function fetchBlob(url, opts = {}) {
  return fetch(url, opts).then(res => {
    if (!res.ok) return Promise.reject(new Error(res.statusText))
      return res.blob()
    })
}

export async function fetchFilesAsImages(filesUrls) { 
  const pdfAsImages= []
  await Promise.all(
    filesUrls.map(async file=> {
      pdfAsImages.push(
        await convertPDF(
          {data: await fetchBlob(file.url)},
          file.category
        )
      )
    })
  )
  return pdfAsImages
}

Answer 1

The main issue I see with this code is in the fetchFilesAsImages() function. You're needlessly building a results array to return at the end of the call fetchFilesAsImages(). Why not just take advantage of the fact that Promise.all() will already return a list of what each promise resolved to. So, you could instead write fetchFilesAsImages() as follows:

export async function fetchFilesAsImages(filesUrls) {
  return await Promise.all(
    filesUrls.map(async ({ url, category }) => {
      const data = await fetchBlob(url);
      return await convertPDF({ data }, category);
    })
  );
}

One other thing I would suggest is to just use async/await syntax everywhere. Your fetchBlob() could look a little cleaner with it:

export async function fetchBlob(url, opts = {}) {
  const res = await fetch(url, opts);
  if (!res.ok) throw new Error(res.statusText);
  return res.blob();
}