axios下载，多个下载并行

1.效果

2.主页面代码

/**
 * @name DownLoad
 * @description 下载进度条
 */
import React, { Component } from "react";
// import axios from "axios";
// import { isDev } from "@/utils/axios";
import { Title } from "@/component";
import { Button, Progress } from "antd";
import { unitConver } from "@/utils";
import { downFileCommon } from "@/utils/downFile";
 
import styles from "./styles.module.less";
 
const url1 = "/api-down-progress/uploads/soft/2108/2-210P2135407.rar";
 
const url2 = "/api-down-progress/uploads/soft/2001/1-200121232528.zip";
 
export default class DownLoad extends Component {
  state = {
    progress: 0,
    visible: true,
    size: 0,
    filename: ""
  };
  /**
   * 下载
   * @param  {String} url 目标文件地址
   * @param  {String} filename 想要保存的文件名称
   */
  //第1PPT地址-/api-down-progress：跨域代理=》http://ppt.1ppt.com
  proLine = (evt, num) => {
    console.log("evt===", evt);
    this.setState({ ["progress" + num]: parseInt((evt.loaded / evt.total) * 100), ["size" + num]: evt.total });
  };
  download = (url, num) => {
    downFileCommon(url, null, "get", null, null, this.proLine, num);
  };
 
  render() {
    const { visible, progress1, progress2, size1, size2, filename } = this.state;
    return (
      <div>
        <Title text="下载进度条" />
        <div className={styles.block}>
          {visible && (
            <div>
              <div>{filename}</div>
              <Progress percent={progress1 || 0} />
              {unitConver(size1 || 0)}
            </div>
          )}
          <Button onClick={() => this.download(url1, "1")}>下载1</Button>
        </div>
        <div className={styles.block}>
          {visible && (
            <div>
              <div>{filename}</div>
              <Progress percent={progress2 || 0} />
              {unitConver(size2 || 0)}
            </div>
          )}
          <Button onClick={() => this.download(url2, "2")}>下载2</Button>
        </div>
      </div>
    );
  }
}

 3.封装的下载组件

import axios from 'axios'
import { message } from 'antd'
 
export async function downFileCommon(url, data, type, token, filename, progress = () => { }, num) {
  axios({
    method: type,
    url,
    data,
    responseType: 'blob',
    headers: {
      // 身份验证，如果接口不需要，则传null
      Authorization: token,
    },
    onDownloadProgress: (evt) => {
      console.log("progressEvent===", evt);
      // 对原生进度事件的处理
      // 回调函数
      progress(evt, num)
    }
  })
    .then((res) => {
      // let type = res.headers['content-type'] //请求头中文件类型
      let Content = res.headers["Content-Disposition"] || res.headers["content-disposition"];
      let name = Content.split(";")[1].split("=")[1]; //请求头中文件名
      const blob = new Blob([res.data])
      if ('download' in document.createElement('a')) {
        // 非IE下载
        const elink = document.createElement('a')
        // 自定义文件名
        // elink.download = filename
        // 原文件名称
        elink.download = name;
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click()
        URL.revokeObjectURL(elink.href) // 释放URL 对象
        document.body.removeChild(elink)
        // console.log('下载第二步')
      } else {
        // IE10+下载
        navigator.msSaveBlob(blob, filename)
      }
    })
    .catch((err) => {
      message.error('下载失败')
      console.log('下载错误', err)
    })
}