HarmonyOS开发实战:使用http进行网络通信(前后端示例)

164 篇文章 0 订阅
154 篇文章 0 订阅

1.鸿蒙http模块

鸿蒙官方提供'@ohos.net.http'模块,它支持应用通过HTTP发起一个数据请求,支持常见的GETPOSTOPTIONSHEADPUTDELETETRACECONNECT方法。

在实际应用场景中,GETPOST使用较多,因此,基于这两种请求方式,封装简单的http工具库

2.http工具库示例

xport class HttpInterface {
    static readonly TAG = 'HttpInterface'
    static readonly HTTP_READ_TIMEOUT = 90 * 1000; //90ms
    static readonly HTTP_CONNECT_TIMEOUT = HttpInterface.HTTP_READ_TIMEOUT;
    static readonly CONTENT_TYPE_HEADER = {
        'Content-Type': 'application/json'
    }

    static httpRequest(
        url: string,
        params?: string | Object | ArrayBuffer,
        header?: Object
    ): Promise<HttpResponseResult> {
        // 每一个httpRequest对应一个HTTP请求任务,不可复用
        const request = http.createHttp();

        let method = http.RequestMethod.POST

        if (params == null || params == undefined) {
            method = http.RequestMethod.GET
            console.info(`${HttpInterface.TAG} http get request url  :${url}, httpHeader:${JSON.stringify(header)}`)
        } else {
            console.info(`${HttpInterface.TAG} http post request url  :${url}, httpHeader:${JSON.stringify(header)} params:${JSON.stringify(params)}`)
        }

        const responseResult = request.request(url, {
            // 超时时间
            readTimeout: HttpInterface.HTTP_READ_TIMEOUT,
            connectTimeout: HttpInterface.HTTP_CONNECT_TIMEOUT,
            method,
            extraData: params,
            header: { ...HttpInterface.CONTENT_TYPE_HEADER, ...header },
        });

        let httpResponseResult: HttpResponseResult = new HttpResponseResult();

        return responseResult.then((data: http.HttpResponse) => {
            console.info(`${HttpInterface.TAG}  httpStatus code :${data.responseCode}, response httpheader:${JSON.stringify(data.header)} `)
            const responseCode = data.responseCode
            httpResponseResult.data = data.result

            if (responseCode === http.ResponseCode.OK) {
                httpResponseResult.resultType = HttpResponseResultType.SUCCESS

            } else if (responseCode >= http.ResponseCode.INTERNAL_ERROR) {
                httpResponseResult.resultType = HttpResponseResultType.SERVICE_ERROR

            } else if (responseCode >= http.ResponseCode.BAD_REQUEST) {
                httpResponseResult.resultType = HttpResponseResultType.CLIENT_ERROR
            } else {
                httpResponseResult.resultType = HttpResponseResultType.OTHER_ERROR
            }

            return httpResponseResult;

        }).catch((err) => {
            //
            console.error(`${HttpInterface.TAG} response error: ${JSON.stringify(err)}`)
            httpResponseResult.resultType = HttpResponseResultType.EXCEPTION
            httpResponseResult.data = JSON.stringify(err)
            return httpResponseResult

        }).finally(() => {
            console.info(`${HttpInterface.TAG} response finish httpResponseResult ---resultType: ${httpResponseResult.resultType},data:${httpResponseResult.data} }`)
            // 当该请求使用完毕时,调用destroy方法主动销毁
            request.destroy();
        })
    }
}

3.http工具库调用

3.1.鸿蒙前端http get调用
httpGet() {

        //const url = 'http://127.0.0.1:8081/user/home'
        const url = 'http://10.0.2.2:8081/user/home'
        HttpInterface.httpRequest(url).then(response => {
            if (response.resultType === HttpResponseResultType.SUCCESS) {
                console.info(`${this.TAG} httpRequest 请求成功数据: ${JSON.stringify(response.data)}`)
                this.getResponseData = JSON.stringify(response.data)
            } else {
                console.info(`${this.TAG} httpRequest 请求失败数据: ${response.resultType} error:${JSON.stringify(response.data)}`)
            }
        }).catch(err => {
            console.info(`${this.TAG} httpRequest 请求失败 error:${JSON.stringify(err)}`)
        })
    }

3.2.后端http get接口

@router.get('/home')
async def home():
    return  {"code":200,'message': "hello fastapitest", "data": {"name":"ksnowlv","age":"20"}}

3.3.鸿蒙前端http post调用

    httpPost() {
        // const url = 'http://127.0.0.1:8081/user/test'
        const url = 'http://10.0.2.2:8081/user/test'
        const pageInfo = {
            "pageIndex": 0,
            "pageNumber": 10
        }

        HttpInterface.httpRequest(url, pageInfo).then(response => {
            if (response.resultType === HttpResponseResultType.SUCCESS) {
                console.log(`${this.TAG} httpRequest 请求成功数据: ${JSON.stringify(response.data)}`)
                this.postResponseData = JSON.stringify(response.data)
            } else {
                console.log(`${this.TAG} httpRequest 请求失败数据: ${response.resultType} error:${JSON.stringify(response.data)}`)
            }
        }).catch(err => {
            console.info(`${this.TAG} httpRequest 请求失败 error:${JSON.stringify(err)}`)

        })
    }

3.4.后端http post接口

class PageInfo(BaseModel):
    pageIndex: int
    pageNumber: int


@router.post('/test')
async def home(info:PageInfo):

    xlogger.info(f"test pageIndex :{info.pageIndex},pageNumber {info.pageNumber}")

    return  {"code":200,'message': "hello fastapitest", "data": {"totolNum":1000,"pageNum":info.pageNumber, "pageIndex":info.pageIndex,"newsList":[{"title":"热门新闻", "subTitle":"北京新闻,新能源车","descption":"这是北京新闻"}]}}

4.效果

4.1.鸿蒙前端

控制台关于HttpInterface日志情况

05-27 14:28:24.667  17156-153    0FEFE/JsApp                    com.example.base_demo           I  HttpInterface http get request url  :http://10.0.2.2:8081/user/home, httpHeader:undefined
05-27 14:28:25.003  17156-153    0FEFE/JsApp                    com.example.base_demo           I  HttpInterface  httpStatus code :200, response httpheader:{"content-length":"79","content-type":"application/json","date":"Mon, 27 May 2024 06:28:25 GMT","server":"uvicorn"}
05-27 14:28:25.004  17156-153    0FEFE/JsApp                    com.example.base_demo           I  HttpInterface response finish httpResponseResult ---resultType: 1,data:{"code":200,"message":"hello fastapitest","data":{"name":"ksnowlv","age":"20"}} }
05-27 14:29:39.440  17156-153    0FEFE/JsApp                    com.example.base_demo           I  HttpInterface http post request url  :http://10.0.2.2:8081/user/test, httpHeader:undefined params:{"pageIndex":0,"pageNumber":10}
05-27 14:29:39.708  17156-153    0FEFE/JsApp                    com.example.base_demo           I  HttpInterface  httpStatus code :200, response httpheader:{"content-encoding":"gzip","content-length":"187","content-type":"application/json","date":"Mon, 27 May 2024 06:29:39 GMT","server":"uvicorn","vary":"Accept-Encoding"}
05-27 14:29:39.708  17156-153    0FEFE/JsApp                    com.example.base_demo           I  HttpInterface response finish httpResponseResult ---resultType: 1,data:{"code":200,"message":"hello fastapitest","data":{"totolNum":1000,"pageNum":10,"pageIndex":0,"newsList":[{"title":"热门新闻","subTitle":"北京新闻,新能源车","descption":"这是北京新闻"}]}} }

页面显示效果

4.2 后端控制台

2024-05-27 14:28:25.642 | INFO     | app.core.xlogger:dispatch:30 - Request: GET http://10.0.2.2:8081/user/home Headers({'host': '10.0.2.2:8081', 'user-agent': 'libcurl-agent/1.0', 'accept': '*/*', 'accept-encoding': 'gzip', 'content-type': 'application/json'})
2024-05-27 14:28:25.644 | DEBUG    | app.core.xlogger:dispatch:33 - Request query_params: {}
2024-05-27 14:28:25.645 | WARNING  | app.core.xlogger:dispatch:48 - total time cost: 0.003578662872314453
2024-05-27 14:28:25.645 | INFO     | app.core.xlogger:dispatch:50 - Response status code: 200 Response headers: MutableHeaders({'content-length': '79', 'content-type': 'application/json'})
2024-05-27 14:28:25.646 | INFO     | app.core.xlogger:dispatch:55 - Response Body: b'{"code":200,"message":"hello fastapitest","data":{"name":"ksnowlv","age":"20"}}'
2024-05-27 14:29:40.318 | INFO     | app.core.xlogger:dispatch:30 - Request: POST http://10.0.2.2:8081/user/test Headers({'host': '10.0.2.2:8081', 'user-agent': 'libcurl-agent/1.0', 'accept': '*/*', 'accept-encoding': 'gzip', 'content-type': 'application/json', 'content-length': '31'})
2024-05-27 14:29:40.319 | DEBUG    | app.core.xlogger:dispatch:33 - Request query_params: {}
2024-05-27 14:29:40.321 | INFO     | app.api.users.userrouter:home:37 - test pageIndex :0,pageNumber 10
2024-05-27 14:29:40.322 | WARNING  | app.core.xlogger:dispatch:48 - total time cost: 0.0038661956787109375
2024-05-27 14:29:40.322 | INFO     | app.core.xlogger:dispatch:50 - Response status code: 200 Response headers: MutableHeaders({'content-length': '206', 'content-type': 'application/json'})
2024-05-27 14:29:40.323 | INFO     | app.core.xlogger:dispatch:55 - Response Body: b'{"code":200,"message":"hello fastapitest","data":{"totolNum":1000,"pageNum":10,"pageIndex":0,"newsList":[{"title":"\xe7\x83\xad\xe9\x97\xa8\xe6\x96\xb0\xe9\x97\xbb","subTitle":"\xe5\x8c\x97\xe4\xba\xac\xe6\x96\xb0\xe9\x97\xbb\xef\xbc\x8c\xe6\x96\xb0\xe8\x83\xbd\xe6\xba\x90\xe8\xbd\xa6","descption":"\xe8\xbf\x99\xe6\x98\xaf\xe5\x8c\x97\xe4\xba\xac\xe6\x96\xb0\xe9\x97\xbb"}]}}'

5.其它

5.1.为什么json不直接做解析?

http重点是通信,不包含数据适配层,json不直接做解析可由数据适配层负责处理;如果是其它格式的数据,也是数据适配层处理。

5.2. HTTP请求任务

HTTP请求任务,因不可复用,所以,没有做任务池复用及调度。可以自己做个任务池不复用,控制请求任务的调度;如果是等待中的重复任务,可以做些优化策略。

5.3.网络访问权限

项目中需要配置ohos.permission.INTERNET权限。

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术?不知道需要重点掌握哪些鸿蒙应用开发知识点?但是又不知道从哪里下手,而且学习时频繁踩坑,最终浪费大量时间。所以本人整理了一些比较合适的鸿蒙(HarmonyOS NEXT)学习路径和一些资料的整理供小伙伴学习

点击领取→纯血鸿蒙Next全套最新学习资料希望这一份鸿蒙学习资料能够给大家带来帮助,有需要的小伙伴自行领取~~

一、鸿蒙(HarmonyOS NEXT)最新学习路线

有了路线图,怎么能没有学习资料呢,小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙(OpenHarmony )学习手册(共计1236页)与鸿蒙(OpenHarmony )开发入门教学视频,内容包含:(ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等)鸿蒙(HarmonyOS NEXT)…等技术知识点。

获取以上完整版高清学习路线,请点击→纯血版全套鸿蒙HarmonyOS学习资料

二、HarmonyOS Next 最新全套视频教程

三、《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

四、大厂面试必问面试题

五、鸿蒙南向开发技术

六、鸿蒙APP开发必备


完整鸿蒙HarmonyOS学习资料,请点击→纯血版全套鸿蒙HarmonyOS学习资料

总结
总的来说,华为鸿蒙不再兼容安卓,对中年程序员来说是一个挑战,也是一个机会。只有积极应对变化,不断学习和提升自己,他们才能在这个变革的时代中立于不败之地。 

                        

  • 10
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值