HarmonyOS:基于axios实现文件的下载以及下载进度的监听

#前言:项目开发中,避免不了实现文件下载功能,其他平台的下载都很成熟,网上的例子也比较多,我就自己项目中实现的下载功能做个总结,你可以参考我的写法实现功能。 下载封装基于axios实现的下载功能。

1.下载文件url:xxx

2.文件操作封装类:FileUtil ,是桃花源长老的文件封装库,第三方库,各种工具类很多,很方便

3.下载方法:dowLoadFileCallBack

4.下载封装:axiosClient.downLoadFil

简单的介绍,详细的下载步骤如下:

//下载方法,开始下载

kotlin 复制代码
startDownLoadFileTask(){
    //下载文件路径
    let testUrl ='xxx'
    if (FileUtil.accessSync(this.fileSavePath)&&this.downLoadFile.fileDownLoadStatus =='3') {
      WinLog.info('文件存在,不用下载直接打开')
      this.previewFileMethod();
      return;
    }
    //先删除旧的未下载完毕的文件
    if (FileUtil.accessSync(this.fileSavePath)) {
      FileUtil.unlinkSync(this.fileSavePath);
    }
    HttpRequest.dowLoadFileCallBack(testUrl,this.fileSavePath,({
      onResult:(downLoadInfo:WinDownloadFileModel)=>{
        //下载状态值,主要是用来区分图片的展示状态
        this.downStatusName = 'ic_downing_status';
        if (this.progress==100) {
          this.downStatusName = 'ic_play_status';
        }
        if (downLoadInfo.fileDownLoadStatus=='3') {
          downLoadInfo.fileUrl = this.downLoadFile.fileUrl;
          this.downLoadFile.fileDownLoadStatus = '3';
          //更新本地数据库状态
          BaseDownFileQueryManager.updateDownFileTableData(downLoadInfo);
        }
        //下载进度条的值显示
        this.progress = downLoadInfo.fileDownProgress;
        //计算下载的文件大小
        this.fileSize = `文件大小:${FileUtil.getFormatFileSize(downLoadInfo.fileLength)}`
      }
    }),({
      onError:(error:string)=>{
        this.downStatusName = 'ic_needdown_status';
        WinLog.error('下载文件报错:'+ error);
        this.downLoadFile.fileDownLoadStatus = '2';
      }
    }))
  }
HttpRequest类,下载的方法

/*

  • 文件下载方法
  • @param url下载地址
  • @param filePath文件路径
  • @param successCallBack成功回调
  • @param failureCallBack
  • */
typescript 复制代码
static dowLoadFileCallBack(url:string,filePath:string,successCallBack?:DownLoadCallback,failureCallBack?:DownLoadErrorCallback){
    const commonHeader: AxiosHeaders = new AxiosHeaders()
    commonHeader.set('Accept-Language', i18n.System.getSystemLanguage())
    commonHeader.set('User-Agent', commonUtils.getUserAgent())
    commonHeader.set('Content-Type', 'application/x-www-form-urlencoded')
    axiosClient.downLoadFile(filePath,{
      url: url,
      headers: commonHeader,
      showLoading: false,
    },successCallBack,failureCallBack);
  }
}
//自定义封装的回调类
export interface DownLoadCallback {
  /**
   * 下载回调
   * @param popInfo
   */
  onResult?: (downLoadingInfo: WinDownloadFileModel) => void;
}
export interface DownLoadErrorCallback {
  onError?: (error: string) => void;
}
文件下载的具体实现方法,主要是基于axios的文件下载方法,进行了二次封装,适用于自己的项目下载,你也可以参看我的方法,改成适合你的项目用法,都是很简单的,我这个只是单文件的下载,还没进行多文件同时下载,多文件下载需要进行线程控制,以及队列控制。
ini 复制代码
/*
   * 文件下载
   * **/
  downLoadFile(filePath:string,config?: HttpRequestConfig,successCallBack?:DownLoadCallback,failureCallBack?:DownLoadErrorCallback){
    axios({
      url: config?.url,
      method: 'get',
      context: getContext(this),
      filePath: filePath ,
      onDownloadProgress: (progressEvent: AxiosProgressEvent): void => {
        //下载回掉,状态设置,以及进度的回调
        let downProgressModel = new WinDownloadFileModel();
        if (progressEvent.total&&progressEvent.total>0) {
          downProgressModel.fileDownLoadStatus = '2';
          downProgressModel.fileDownProgress = NumberUtil.toFloat((progressEvent.loaded / progressEvent.total * 100).toFixed(2).toString());
          downProgressModel.fileLength = progressEvent.total;
          if (successCallBack&&successCallBack.onResult) {
            successCallBack.onResult(downProgressModel);
          }
        }else {
          downProgressModel.fileDownLoadStatus = '1';
          downProgressModel.fileDownProgress = 0
          if (successCallBack&&successCallBack.onResult) {
            successCallBack.onResult(downProgressModel);
          }
        }
      }
    }).then((res: AxiosResponse<string>) => {
     //下载完毕的回调
      winLog.info('down load finish:'+ JSON.stringify(res));
      let downProgressModel = new WinDownloadFileModel();
      downProgressModel.fileDownLoadStatus = '3';
      downProgressModel.fileDownProgress = 100;
      //计算下载文件的大小
      let fileSize = FileUtil.getFileDirSize(filePath);
      downProgressModel.fileLength = fileSize;
          if (successCallBack&&successCallBack.onResult) {
            successCallBack.onResult(downProgressModel);
          }    
        
     }).catch((error: AxiosError) =>{
      //下载失败的回调
      if (failureCallBack&&failureCallBack.onError) {
        failureCallBack.onError(error.message);
      }
    })
  }

这些代码就可以实现单文件的下载,以及进度条的展示,以及下载状态的更新。有什么疑问可以随时询问,感谢mark。

相关推荐
前端布道师1 小时前
Web响应式:列表自适应布局
前端
ZeroTaboo1 小时前
rmx:给 Windows 换一个能用的删除
前端·后端
李剑一1 小时前
Vue实现大屏获取当前所处城市及当地天气(纯免费)
前端
_果果然2 小时前
这 7 个免费 Lottie 动画网站,帮你省下一个设计师的工资
前端
QT.qtqtqtqtqt2 小时前
uni-app小程序前端开发笔记(更新中)
前端·笔记·小程序·uni-app
Aliex_git2 小时前
跨域请求笔记
前端·网络·笔记·学习
37方寸2 小时前
前端基础知识(Node.js)
前端·node.js
powerfulhell2 小时前
寒假python作业5
java·前端·python
木子啊3 小时前
前端组件化:模板继承拯救发际线
前端
三十_A3 小时前
零基础通过 Vue 3 实现前端视频录制 —— 从原理到实战
前端·vue.js·音视频