Promise.all未等待全部Promise执行直接进入then的问题排查

1. Promise.all传入的是函数而非Promise实例 #

你在Promise.all([processDoc1, processDoc2])里直接放了两个async函数本身，而不是调用它们得到的Promise对象。async函数只有被调用时才会返回Promise，否则Promise.all会把这两个函数当作已完成的Promise处理，所以会立刻进入then回调。

修复：改成调用这两个函数，传入Promise.all的是它们的返回值：

await Promise.all([processDoc1(), processDoc2()])

2. processDoc函数没有返回值 #

你的processDoc函数里，虽然await了fetch的异步操作，但没有把最终的x.ConvertedText返回出去。async函数如果没有return语句，默认返回的Promise会resolve为undefined，导致doc1Text和doc2Text始终是空字符串或者undefined。

修复：在processDoc里添加return，把异步操作的结果返回：

const processDoc = async (fileInput) => {
    var input = document.getElementById(fileInput);
    
    // 添加return，把异步操作结果返回
    return await fetch(urls.GetContractLanguageText, {
      method: 'POST',
      body: input.files[0]
    })
    .then(j => j.json())
    .then(x => {                    
        return x.ConvertedText;
    });
}

或者更简洁的统一风格写法：

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

3. processDoc2函数里的变量赋值错误 #

在processDoc2中，你把结果赋值给了doc1Text，而不是doc2Text，这会导致doc2Text始终是空字符串，同时覆盖掉doc1Text的值。

修复：修正变量名：

const processDoc2 = async () =>  {
    $(selectors.fileProgress2).val(0);
    // 改为赋值给doc2Text
    doc2Text = await processDoc(selectors.newFile);
    $(selectors.fileProgress2).val(100);
};

修复后的完整代码示例 #

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

const processDoc = async (fileInput) => {
    const input = document.getElementById(fileInput);
    const response = await fetch(urls.GetContractLanguageText, {
      method: 'POST',
      body: input.files[0]
    });
    const data = await response.json();
    return data.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);
        });
}

内容的提问来源于stack exchange，提问作者geoff swartz