鸿蒙学习笔记（5）-HTTP请求数据_鸿蒙artks与硬件联动

一、Http请求数据

http模块是鸿蒙内置的一个模块，提供了网络请求的能力。不需要再写比较原始的AJAS代码。

ps:在项目中如果要访问网络资源，不管是图片文件还是网络请求，必须给项目开放权限。

（1）网络连接方式

HTTP数据请求连接：通过HTTP发起的一个单向数据请求。

WebSocket连接：使用WebSocket建立服务器与客户端的双向连接。

Socket连接：通过Socket进行数据传输，更加底层。

（2）涉及接口文档

类型 说明

http.createHttp()

创建一个HTTP请求，里面包括发起请求、中断请求、订阅/取消订阅HTTP Response Header事件。

HttpRequest()

根据URL地址，发起HTTP网络请求。

requestInStream()

根据URL地址，发起HTTP网络请求并返回流式响应，得到二进制数据，应用到文件下载，从后端拿到的不再是JSON和字符串，而是二进制数据。 destroy() 中断请求任务。

（3）request接口开发步骤 

1、步骤概述

1、从@kit.NetworkKit中导入http命名空间。Kit是我们项目需要用到的各种服务，如网络服务，分布式管理服务，蓝牙通信等。

2、调用creatHttp()方法，创建一个HttpRequest对象。

3、调用该对象的request（）方法，订阅http响应头事件，此接口会比request请求先返回。可以根据业务需要订阅此消息。（此步骤不是必须，是用来监控响应头信息，如果你想发请求给后端，想要先知道后端返回的数据是JSON还是文件之类的，可以用此监控，他会比内容先返回客户端。）

4、调用该对象的equest（）方法，传入http请求的url地址和可选参数，发起网络请求。

5、得到结果过后，按照实际业务需要，解析返回结果，筛选或者进行数据转化。

6、调用该对象的off()方法，取消订阅http响应头事件。

7、当请求使用完毕时，调用destroy()方法主动销毁。

2、封装代码：

//在common模块中封装一个基础的请求工具import { http } from \"@kit.NetworkKit\";//封装请求代码，考虑到以后每个模块都要发送请求，默认放在common模块中。//1、导入export function MyRequest( url:string, method:http.RequestMethod, requestData:string){ //2、创建http请求 const httpRequest = http.createHttp() //3、可以用httprequest监听响应头（不是必须） httpRequest.on(\'headersReceive\', (header: Object) => { console.info(\'header: \' + JSON.stringify(header)); }); httpRequest.request(url, { method:method,//请求方式 header:{//设置请求头 //前端浏览器告诉后端，前端传递的数据格式 \'Content-Type\': \'application/json\' }, extraData:requestData, //设置请求要传给后端的数据 connectTimeout:9000, //前端发送数据给后端如果9秒没有结果，前端主动终止行为 readTimeout:9000, //读取数据超过9秒，告诉前端请求失败 },(error:Error,data:http.HttpResponse)=>{ //error没有内容代表成功 if (!error) { console.log(`请求成功，返回数据：${JSON.stringify(data)}`) // 取消订阅HTTP响应头事件。 httpRequest.off(\'headersReceive\'); // 当该请求使用完毕时，开发者务必调用destroy方法主动销毁该JavaScript Object。 httpRequest.destroy(); }else { console.log(`请求失败，具体原因：${JSON.stringify(error)}`) // 取消订阅HTTP响应头事件。 httpRequest.off(\'headersReceive\'); // 当该请求使用完毕时，开发者务必调用destroy方法主动销毁该JavaScript Object。 httpRequest.destroy(); } })}

 3、使用说明：

在页面中要使用这个工具来测试请求是否成功，在common/index.ets文件中先暴露。

export {MyRequest} from \'./src/main/ets/utils/HttpUtils\'

在home页面或者组件中，引入对应的函数

import {MyRequest} from \'@ohos/common\'///比如跟事件绑定，测试数据是否能收到.onClick((event:ClickEvent) => { MyRequest( \'http://47.98.128.191:4001/home/swiperdate\', http.RequestMethod.GET, \'\' ) })

此时可以看到日志可以收到：

 此时请求发送完毕能够得到后端数据，但请求不是直接在页面或者组件中编写的代码，而是提取到了common模块中，如何拿到服务端的数据并显示到页面上，这才是需要解决的问题。

4、泛型编程

typescript中非常重要的一个概念：泛型编程。

利用一个简单的案例：

function computed(params1:number,params2:number):number{ return params1 +params2}computed(1,3)//编译通过computed(\'xiao\',\'ming\')//编译失败，因为只接受number类型

为了简化上面的代码，使代码更加灵活，尤其是在数据约束上，既要增加约束，又要让参数支持更多类型，或者更加灵活，设计方式便是采用泛型的方式来设计参数类型 。

function computed(params1:T,params2:T):T{ return params1 +params2}computed(1,3) //编译通过computed(\'xiao\',\'ming\') //编译通过computed(true,false) //编译通过

同一个函数因为有了泛型，可以多次使用 ，这里我们以上面出现的问题：如何拿到服务端的数据并显示到页面上，利用promise来解决。通过promise对象将异步的请求代码封装到容器中获取到结果。

import { http } from \"@kit.NetworkKit\";//BasicConstants下暴露基础URL地址，和传入的资源路径拼接import { BasicConstants} from \'../../constants/BasicConstants\'//封装请求代码，考虑到以后每个模块都要发送请求，默认放在common模块中。//1、导入export function MyRequest( url:string, method:http.RequestMethod, requestData:string){ //2、创建http请求 const httpRequest = http.createHttp() return new Promise((reslove:(value:string)=>void,reject:(value?:string)=>void)=>{ //request发送请求就是异步代码 httpRequest.request( //不再简单是url,而是做一下拼接基础地址 BasicConstants.BASE_URL+url, { method:method,//请求方式 header:{//设置请求头 //前端浏览器告诉后端，前端传递的数据格式 \'Content-Type\': \'application/json\' }, extraData:requestData, //设置请求要传给后端的数据 connectTimeout:9000, //前端发送数据给后端如果9秒没有结果，前端主动终止行为 readTimeout:9000, //读取数据超过9秒，告诉前端请求失败 },(error:Error,data:http.HttpResponse)=>{ //error没有内容代表成功 if (!error) { console.log(`请求成功，返回数据：${JSON.stringify(data,null,2)}`) reslove(JSON.stringify(data)) // 取消订阅HTTP响应头事件。 httpRequest.off(\'headersReceive\'); // 当该请求使用完毕时，开发者务必调用destroy方法主动销毁该JavaScript Object。 httpRequest.destroy(); }else { console.log(`请求失败，具体原因：${JSON.stringify(error)}`) reject(JSON.stringify(error)) // 取消订阅HTTP响应头事件。 httpRequest.off(\'headersReceive\'); // 当该请求使用完毕时，开发者务必调用destroy方法主动销毁该JavaScript Object。 httpRequest.destroy(); } }) })}

页面中获取请求返回的数据： 

 但此时传入参数是固定必须是string类型，不够灵活，接下来进一步封装，利用泛型编程做进一步优化使得代码实现复用。K代表请求的数据类型，T代表返回的数据类型

import { http } from \"@kit.NetworkKit\";import { BasicConstants} from \'../../constants/BasicConstants\'//封装请求代码，考虑到以后每个模块都要发送请求，默认放在common模块中。//1、导入//K代表请求的数据类型，T代表返回的数据类型export function MyRequest( url:string, method:http.RequestMethod, requestData?:K){ //2、创建http请求 const httpRequest = http.createHttp() return new Promise((reslove:(value:T)=>void,reject:(value?:string)=>void)=>{ //request发送请求就是异步代码 httpRequest.request( //不再简单是url,而是做一下拼接基础地址 BasicConstants.BASE_URL+url, { method:method,//请求方式 header:{//设置请求头 //前端浏览器告诉后端，前端传递的数据格式 \'Content-Type\': \'application/json\' }, extraData:JSON.stringify(requestData)||\'\', //设置请求要传给后端的数据 connectTimeout:9000, //前端发送数据给后端如果9秒没有结果，前端主动终止行为 readTimeout:9000, //读取数据超过9秒，告诉前端请求失败 },(error:Error,data:http.HttpResponse)=>{ //error没有内容代表成功 if (!error) { console.log(`请求成功，返回数据：${JSON.stringify(data,null,2)}`) //这里如何 reslove(JSON.parse(data.result as string)) // 取消订阅HTTP响应头事件。 httpRequest.off(\'headersReceive\'); // 当该请求使用完毕时，开发者务必调用destroy方法主动销毁该JavaScript Object。 httpRequest.destroy(); }else { console.log(`请求失败，具体原因：${JSON.stringify(error)}`) reject(JSON.stringify(error)) // 取消订阅HTTP响应头事件。 httpRequest.off(\'headersReceive\'); // 当该请求使用完毕时，开发者务必调用destroy方法主动销毁该JavaScript Object。 httpRequest.destroy(); } }) })}

 页面中获取请求返回的数据： 

完整工具封装见资源文件。

（4）HTTP数据请求

4.1 导入HTTP模块

import http from \'@ohos.net.http\';

4.2 使用HTTP模块发送请求，处理响应.

4.2.1 创建一个http的请求对象，不可复用。

const httpRequest = http.createHttp()

4.2.2 调用一个request方法，发起网络请求。

ps:像这种可能存在数据请求发送完但数据还没收到，因此此处方法执行完会存放一个未来会完成的结果Promise。

req.request(\'http://localhost:3000/users\',//请求URL地址{ //请求选项HttpRequestOptions metnod:http.RequestMethod.GET, extraData:{\'param1\':\'value1\'} //k1=v1&k1=v2})  

HttpRequestOptions 说明：

名称 类型 描述 method RequestMethod 请求方式，GET（查询）、POST（表单提交，新增）、PUT（修改）、DELETE（删除）等 extraData string|Object 请求参数 header Object 请求头字段 connectTimeout number 请求超时时间，单位毫秒，默认60000ms readTimeout number 读取超时间，同上

4.2.3 获取服务器响应的内容，Promise提供两种方法分别是then成功回调和catch失败回调。

.then((resp:http.HttpResponse)=>{ if(resp.responseCode === 200){ //请求成功 } }).catch((err:Error)=>{ //请求失败});

HttpResponse 说明： 

名称 类型 描述 responseCode responseCode 响应状态码 header Object 响应头 cookies string 响应返回的cookies result string|Object 响应体，默认是JSON字符串 resultType HttpDataType 返回值类型

二、Promise

Promise是es6提出的一个概念，主要用来解决异步回调的问题。Promise是一个数据容器，保存了未来的一个结果，Promise本身是可以用来存放同步代码和异步代码，平时经常用来解决存放异步代码。以下是网络请求的一个发展历程：

发送网络请求，获取结果

1.1 发送网络请求

//\"AJAX\"（Asynchronous JavaScript and XML，异步 JavaScript 和 XML）//浏览器默认提供的对象，获取结果const xmlhttp = new XMLhttpRequest()//连接服务器xmlhttp.open(\'GET\',\'http://+地址\',true)xmlhttp.send(\'id=1\')//监听状态码，当状态码是200时xmlhttp.onreadystatechange = function(){ //首先状态码必须是200，readyState代表xmlhttp加载过程 if(xmlhttp.status == 200 && xmlhttp.readyState == 4){ const result = xmlhttp.responseText //拿到数据后转化 const obj = JSON.parse(result) }}

1.2 将其封装工具

function ajas( {method=\'GET\',url,data=\'\',async=true} ){ //\"AJAX\"（Asynchronous JavaScript and XML，异步 JavaScript 和 XML） //浏览器默认提供的对象，获取结果 const xmlhttp = new XMLhttpRequest() //连接服务器 xmlhttp.open(method,url,async) xmlhttp.send(data) //监听状态码，当状态码是200时 xmlhttp.onreadystatechange = function(){ //首先状态码必须是200，readyState代表xmlhttp加载过程 if(xmlhttp.status == 200 && xmlhttp.readyState == 4){ const result = xmlhttp.responseText //拿到数据后转化 const obj = JSON.parse(result) //这里return obj没有意义，这里是个事件，时间返回的函数外面是接收不到的 } }//如果在fuction函数这里return obj也是不可以的，局部的变量无法在外部用}//使用封装工具ajax（{ method:\'GET\', url:\'http://+地址\', data:\'id = 1\' async:true})

此时的obj还不能调出来使用，这时解决方法：在函数中在传入一个函数 success,如果函数能进入if中实现结果的取用，将在函数中调用。

function ajas( {method=\'GET\',url,data=\'\',async=true，success} ){ //\"AJAX\"（Asynchronous JavaScript and XML，异步 JavaScript 和 XML） //浏览器默认提供的对象，获取结果 const xmlhttp = new XMLhttpRequest() //连接服务器 xmlhttp.open(method,url,async) xmlhttp.send(data) //监听状态码，当状态码是200时 xmlhttp.onreadystatechange = function(){ //首先状态码必须是200，readyState代表xmlhttp加载过程 if(xmlhttp.status == 200 && xmlhttp.readyState == 4){ const result = xmlhttp.responseText //拿到数据后转化 const obj = JSON.parse(result) success(Obj) }else if(404 500){ error(\'失败\') } }}//使用封装工具ajax（{ method:\'GET\', url:\'http://+地址\', data:\'id = 1\' async:true, success:function(msg){ console.log(msg) } //是否请求成功 error:function(error){ } })

 这样做有缺陷：回调地狱，无限制的在回调函数中执行任务，得到回调结果，层层嵌套，开发中要避免，不存在可读性。

//使用封装工具ajax（{ method:\'GET\', url:\'http://+地址\', data:\'id = 1\' async:true, success:function(msg){ console.log(msg) ajax({ url:\'http://+地址\', data:msg.id, success(msg2){  ajax({  url:\'\',  data:msg.classesId } //是否请求成功 error:function(error){ } })

Promise

由上述Promise来解决异步编程的问题。 

//按照1234执行顺序来执行，因为promise本身是同步的，如果在promise中放入一个异步的代码，异步代码是需要花时间，异步代码不论花费多长时间，等到代码运行结束，成功或者失败都会存放在resolve,reject中。console.log(1)//resolve,reject 这两个参数是函数const promise = new Promise((resolve,reject)=>{console.log(2) //存放同步代码或者异步代码，这里主要存放异步代码 ajas({ url:\'http://xxx\', method:\'POST\', data:{id:1}, success:(msg)=>{ resolve（msg） }, error:(error)=>{ reject(error) } }) })//then这个函数是异步的，只有resolve执行完毕，then才会执行promise.then((result)=>{ console.log(4)}).catch(error=>{})console.log(3)

 await和async

es7提出的一个新方案，可以等待promise的结果。

//resolve,reject 这两个参数是函数const promise2 = new Promise((resolve,reject)=>{ //存放同步代码或者异步代码，这里主要存放异步代码 ajas({ url:\'http://xxx\', method:\'POST\', data:{id:1}, success:(msg)=>{ resolve（msg） }, error:(error)=>{ reject(error) } }) }) async function show(){ const res1 = await promise1 const res2 = await promise2}

 axios工具

在前面代码的基础上，第三方工具axios做了一件事情，将axios代码和promise代码进行了封装，形成了一个完整的请求工具。

//封装格式class Axios{ baseURL =\'\' get(){ return new Promise (()=>{ resolve(xxx) reject(xxx) }) } post(){ } creat(){ }}export const axios = new Axios()//代码中如何使用import axios from \'axios\'//方法1：通过then拿到服务器响应回来的结果axios.get(\'http://xxx\').then(res=>{{)//方法2：通过await和async配合拿到服务器响应回来的结果result = await axios.post(\'http://xxx\')

作为一个第三方库，使用的时候需要先完成下包的操作，打开终端执行命令，ohpm 是一个包管理工具，用来管理鸿蒙提供的第三方模块。