一、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<T>(params1:T,params2:T):T{return params1 +params2
}computed<number>(1,3) //编译通过
computed<string>('xiao','ming') //编译通过
computed<bollean>(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<T,K>(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地址
{ //请求选项HttpRequestOptionsmetnod: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 promise1const 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 是一个包管理工具，用来管理鸿蒙提供的第三方模块。
