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 请求，并返回从响应生成的 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

您可以执行 await 并等待结果，而不是 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) }) }，让结果成为从 API 返回的值数组。类似的东西

stats_df.head()

>       driver  year    team    points
>     0 AIT 2020    Williams    0.0
>     1 ALB 2019    Red Bull    76.0
>     2 ALB 2019    AlphaTauri  16.0
>     3 ALB 2020    Red Bull    105.0
>     4 ALO 2013    Ferrari     242.0

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

1 个答案: