1.Promise.all()的运行机制

• 输入参数是一个可迭代对象，每个元素是一个 Promise。

• 返回一个新的 Promise，该 Promise 在所有输入的 Promise 都成功解决时解决，或者在任何一个输入的 Promise 被拒绝时立即拒绝。
  1.以下解释：该 Promise 在所有输入的 Promise 都成功解决时解决

  // 工具函数
  function delay(ms) {
      return new Promise((resolve) => setTimeout(resolve, ms));
  }
  
  function fetchUser(id) {
      return delay(1000).then(() => ({ id, name: `User ${id}` }));
  }
  
  function fetchPost(id) {
      return delay(500).then(() => ({ id, title: `Post ${id}` }));
  }
  
  function fetchComment(id) {
      return delay(800).then(() => ({ id, content: `Comment ${id}` }));
  }
  
  async function fetchData() {
      try {
          const [user, post, comment] = await Promise.all([
              fetchUser(1),
              fetchPost(1),
              fetchComment(1)
          ]);
  
          console.log('User:', user);
          console.log('Post:', post);
          console.log('Comment:', comment);
      } catch (error) {
          console.error('Error:', error);
      }
  }
  
  fetchData();
  

  结果：
  

  • 注：尽管 fetchPost 和 fetchComment 的延迟时间比 fetchUser 短，但 Promise.all 返回的结果数组中的顺序仍然是 [user, post, comment]，对应输入数组中的顺序
    
    等待所有 Promise 都解决后，将结果解构赋值给 user、post 和 comment。
    

  2.以下解释：在任何一个输入的 Promise 被拒绝时立即拒绝。

  function fetchUser(id) {
      return delay(1000).then(() => ({ id, name: `User ${id}` }));
  }
  
  function fetchPost(id) {
      return delay(500).then(() => ({ id, title: `Post ${id}` }));
  }
  
  function fetchComment(id) {
      return delay(800).then(() => {
          if (id === 1) {
              throw new Error('Comment not found');
          }
          return { id, content: `Comment ${id}` };
      });
  }
  
  async function fetchData() {
      try {
          const [user, post, comment] = await Promise.all([
              fetchUser(1),
              fetchPost(1),
              fetchComment(1)
          ]);
  
          console.log('User:', user);
          console.log('Post:', post);
          console.log('Comment:', comment);
      } catch (error) {
          console.error('Error:', error.message);
      }
  }
  
  fetchData();
  

  结果：

  

2.Vue文件下载导出

如果请求没有设置responseType: 'blob'，需要用new Blob()方法转化成Blob对象
如果请求设置了responseType: 'blob'，返回的就是Blob对象了，可以直接用

Content-Type 头的区别

multipart/form-data
用于文件上传或表单数据包含文件的情况。
数据以二进制流的形式发送，每个部分都有自己的 Content-Type。
常见于 <form> 标签中使用 enctype="multipart/form-data" 属性。

application/x-www-form-urlencoded
用于普通的表单数据提交。
数据以键值对的形式发送，键和值都经过 URL 编码。
常见于 <form> 标签中默认的 enctype 属性值。

application/json;charset=utf-8
用于发送 JSON 格式的数据。
数据以 JSON 字符串的形式发送，通常用于 API 请求。
charset=utf-8 指定了字符编码为 UTF-8，确保数据的正确解析。

responseType: 'blob'// 表明返回服务器返回的数据类型

blob:
用于接收二进制大对象（Blob）格式的响应数据。
适用于下载文件、图片等二进制数据。

        // 工具函数(下载+导出方法)
        exportUtils(res) {
            //如果请求中没有设置responseType: "blob",则需要把拿到的数据转成blob类型如下
            let blob = new Blob([res], { type: 'application/vnd.ms-excel' });
            // 创建下载链接
            let url = window.URL.createObjectURL(blob);
            
            
            let url = window.URL.createObjectURL(res.data); 
            //表示一个指定的file对象或Blob对象
            let a = document.createElement("a");
            document.body.appendChild(a);
            a.href = url;
            //filename名称截取(后端拼到了header头里了)
            let fileName = res.headers["content-disposition"]
                .split(";")[1]
                .split("=")[1];
            a.download = fileName; // 命名下载名称,文件名解码
            a.click(); //点击触发下载
            window.URL.revokeObjectURL(url);
            document.body.removeChild(a);
        },

Vue使用new Blob()实现不同类型的文件下载导出

项目中后端返回的是文件上传成功生成的一个字符串，为了保证可以下载所有文件，需要对后缀进行截取进行判断然后取不同的new Blob，这里new Blob中后端直接返回的是文件流，所以直接用res进行获取
注意：responseType一定要指定类型

downloadExample(assetNo,downloadAddress){
    axios({
        method: "get",
        url: '/dev-api/directory/io/exportdemo?assetNo=' + assetNo + '&fileNo=' + downloadAddress,
        data: "",
        responseType: "blob", // 指定响应类型为二进制数据
    }).then((res) => {
        // 下载格式为zip { type: "application/zip" }
        let suffix = downloadAddress.substring(downloadAddress.lastIndexOf("."))
        if (suffix=='.xls'){
            let blob = new Blob([res], {type: "application/vnd.ms-excel"});
            this.ways(blob,suffix);
        }else if (suffix=='.xlsx'){
            let blob = new Blob([res], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
            this.ways(blob,suffix);
        }else if (suffix=='.doc'){
            let blob = new Blob([res], {type: "application/msword"});
            this.ways(blob,suffix);
        }else if (suffix=='.docx'){
            let blob = new Blob([res], {type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"});
            this.ways(blob,suffix);
        }else if (suffix=='.png'){
            let blob = new Blob([res], {type: "pplication/pdf"});
            this.ways(blob,suffix);
        }else if (suffix=='.ppt'){
            let blob = new Blob([res], {type: "application/vnd.ms-powerpoint"});
            this.ways(blob,suffix);
        }else if (suffix=='.png'){
            let blob = new Blob([res], {type: "image/png"});
            this.ways(blob)
        }else if (suffix=='.pptx'){
            let blob = new Blob([res], {type: "application/vnd.openxmlformats-officedocument.presentationml.presentation"});
            this.ways(blob,suffix);
        }else if (suffix=='.jpeg'){
            let blob = new Blob([res], {type: "image/jpeg"});
            this.ways(blob,suffix);
        }else if (suffix=='.zip'){
            let blob = new Blob([res], {type: "application/zip"});
            this.ways(blob,suffix);
        }else if (suffix=='.7z'){
            let blob = new Blob([res], {type: "application/x-7z-compressed"});
            this.ways(blob,suffix);
        }else if (suffix=='tar'){
            let blob = new Blob([res], {type: "application/x-tar"});
            this.ways(blob,suffix);
        }else if (suffix=='.7z'){
            let blob = new Blob([res], {type: "application/x-7z-compressed"});
            this.ways(blob,suffix);
        }
    })
},
    ways(blob, suffix,res) {
        let elink = document.createElement("a");   // 创建一个<a>标签
        elink.style.display = "none";                       // 隐藏标签
        elink.href = window.URL.createObjectURL(blob);      // 配置href
        // 获取后端返回的响应头中的名称
        let filename = res.headers["content-disposition"]; 
        let newFilename = filename.split(';')[1].split('=')[1];
        //自定义名称
        // let newFilename = "样例文件" + new Date().getTime() + suffix; 
        //自定义名字
        // let newFilename = decodeURIComponent(res.headers["content-disposition"].split(';')[1].split('=')[1])
        newFilename = decodeURIComponent(newFilename);
        elink.download = newFilename;
        elink.click();
        URL.revokeObjectURL(elink.href);   // 释放URL 对象(弹出框进行下载)
        document.body.removeChild(elink);  // 移除<a>标签
    },

文件流下载处理简单代码示例：

let blob = new Blob([res], {type:'application/vnd.ms-exce;chartset=utf-8' });
let downloadElement = document.createElement('a');
let href = window.URL.createObjectURL(blob);           //创建下载的链接
downloadElement.href = href;
downloadElement.download ='用户.xlsx';                  //下载后文件名
document.body.appendChild(downloadElement);
downloadElement.click();                               //点击下载
document.body.removeChild(downloadElement);            //下载完成移除元素
window.URL.revokeObjectURL(href);

原文链接：https://blog.csdn.net/oBoLuoMi1/article/details/137549304