鸿蒙开发系列（HarmonyOS）通过Request部件下载文件到本地场景实践 ...

鸿蒙NEXT开发实战往期必看文章：
一分钟了解”纯血版！鸿蒙HarmonyOS Next应用开发！
“非常具体的” 鸿蒙HarmonyOS Next应用开发学习路线！（从零基础入门到醒目）
HarmonyOS NEXT应用开发案例实践总结合（一连更新......）
HarmonyOS NEXT应用开发性能优化实践总结（一连更新......）

---

1. Request下载文件简介

在前述文章使用HttpRequest下载文件到本地示例中，使用基础的HttpRequest模块演示了怎样下载文件到本地，整个下载过程看起来似乎不太复杂，但是，如果考虑到可靠性、网络题目以及文件范例和大小的差异，开发难度还是相当大的，幸运的是，鸿蒙提供了专门用来进行上传下载的API，把这些复杂性都封装了起来，这就是本示例要使用的request部件。
2. request的常用方法

鸿蒙封装的request对象位于模块request中，使用如下的方式导入：
   import request from '@ohos.request';
  request模块包罗了众多的对象和利用方法，就本文而言，重点需要掌握的是downloadFile方法：
downloadFile(context: BaseContext, config: DownloadConfig): Promise<DownloadTask>
该方法实行异步下载，使用promise形式返回结果，结果为DownloadTask范例。可以通过DownloadTask范例的on('complete'|'pause'|'remove')订阅任务下载时的状态信息，包罗任务完成、停息或移除。通过on('fail')可获取任务下载时的错误信息。
3. request下载示例

本文要下载的服务端网站和使用HttpRequest下载文件到本地示例中的网站一样，也是需要登录后才可以下载，本示例运行后的界面如图所示：

应用启动后起首配置用户名密码以及登录地点，然后单击“登录”按钮进行登录，乐成登录后就可以单击“下载”按钮进行下载了，乐成下载后会体现生存位置和下载的文件内容。
下面具体先容创建该应用的步骤。
步骤1：创建Empty Ability项目。
步骤2：在module.json5配置文件加上对权限的声明：

1. "requestPermissions": [
2.       {
3.         "name": "ohos.permission.INTERNET"
4.       }
5.     ]

复制代码

这里添加了访问互联网的权限。
步骤3：在Index.ets文件里添加如下的代码：

1. import http from '@ohos.net.http';
2. import util from '@ohos.util';
3. import fs from '@ohos.file.fs';
4. import request from '@ohos.request';
5. import picker from '@ohos.file.picker';
7. @Entry
8. @Component
9. struct Index {
10.   //连接、通讯历史记录
11.   @State msgHistory: string = ''
12.   //首页地址
13.   @State downloadUrl: string = "http://192.168.100.101:8081/download?filename=demo.txt"
14.   //登录地址
15.   @State loginUrl: string = "http://192.168.100.101:8081/auth"
16.   //用户名
17.   @State loginName: string = "zhanglei"
18.   //密码
19.   @State passwd: string = "cangjie"
21.   //下载到本地的路径
22.   @State localFilePath: string = ""
24.   scroller: Scroller = new Scroller()
25.   sessionId: string = ""
27.   build() {
28.     Row() {
29.       Column() {
30.         Text("Request下载示例")
31.           .fontSize(14)
32.           .fontWeight(FontWeight.Bold)
33.           .width('100%')
34.           .textAlign(TextAlign.Center)
35.           .padding(10)
38.         Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
39.           Text("用户名：")
40.             .fontSize(14)
41.             .width(80)
42.             .flexGrow(0)
44.           TextInput({ text: this.loginName })
45.             .onChange((value) => {
46.               this.loginName = value
47.             })
48.             .width(110)
49.             .fontSize(11)
50.             .flexGrow(1)
52.           Text("密码：")
53.             .fontSize(14)
54.             .width(60)
55.             .flexGrow(0)
57.           TextInput({ text: this.passwd })
58.             .onChange((value) => {
59.               this.passwd = value
60.             })
61.             .type(InputType.Password)
62.             .width(100)
63.             .fontSize(11)
64.             .flexGrow(1)
65.         }
66.         .width('100%')
67.         .padding(10)
69.         Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
70.           Text("登录地址：")
71.             .fontSize(14)
72.             .width(80)
73.             .flexGrow(0)
75.           TextInput({ text: this.loginUrl })
76.             .onChange((value) => {
77.               this.loginUrl = value
78.             })
79.             .width(100)
80.             .fontSize(11)
81.             .flexGrow(1)
82.           Button("登录")
83.             .onClick(() => {
84.               this.login()
85.             })
86.             .width(70)
87.             .fontSize(14)
88.             .flexGrow(0)
89.         }
90.         .width('100%')
91.         .padding(10)
93.         Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
94.           Text("文件地址：")
95.             .fontSize(14)
96.             .width(80)
97.             .flexGrow(0)
99.           TextInput({ text: this.downloadUrl })
100.             .onChange((value) => {
101.               this.downloadUrl = value
102.             })
103.             .width(110)
104.             .fontSize(11)
105.             .flexGrow(1)
107.           Button("下载")
108.             .onClick(() => {
109.               this.downloadFile()
110.             })
111.             .width(70)
112.             .fontSize(14)
113.             .flexGrow(0)
114.         }
115.         .width('100%')
116.         .padding(10)
118.         Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
119.           Text("保存位置：")
120.             .fontSize(14)
121.             .width(80)
122.             .flexGrow(0)
124.           TextInput({ text: this.localFilePath })
125.             .width(110)
126.             .fontSize(11)
127.             .flexGrow(1)
128.         }
129.         .width('100%')
130.         .padding(10)
132.         Scroll(this.scroller) {
133.           Text(this.msgHistory)
134.             .textAlign(TextAlign.Start)
135.             .padding(10)
136.             .width('100%')
137.             .backgroundColor(0xeeeeee)
138.         }
139.         .align(Alignment.Top)
140.         .backgroundColor(0xeeeeee)
141.         .height(300)
142.         .flexGrow(1)
143.         .scrollable(ScrollDirection.Vertical)
144.         .scrollBar(BarState.On)
145.         .scrollBarWidth(20)
146.       }
147.       .width('100%')
148.       .justifyContent(FlexAlign.Start)
149.       .height('100%')
150.     }
151.     .height('100%')
152.   }
154.   //下载文件
155.   downloadFile() {
156.     this.localFilePath = getContext(this).tempDir + "/demo.txt"
158.     //文件如果已经存在，就删除
159.     if (fs.accessSync(this.localFilePath)) {
160.       fs.unlink(this.localFilePath)
161.     }
163.     let cfg: request.DownloadConfig = {
164.       url: this.downloadUrl,
165.       header: {
166.         'Accept-Encoding': 'gzip, deflate, br',
167.         'Accept-Language': 'zh-CN,zh;q=0.9',
168.         //这一步很关键，把登录成功后的cookie传递过去
169.         'Cookie': 'sessionid=' + this.sessionId,
170.         'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
171.       },
172.       filePath: this.localFilePath }
174.     let downloadTask: request.DownloadTask;
176.     try {
177.       request.downloadFile(getContext(this), cfg
178.         , (err, data) => {
179.           if (err) {
180.             console.error('Failed to request the download. Cause: ' + JSON.stringify(err));
181.             return;
182.           }
183.           downloadTask = data;
184.           downloadTask.on("progress", (size, tot) => {
185.             this.msgHistory += `下载进度：${size}/${tot}\r\n`
186.           })
187.           downloadTask.on("complete", () => {
188.             this.msgHistory += "下载完成\r\n"
189.             //读取文件内容并显示
190.             this.showFileContent(this.localFilePath)
191.           })
192.         });
193.     } catch (err) {
194.       this.msgHistory += 'err.code : ' + err.code + ', err.message : ' + err.message;
195.     }
196.   }
198.   //显示指定文件的内容
199.   showFileContent(filePath: string) {
200.     let content = fs.readTextSync(filePath)
201.     this.msgHistory += "文件内容：" + content + "\r\n"
202.   }
204.   //模拟登录
205.   login() {
206.     //http请求对象
207.     let httpRequest = http.createHttp();
208.     //请求的登录名和密码参数
209.     let params = "username=" + this.loginName + "&password=" + this.passwd
211.     let opt: http.HttpRequestOptions = {
212.       method: http.RequestMethod.POST,
213.       extraData: params,
214.       header: { 'Content-Type': 'application/x-www-form-urlencoded' },
215.       expectDataType: http.HttpDataType.STRING
216.     }
218.     httpRequest.request(this.loginUrl, opt)
219.       .then((resp) => {
220.         this.msgHistory += "响应码：" + resp.responseCode + "\r\n"
221.         //返回的首部信息中，cookie的格式为：
222.         // set-cookie: sessionid=19837d50s270ms999us100ns; Max-Age=1800; Path=/
223.         //这里需要记录下sessionid，作为下次提交时的cookie信息
224.         let cookies: string = resp.header["set-cookie"]
225.         this.sessionId = cookies.split(";")[0].split("=")[1]
226.         this.msgHistory += "sessionId：" + this.sessionId + "\r\n"
227.         this.msgHistory += "登录成功\r\n"
229.       })
230.       .catch((e) => {
231.         this.msgHistory += "登录失败：" + e.message + "\r\n"
232.       })
233.   }
234. }

复制代码

步骤4：编译运行，可以使用模拟器大概真机。
步骤5：配置网站首页地点和登录地点，然后单击“登录”按钮，就可以模拟登录了，登录后的页面如图所示：

步骤6：单击“下载”按钮，应用会下载文件并生存到本地，然后从本地读取文件的内容（假设文件是文本范例的），如图所示：

可以看到，文件乐成生存到了本地并读取到了文件的内容。
3. 下载功能分析

要实现下载功能，关键点和使用httpRequest一样，也是要获取sessionId，而且在发起下载任务的DownloadConfig配置里通过header附加上sessionid，代码如下：

1. let cfg: request.DownloadConfig = {
2.       url: this.downloadUrl,
3.       header: {
4.         'Accept-Encoding': 'gzip, deflate, br',
5.         'Accept-Language': 'zh-CN,zh;q=0.9',
6.         //这一步很关键，把登录成功后的cookie传递过去
7.         'Cookie': 'sessionid=' + this.sessionId,
8.         'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
9.       },
10.       filePath: this.localFilePath }

复制代码

另外要注意的一点是，如果文件下载过一次，再次下载时会提示本地文件已经存在，如许就会下载失败，解决方法是在下载前判断文件是否存在，如果存在就先删除，代码如下：

1.     this.localFilePath = getContext(this).tempDir + "/demo.txt"
3.     //文件如果已经存在，就删除
4.     if (fs.accessSync(this.localFilePath)) {
5.       fs.unlink(this.localFilePath)
6.     }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。