下载文件后，下载次数没更新

背景
一个列表中每行都有下载按钮，点击下载后，进行重新搜索，发现下载次数偶尔会没有变化的情况，而再次进行搜索又会发现，下载次数正常。
我的下载是通过 向一个空iframe增加src路径的方式进行下载，然后直接在.then后进行搜索。

<!-- html -->
<iframe style="display: none;" id="wholeExportIframe"></iframe>

let $iframe = $('iframe[id="wholeExportIframe"]');
$iframe.attr('src', `${
       HDEC_API}/reports/records/download/${
       id}`)

问题分析
$iframe.attr{(}^{\prime }sr{c}^{\prime },‘${HDEC_API}/reports/records/download/${id}`)只是进行了赋值以及开始了下载，但是下载并未下载完成，所以后端下载次数+1还没搞，就进行了搜索。

方法论：
方法一：
监听iframe的状态，等其下载完才进行搜索。

let $iframe = $('iframe[id="wholeExportIframe"]');
      return new Promise((resolve) => {
     

        let timer = setInterval(function () {
     
          let iframe = $iframe.get(0);
          let iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
          // Check if loading is complete
          if (iframeDoc.readyState === 'complete' || iframeDoc.readyState === 'interactive') {
     
            clearInterval(timer);
            resolve({
     
              stateCode: "jb_000000",
              description: "成功", data: {
     }
            });
          }
        }, 1000);
        $iframe.attr('src', `${
       HDEC_API}/reports/records/download/${
       id}`)

      }).then(result => {
     
        return result
      })

方法二：
用Blob接收然后进行下载

axios.get(`${
       HDEC_API}/reports/records/download/${
       id}`, {
     
        headers: {
     
          'Content-Type': 'application/octet-stream'
          },
        responseType: 'arraybuffer',
      }).then((res) => {
     

        var b = new Blob([res], {
      type: 'application/vnd.ms-excel' });
        // 根据传入的参数b创建一个指向该参数对象的URL
        var url = URL.createObjectURL(b);
        var link = document.createElement('a');
        // 设置导出的文件名
        link.download = '下载文件名.xlsx';
        link.href = url;
        // 点击获取文件
        link.click();
      })

延伸

1.页面加载情况判断document.readyState值可以是complete和interactive