欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

axios進(jìn)度條onDownloadProgress函數(shù)total參數(shù)undefined解決分析

 更新時間：2023年07月25日 14:52:07   作者：水冗水孚  
這篇文章主要介紹了axios進(jìn)度條onDownloadProgress函數(shù)total參數(shù)undefined解決分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

問題描述

  • 使用axios發(fā)請求，想要實現(xiàn)一個請求的結(jié)果進(jìn)度
  • 比如當(dāng)網(wǎng)絡(luò)慢的情況，或者某個請求返回的數(shù)據(jù)量比較大的情況等
  • 最常見的就是下載一個大文件，要查看大文件下載的進(jìn)度
  • axios的onDownloadProgress函數(shù)已經(jīng)幫我們封裝好了
  • 是基于原生的ProgressEvent套殼子的

比如我們下載一個流文件，要呈現(xiàn)下載的進(jìn)度，在這里打印一下進(jìn)度事件

axios({
    method: "get",
    responseType: "blob", // 流文件為blob類型
    url: "http://ashuai.work:10000/getDoc",
    onDownloadProgress(ProgressEvent) {
        console.log('進(jìn)度事件', ProgressEvent);
    }
}).then(({ data }) => {
    console.log('接口請求完成',data);
});

打印結(jié)果如下圖：

這里為何拿不到total的值？

  • 是因為接口的響應(yīng)頭，沒有返回Content-Length屬性
  • 所以ProgressEvent就拿不到這個值，所以就沒有total的值，就為undefined

請看響應(yīng)頭

 Content-Length 大家可以簡要理解成為一個接口返回的內(nèi)容的總大小，單位字節(jié)，我們知道了某個時刻loaded多少字節(jié)，知道總字節(jié)，就可以得出百分比了

解決方案

讓后端在響應(yīng)頭上加上Content-Length即可

讓后端在響應(yīng)頭上加上Content-Length即可

讓后端在響應(yīng)頭上加上Content-Length即可

筆者這里使用express演示一下代碼：

route.get('/getDoc', (req, res) => {
  res.header('Access-Control-Allow-Origin', '*');
  // fs.statSync讀取文件信息，讀取當(dāng)前目錄下的study.docx文件
  let docxUrl = './doc/study.docx'
  const Myfilesize = fs.statSync(docxUrl).size // 拿到文件字節(jié)大小
  // 設(shè)置請求頭
  res.writeHead(200, {
    'Content-Type': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
    'content-length': Myfilesize // 加上即可
  })
  let readStream = fs.createReadStream(docxUrl) // 流文件pipe管道返回
  readStream.pipe(res);
})

加上以后，響應(yīng)頭就有Content-Length了，就能正常了

這樣的話，進(jìn)度條效果也就有了

 流文件請求手動加上，普通的請求會自帶Content-Length的

代碼附上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.5/axios.js"></script>
    <title>請求接口進(jìn)度</title>
</head>
<body>
    <button @click="goPreview">點擊預(yù)覽word文件</button>
    <br>
    <progress max="100" value="0"></progress> <span class="val">0</span>
    <script>
        let btn = document.querySelector('button')
        let prog = document.querySelector('progress')
        let v = document.querySelector('.val')
        btn.onclick = () => {
            axios({
                method: "get",
                responseType: "blob", // 流文件為blob類型
                url: "http://ashuai.work:10000/getDoc",
                onDownloadProgress(ProgressEvent) {
                    let percent = Math.floor((ProgressEvent.loaded / ProgressEvent.total) * 100)
                    prog.setAttribute('value', percent)
                    v.innerHTML = percent + '%'
                    console.log('進(jìn)度事件', ProgressEvent);
                }
            }).then(({ data }) => {
                console.log(data); // 后端返回的是流文件
            });
        }
    </script>
</body>
</html>

以上就是axios進(jìn)度條onDownloadProgress函數(shù)total參數(shù)undefined解決分析的詳細(xì)內(nèi)容，更多關(guān)于axios進(jìn)度條onDownloadProgress的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評論