# 在 vue3 中监听由 axios 发起的发布请求，显示响应数据百分比进度条

1.在封装的请求api函数中增加一个onDownloadProgress参数

export function getTxtUid(query,onDownloadProgress){
    return service({
        method:'post',  //请求的方法
        url:`/*************`, //请求的地址
        params: query,    //提交的参数
        onDownloadProgress:onDownloadProgress,
    })
}

2、在index.vue发起请求函数中，调用定好的函数onDownloadProgress

const onDownloadProgress_getTxtUid = (progressEvent) => {
  // console.log("progressEvent.loaded已经下载的kb:",progressEvent.loaded)
  // console.log("progressEvent.total总的kb :",progressEvent.total )
  // console.log("progressEvent :",progressEvent )
  let percentage=Math.round( (progressEvent.loaded/progressEvent.total)*100)
  // console.log("百分比：",percentage)

  percentage.value=percentage

}

  getTxtUid(param,onDownloadProgress_getTxtUid).then(res =>{})

3、进度条中展示percentage的值

              <n-progress
                  type="line"
                  :percentage="percentage"
                  :indicator-placement="'inside'"
                  processing
              />

原文地址：https://www.cnblogs.com/chengqiang521/p/16896785.html