HarmonyOS 鸿蒙Next网络编程系列43-仓颉版HttpRequest下载文件示例

HarmonyOS 鸿蒙Next网络编程系列43-仓颉版HttpRequest下载文件示例

1. HttpRequest文件下载简介

在本系列的第10篇文章《鸿蒙网络编程系列10-使用HttpRequest下载文件到本地示例》中，使用ArkTS语言在API 9环境下演示了基于HttpRequest进行文件下载的功能，本章将使用仓颉语言在API 12环境下实现类似的功能。因为本示例使用的下载网站必须登录后才可以下载，所以，需要先模拟登录，获取登录后的cookie，再使用cookie进行文件下载。

2. HttpRequest文件下载演示

本示例运行后的页面如图所示：

![图1]

输入用户名、密码和登录地址，单击“登录”按钮就可以登录了，登录获取的cookie会显示在日志区域。登录后，再输入要下载的文件地址以及文件保存的本地文件名称，单击“下载”按钮就可以下载文件了，如图所示：

![图2]

文件成功下载到了本地，文件内容也在日志区域进行了显示（这里假设下载的是文本文件）。

3. HttpRequest文件下载示例编写

下面详细介绍创建该示例的步骤（确保DevEco Studio已安装仓颉插件）。

步骤1：创建[Cangjie]Empty Ability项目。

步骤2：在module.json5配置文件加上对权限的声明：

"requestPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      }
    ]

这里添加了访问互联网的权限。

步骤3：在build-profile.json5配置文件加上仓颉编译架构：

"cangjieOptions": {
      "path": "./src/main/cangjie/cjpm.toml",
      "abiFilters": ["arm64-v8a", "x86_64"]
    }

步骤4：在main_ability.cj文件里添加如下的引用：

import ohos.ability.*

然后定义变量globalContext：

var globalContext: Option<AbilityContext> = Option<AbilityContext>.None

在onCreate函数里添加如下的代码：

globalContext = this.context

步骤5：在index.cj文件里添加如下的代码：

package ohos_app_cangjie_entry

import ohos.base.*
import ohos.component.*
import ohos.state_manage.*
import ohos.state_macro_manage.*
import std.collection.HashMap
import ohos.net.http.*
import ohos.file_picker.*
import ohos.ability.getStageContext
import ohos.ability.*
import ohos.file_fs.*

@Entry
@Component
class EntryView {
    @State
    var title: String = '仓颉版文件下载示例';
    //连接、通讯历史记录
    @State
    var msgHistory: String = ''
    //首页地址
    @State
    var downloadUrl: String = "http://*.*.*.*:8081/download?filename=demo.txt"
    //登录地址
    @State
    var loginUrl: String = "http://*.*.*.*:8081/auth"
    //用户名
    @State
    var loginName: String = "zhanglei"
    //密码
    @State
    var passwd: String = "HarmonyOS"

    @State
    //保存到的本地文件名称
    var localFileName: String = "demo.txt"
    //cookie中传递的sessionid
    var sessionId: String = ""
    let scroller: Scroller = Scroller()

    func build() {
        Row {
            Column {
                Text(title).fontSize(14).fontWeight(FontWeight.Bold).width(100.percent).textAlign(TextAlign.Center).
                    padding(10)

                Flex(FlexParams(justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center)) {
                    Text("用户名：").fontSize(14)

                    TextInput(text: loginName).onChange({
                        value => loginName = value
                    }).width(100).fontSize(11).flexGrow(1)

                    Text("密码：").fontSize(14)

                    TextInput(text: passwd).onChange({
                        value => passwd = value
                    }).width(100).fontSize(11).setType(InputType.Password).flexGrow(1)
                }.width(100.percent).padding(10)

                Flex(FlexParams(justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center)) {
                    Text("登录地址：").fontSize(14).width(80)

                    TextInput(text: loginUrl).onChange({
                        value => loginUrl = value
                    }).width(100).fontSize(11).flexGrow(1)

                    Button("登录").onClick {
                        evt => login()
                    }.width(70).fontSize(14).flexGrow(0)
                }.width(100.percent).padding(10)

                Flex(FlexParams(justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center)) {
                    Text("下载文件地址：").fontSize(14)

                    TextInput(text: downloadUrl).onChange({
                        value => downloadUrl = value
                    }).width(100).fontSize(11).flexGrow(1)
                }.width(100.percent).padding(10)

                Flex(FlexParams(justifyContent: FlexAlign.End, alignItems: ItemAlign.Center)) {
                    Text("本地文件名称：").fontSize(14)

                    TextInput(text: localFileName).onChange({
                        value => localFileName = value
                    }).width(100).fontSize(11).flexGrow(1)

                    Button("下载").onClick {
                        evt => downloadFile()
                    }.width(70).fontSize(14)
                }.width(100.percent).padding(10)

                Scroll(scroller) {
                    Text(msgHistory).textAlign(TextAlign.Start).padding(10).width(100.percent).backgroundColor(0xeeeeee)
                }.align(Alignment.Top).backgroundColor(0xeeeeee).height(300).flexGrow(1).scrollable(
                    ScrollDirection.Vertical).scrollBar(BarState.On).scrollBarWidth(20)
            }.width(100.percent).height(100.percent)
        }.height(100.percent)
    }

    //下载文件
    func downloadFile() {
        //http请求对象
        let httpRequest = createHttp();
        let header = HashMap<String, String>(
            ("Accept-Encoding", "gzip, deflate, br"),
            ("Cookie", 'sessionid=' + this.sessionId),
            ("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")
        );
        let opt = HttpRequestOptions(
            method: RequestMethod.GET,
            header: header,
            expectDataType: HttpDataType.ARRAY_BUFFER
        )

        httpRequest.request(this.downloadUrl, saveFileResponse, options: opt)
    }

    //下载文件请求的响应函数
    func saveFileResponse(err: ?BusinessException, response: ?HttpResponse) {
        if (let Some(e) <- err) {
            msgHistory += "请求失败：" + e.message + "\r\n"
        }

        if (let Some(resp) <- response) {
            msgHistory += "响应码：${resp.responseCode.getValue()}\r\n"

            let localFilePath = globalContext.getOrThrow().filesDir + "/" + this.localFileName
            if (FileFs.access(localFilePath)) {
                FileFs.unlink(localFilePath)
            }
            match (resp.result) {
                case HttpData.ARRAY_DATA(value) =>
                    let file = FileFs.open(localFilePath, mode: CREATE.mode | READ_WRITE.mode)
                    FileFs.write(file.fd, value)
                    FileFs.close(file)

                    //输出文件内容
                    let content = FileFs.readText(localFilePath)
                    msgHistory += "文件内容:${content}\r\n"
                case _ => msgHistory += "响应的数据不是二进制类型\r\n"
            }
        }
    }

    //登录
    func login() {
        //http请求对象
        let httpRequest = createHttp();
        //请求的登录名和密码参数
        let params = "username=" + loginName + "&password=" + passwd

        let header = HashMap<String, String>(("Content-Type", "application/x-www-form-urlencoded"));
        let opt = HttpRequestOptions(
            method: RequestMethod.POST,
            extraData: HttpData.STRING_DATA(params),
            header: header,
            expectDataType: HttpDataType.STRING
        )

        httpRequest.request(loginUrl, dealWithResponse, options: opt)
    }

    //登录的响应处理函数
    func dealWithResponse(err: ?BusinessException, response: ?HttpResponse) {
        if (let Some(e) <- err) {
            msgHistory += "请求失败：" + e.message + "\r\n"
        }

        if (let Some(resp) <- response) {
            msgHistory += "响应码：${resp.responseCode.getValue()}\r\n"

            var findResult = false
            //从setCookie列表中查找名称为sessionid的cookie对应的值
            for (setCookieItem in resp.setCookie) {
                let cookie = setCookieItem.split(";")
                for (cookieItem in cookie) {
                    let kvItem = cookieItem.split("=")
                    if (kvItem[0].trimAscii() == "sessionid") {
                        sessionId = kvItem[1]
                        findResult = true
                        break;
                    }
                }
                if (findResult) {
                    msgHistory += "sessionId = ${sessionId}\r\n"
                    break
                }
            }
        } else {
            msgHistory += "响应为空\r\n"
        }
    }
}

步骤6：编译运行，可以使用模拟器或者真机。

步骤7：按照本节第2部分“HttpRequest文件下载演示”操作即可。

4. 代码分析

仓颉语言和ArkTS毕竟是两种语言，而且在目前阶段，仓颉语言对鸿蒙系统的适配暂时没有ArkTS完善，所以，有些ArkTS能比较方便使用的方法，在仓颉语言这里可能要适当调整下才能使用，比如获取上下文的函数getContext，在ArkTS里，直接即可即可，而在仓颉语言里，需要先在main_ability.cj定义全局变量globalContext，再从onCreate时间处理函数里对其进行赋值，然后再在需要的地方使用。

另外，仓颉版本中，服务端返回的cookie信息在当前的API中，位于HttpResponse类的setCookie属性中，并不在header属性中，这一点和ArkTS也不相同，以后可能会变化。

（本文作者原创，除非明确授权禁止转载）

本文源码地址： https://gitee.com/zl3624/harmonyos_network_samples/tree/master/code/http/FileDownload4Cj

本系列源码地址： https://gitee.com/zl3624/harmonyos_network_samples