Promise.all immediately jumps to then instead of calling all promises

Question

I'm new to promises and trying to get Promises.all to work in this situation. However, when I try to run the code by calling the processFiles function, it just immediately hits the console.log line in the Promises.all then method. What am I doing wrong?

let doc1Text = "";
let doc2Text = "";

const processDoc = async (fileInput) => {
    var input = document.getElementById(fileInput);
    
    await fetch(urls.GetContractLanguageText, {
      method: 'POST',
      body: input.files[0]
    })
    .then(j => j.json())
    .then(x => {                    
        return x.ConvertedText;
    });
}

const processDoc1 = async () => {
    $(selectors.fileProgress1).val(0);
    doc1Text = await processDoc(selectors.baseFile);
    $(selectors.fileProgress1).val(100);
};

const processDoc2 = async () =>  {
    $(selectors.fileProgress2).val(0);
    doc1Text = await processDoc(selectors.newFile);
    $(selectors.fileProgress2).val(100);
};

const processFiles = async () => {
    $(selectors.aiComparison).removeClass(selectors.hide);
    await Promise.all([processDoc1, processDoc2])
        .then(() => {
          console.log(doc1Text, doc2Text);
        });
}

Answer 1

There are two issues with your code.

1. You don't return the fetch result in the processDoc function return await fetch.
2. You need to invoke the functions inside the array parameter of Promise.all to wait for these promises await Promise.all([processDoc1(), processDoc2()]).

let doc1Text = "";
let doc2Text = "";

const processDoc = async (fileInput) => {
    var input = document.getElementById(fileInput);
    
    return await fetch(urls.GetContractLanguageText, {
      method: 'POST',
      body: input.files[0]
    })
    .then(j => j.json())
    .then(x => x.ConvertedText);
}

const processDoc1 = async () => {
    $(selectors.fileProgress1).val(0);
    doc1Text = await processDoc(selectors.baseFile);
    $(selectors.fileProgress1).val(100);
};

const processDoc2 = async () =>  {
    $(selectors.fileProgress2).val(0);
    doc2Text = await processDoc(selectors.newFile);
    $(selectors.fileProgress2).val(100);
};

const processFiles = async () => {
    $(selectors.aiComparison).removeClass(selectors.hide);
    await Promise.all([processDoc1(), processDoc2()])
        .then(() => {
          console.log(doc1Text, doc2Text);
        });
}