ReactTS 并行 api 请求调用 zip 文件下载

喜满树奈杜

我正在使用 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 请求，并返回从响应生成的 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 中。

杰伊·麦克唐尼

await您可以执行Promise.all(apiCalls)并等待结果，而不是每次 API 调用，让结果是从 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)
    })
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。