React中如何用单个按钮处理函数发起多个PDF生成POST请求？

问题背景 #

现有两个独立的POST接口用于生成PDF，分别对应两个按钮的处理函数，现在需要点击一次按钮即可触发两个接口请求，生成并打开两个PDF文件。后端接口运行正常，需在React/JavaScript中实现该合并逻辑。

原两个处理函数代码如下：

const handleViewOrder = async () => {
    try {
      const response = await fetch('/generate_pdf', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
      });
      const responseData = await response.json();
      const pdfURL = responseData.pdf_url; 
      localStorage.setItem("pdf_url",pdfURL)
      window.open(pdfURL, '_blank');
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

const handleProductSellsPdf = async () => {
    try {
      const response = await fetch('/generate_item_pdf', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
      });
      const responseData = await response.json();
      const pdfURL = responseData.pdf_url; 
      localStorage.setItem("pdf_url",pdfURL)
      window.open(pdfURL, '_blank');
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

解决方案 #

1. 提取公共请求函数 #

两个处理函数逻辑高度重复，仅接口地址不同，先提取公共函数减少冗余：

// 公共PDF生成请求函数
const generatePdf = async (endpoint) => {
  try {
    const response = await fetch(endpoint, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
    });
    if (!response.ok) {
      throw new Error(`请求${endpoint}失败: Network response was not ok`);
    }
    const responseData = await response.json();
    const pdfURL = responseData.pdf_url;
    // 原代码中两个请求会覆盖同一个localStorage key，建议修改为不同key或移除（若无需持久化）
    localStorage.setItem(`pdf_url_${endpoint.split('/')[1]}`, pdfURL);
    window.open(pdfURL, '_blank');
    return pdfURL;
  } catch (error) {
    console.error('生成PDF出错:', error);
    throw error; // 可选：向上抛出错误便于外部处理
  }
};

2. 合并为单个处理函数 #

根据需求选择并行或串行执行请求：

方式一：并行执行（推荐，效率更高）

使用Promise.all同时发起两个请求，无需等待第一个完成再执行第二个：

const handleGenerateBothPdfs = async () => {
  try {
    // 同时发起两个请求
    await Promise.all([
      generatePdf('/generate_pdf'),
      generatePdf('/generate_item_pdf')
    ]);
    console.log('两个PDF已成功生成并打开');
  } catch (error) {
    console.error('生成PDF过程中出现错误:', error);
  }
};

方式二：串行执行（适用于有依赖关系的场景）

如果需要确保第一个PDF生成完成后再生成第二个，可使用await依次调用：

const handleGenerateBothPdfs = async () => {
  try {
    await generatePdf('/generate_pdf');
    await generatePdf('/generate_item_pdf');
    console.log('两个PDF已按顺序生成并打开');
  } catch (error) {
    console.error('生成PDF过程中出现错误:', error);
  }
};

3. 在React中使用合并后的函数 #

将合并后的处理函数绑定到单个按钮：

<button onClick={handleGenerateBothPdfs}>生成全部PDF</button>

注意事项 #

• 浏览器可能会阻止自动弹出多个窗口，建议提醒用户允许弹窗（点击按钮本身属于用户交互，大部分浏览器会允许）。
• 原代码中两个请求会覆盖同一个localStorage的pdf_url键，建议修改为不同的键名（如示例中的pdf_url_generate_pdf和pdf_url_generate_item_pdf），如果不需要持久化PDF地址，可直接移除localStorage.setItem代码。

内容的提问来源于stack exchange，提问作者Nahid From Japan