React中async函数await语句及后续代码无法执行问题排查

可能的原因及解决步骤 #

1. 缺失PDF.js Worker配置 #

React项目中使用pdfjs-dist必须手动指定Worker路径，否则PDF加载会静默失败，表现为await getDocument().promise卡住。

在pdfReader.js或App.jsx开头添加配置：

import * as pdfjsLib from 'pdfjs-dist';
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';

// 全局设置Worker路径
pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;

2. 跨域(CORS)问题 #

如果PDF文件来自外部域名，浏览器会阻止跨域请求，导致getDocument无法完成。

解决方法：

• 在getDocument调用时添加CORS配置：

  async function getContent(src) {
    try {
      const pdfDoc = await pdfjsLib.getDocument({
        url: src,
        cors: 'anonymous' // 允许跨域请求
      }).promise;
      // 后续提取文本逻辑
    } catch (err) {
      console.error('PDF加载失败:', err);
      throw err; // 抛出错误让上层捕获
    }
  }
  

• 确保PDF所在服务器返回正确的CORS响应头（如Access-Control-Allow-Origin: *）。

3. 错误捕获不完整 #

原代码中可能未捕获Promise的reject状态，导致错误被静默忽略，看起来像是代码卡住。

完善所有异步函数的错误处理：

• 在filterURLs中添加try/catch：

  export async function filterURLs(word, urlArray) {
    console.log("FILTERING THE URLS.....");
    const newFileArr = [];
    for (let i = 0, len = urlArray.length; i < len; i++) {
      try {
        if (await checkPDF(word, urlArray[i])) {
          newFileArr.push(urlArray[i]);
        }
      } catch (err) {
        console.error(`处理${urlArray[i]}失败:`, err);
      }
    }
    console.log("Filtered URLs:", newFileArr);
    return newFileArr;
  }
  

• 在组件调用时添加catch：

  filterURLs(keyword, fileList)
    .then(filteredLinks => console.log(filteredLinks))
    .catch(err => console.error('筛选流程出错:', err));
  

4. 组件中调用时机错误 #

如果在React组件渲染阶段直接调用filterURLs，可能导致重复调用或异步逻辑被中断。应在useEffect中触发，确保仅在依赖变化时执行：

import { useEffect } from 'react';

function FileSet({ keyword, fileList }) {
  useEffect(() => {
    // 仅当keyword和fileList有效时执行
    if (keyword && fileList.length > 0) {
      filterURLs(keyword, fileList)
        .then(filteredLinks => console.log(filteredLinks))
        .catch(err => console.error(err));
    }
  }, [keyword, fileList]); // 依赖变化时重新执行

  return <div>...</div>;
}

5. 测试单个PDF验证 #

先简化问题，单独测试单个PDF的加载，排除批量处理的干扰：

// 在组件中添加测试按钮
<button onClick={async () => {
  const result = await checkPDF('你的关键词', '单个PDF的URL');
  console.log('单个PDF检查结果:', result);
}}>测试单个PDF</button>

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