ReactTS parallel api 请求调用 zip 文件下载

Question

我正在使用 React TS，以 Nestjs 作为后端。

上下文

我有一个函数downloadZip(csvProps)：输入 - csv 文件的参数和 API 请求的 url；输出 - 包含 4 个 csv 文件的 Zip 文件

const downloadZip = async (csvProps: any, urlParams: any) => {
        let zip = new JSZip();

        let csv = zip.folder("csv");

        //English Data CSV
        let enDataBlob = await downloadCSV(`${ServerService.getUrl()}/fetchData`, urlParams,
            {...csvProps, filename: 'Data_en', columns: headers_data_en, wrapColumnChar: '"'})
        csv?.file('Data_en.csv', enDataBlob as Blob, {base64: true})

        //French Data CSV
        let frDataBlob = await downloadCSV(`${ServerService.getUrl()}/fetchData`, urlParams,
            {...csvProps, filename: 'Data_fr', columns: headers_data_fr, wrapColumnChar: '"'})
        csv?.file('Data_fr.csv', frDataBlob as Blob, {base64: true})

        //English Flow CSV
        let enFlowBlob = await downloadCSV(`${ServerService.getUrl()}/fetchFlow`, urlParams,
            {...csvProps, filename: 'Flow_en', columns: headers_flow_en, wrapColumnChar: '"'})
        csv?.file('Flow_en.csv', enFlowBlob as Blob, {base64: true})

        //French Flow CSV
        let frFlowBlob = await downloadCSV(`${ServerService.getUrl()}/fetchFlow`, urlParams,
            {...csvProps, filename: 'Flow_fr', columns: headers_flow_fr, wrapColumnChar: '"'})
        csv?.file('Flow_fr.csv', frFlowBlob as Blob, {base64: true})

        zip.generateAsync(({type: "blob"}))
            .then((content) => {
                saveAs(content, csvProps.filename)
            })
    }

上面使用的downloadCSV(url: string, urlParams: any, csvProps: any)函数只是简单的向后端发起一个axios请求，而return响应生成一个csv blob：

export const downloadCSV = async (apiURL: string, urlParams: any, csvProps: any) => {
    let csvBlob: Blob|undefined;
    let api = await axios.get(apiURL, {
        params: urlParams
      })
    .then(async (res) => {
        // handleCSV: Gets all CSV related data and returns a csv Blob
        csvBlob = await handleCSV({...csvProps, datas: res.data});
    })
    return csvBlob
}

由于我使用 async-await，api 请求和随后的 blob 生成过程按顺序发生，性能受到影响。

问题

有没有办法让这些过程并行进行？我希望并行处理所有文件，然后最终添加到 zip。

Answer 1

而不是 awaiting 每个 API 调用，你可以做 Promise.all(apiCalls) 并等待它的结果，让结果成为从 API.像

const downloadZip = async (csvProps: any, urlParams: any) => {
  let zip = new JSZip();

  let csv = zip.folder("csv");
  const apiCalls = [
    downloadCSV(`${ServerService.getUrl()}/fetchData`, urlParams,
      {...csvProps, filename: 'Data_en', columns: headers_data_en, wrapColumnChar: '"'}),
    downloadCSV(`${ServerService.getUrl()}/fetchData`, urlParams,
      {...csvProps, filename: 'Data_fr', columns: headers_data_fr, wrapColumnChar: '"'}),
    downloadCSV(`${ServerService.getUrl()}/fetchFlow`, urlParams,
      {...csvProps, filename: 'Flow_en', columns: headers_flow_en, wrapColumnChar: '"'}),
    downloadCSV(`${ServerService.getUrl()}/fetchFlow`, urlParams,
      {...csvProps, filename: 'Flow_fr', columns: headers_flow_fr, wrapColumnChar: '"'}),
  ];
  const [enDataBlob, frDataBlob, enFlowBlob, frFlowBlob] = await Promise.all(apiCalls);
  //English Data CSV
  csv?.file('Data_en.csv', enDataBlob as Blob, {base64: true})

  //French Data CSV
  csv?.file('Data_fr.csv', frDataBlob as Blob, {base64: true})

  //English Flow CSV
  csv?.file('Flow_en.csv', enFlowBlob as Blob, {base64: true})

  //French Flow CSV
  csv?.file('Flow_fr.csv', frFlowBlob as Blob, {base64: true})

  zip.generateAsync(({type: "blob"}))
    .then((content) => {
      saveAs(content, csvProps.filename)
    })
}

ReactTS parallel api 请求调用 zip 文件下载

ReactTS parallel api request calls for zip files download

javascript

multithreading

reactjs

nestjs