HarmonyOS中的http请求及其封装（附案例）

概述

HarmonyOS提供了@ohos.net.http模块，它提供了Http数据请求能力。当在应用开辟中必要使用http获取服务端数据时可以导入该模块实现http请求的发送。
@ohos.net.http模块提供http数据请求能力。应用可以通过http发起一个数据请求，支持常见的GET、POST、OPTIONS、HEAD、PUT、DELETE、TRACE、CONNECT方法。
怎样使用？

要想使用http请求，体系必须要具备ohos.permission.INTERNET权限，在model.json5文件中的module模块下添加如下请求权限：

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

复制代码

完整示例

该例引用自鸿蒙开辟文档@ohos.net.http (数据请求)

1. // 引入包名
2. import http from '@ohos.net.http';
4. // 每一个httpRequest对应一个HTTP请求任务，不可复用
5. let httpRequest = http.createHttp();
6. // 用于订阅HTTP响应头，此接口会比request请求先返回。可以根据业务需要订阅此消息
7. // 从API 8开始，使用on('headersReceive', Callback)替代on('headerReceive', AsyncCallback)。 8+
8. httpRequest.on('headersReceive', (header) => {
9.     console.info('header: ' + JSON.stringify(header));
10. });
11. httpRequest.request(
12.     // 填写HTTP请求的URL地址，可以带参数也可以不带参数。URL地址需要开发者自定义。请求的参数可以在extraData中指定
13.     "EXAMPLE_URL",
14.     {
15.         method: http.RequestMethod.POST, // 可选，默认为http.RequestMethod.GET
16.         // 开发者根据自身业务需要添加header字段
17.         header: {
18.             'Content-Type': 'application/json'
19.         },
20.         // 当使用POST请求时此字段用于传递内容
21.         extraData: {
22.             "data": "data to send",
23.         },
24.         expectDataType: http.HttpDataType.STRING, // 可选，指定返回数据的类型
25.         usingCache: true, // 可选，默认为true
26.         priority: 1, // 可选，默认为1
27.         connectTimeout: 60000, // 可选，默认为60000ms
28.         readTimeout: 60000, // 可选，默认为60000ms
29.         usingProtocol: http.HttpProtocol.HTTP1_1, // 可选，协议类型默认值由系统自动指定
30.     }, (err, data) => {
31.         if (!err) {
32.             // data.result为HTTP响应内容，可根据业务需要进行解析
33.             console.info('Result:' + JSON.stringify(data.result));
34.             console.info('code:' + JSON.stringify(data.responseCode));
35.             // data.header为HTTP响应头，可根据业务需要进行解析
36.             console.info('header:' + JSON.stringify(data.header));
37.             console.info('cookies:' + JSON.stringify(data.cookies)); // 8+
38.             // 取消订阅HTTP响应头事件
39.             httpRequest.off('headersReceive');
40.             // 当该请求使用完毕时，调用destroy方法主动销毁
41.             httpRequest.destroy();
42.         } else {
43.             console.info('error:' + JSON.stringify(err));
44.             // 取消订阅HTTP响应头事件
45.             httpRequest.off('headersReceive');
46.             // 当该请求使用完毕时，调用destroy方法主动销毁。
47.             httpRequest.destroy();
48.         }
49.     }
50. );

复制代码

http.createHttp

这是源码中对createHttp的方法的封装，它的返回值是一个HttpRequest对象。
  

1. /**
2. * Creates an HTTP request task.
3.  * 创建一个HTTP请求任务，返回值为HttpRequest对象
4. */
5. function createHttp(): HttpRequest;

复制代码

HttpRequest接口文件中封装了request、destory、on、off、once方法，见以下源码注释：
详细解析参考HarmonyOS开辟文档
  

1. export interface HttpRequest {
2.     /**
3.      * Initiates an HTTP request to a given URL.
4.      * 向给定的URL地址发送一个HTTP请求
5.      */
6.     request(url: string, callback: AsyncCallback<HttpResponse>): void;
7.     request(url: string, options: HttpRequestOptions, callback: AsyncCallback<HttpResponse>): void;
8.     request(url: string, options?: HttpRequestOptions): Promise<HttpResponse>;
9.     /**
10.      * Destroys an HTTP request.
11.      * 销毁一个HTTP请求
12.      */
13.     destroy(): void;
14.     /**
15.      * Registers an observer for HTTP Response Header events.
16.      * 订阅HTTP响应头事件
17.      * @deprecated since 8
18.      * @useinstead on_headersReceive
19.      */
20.     on(type: "headerReceive", callback: AsyncCallback<Object>): void;
21.     /**
22.      * Unregisters the observer for HTTP Response Header events.
23.      * 取消订阅HTTP响应头事件
24.      * @deprecated since 8
25.      * @useinstead off_headersReceive
26.      */
27.     off(type: "headerReceive", callback?: AsyncCallback<Object>): void;
28.     /**
29.      * Registers an observer for HTTP Response Header events.
30.      * 订阅HTTP响应头事件
31.      * @since 8
32.      */
33.     on(type: "headersReceive", callback: Callback<Object>): void;
34.     /**
35.      * Unregisters the observer for HTTP Response Header events.
36.      * 取消订阅HTTP响应头事件
37.      * @since 8
38.      */
39.     off(type: "headersReceive", callback?: Callback<Object>): void;
40.     /**
41.      * Registers a one-time observer for HTTP Response Header events.
42.      * 订阅一次HTTP响应头事件
43.      * @since 8
44.      */
45.     once(type: "headersReceive", callback: Callback<Object>): void;
46. }

复制代码

 HttpRequestOptions

发送http请求携带的参数。
参数详情及取值范围

名称	类型	必选项	阐明
method	RequestMethod（罗列）	否	请求方式
extraData	string | Object | ArrayBuffer（API8以后）	否	发送请求的额外数据，用于http请求的POST、PUT方法
expectDataType	HttpDataType（罗列）	否	指定返回数据的类型，假如指定了，将优先返回指定的类型
useingCache（API9之后）	boolean	否	是否使用缓存，默认为true
priority（API9后）	number	否	优先级，取值为[1,1000]，默认为1
header	Object	否	http请求头字段，默认为{‘Content-Type’:'application/json'}
redTimeout	number	否	读取超时时间，单位ms，设置为0时表示不会出现超时情况
connectTimeout	number	否	连接超时时间，单位ms
usingProtocol（API9之后）	HttpProtocol（罗列）	否	使用的http协议，默认值由体系指定

RequestMethod

  

1. export enum RequestMethod {
2.     OPTIONS = "OPTIONS",
3.     GET = "GET",
4.     HEAD = "HEAD",
5.     POST = "POST",
6.     PUT = "PUT",
7.     DELETE = "DELETE",
8.     TRACE = "TRACE",
9.     CONNECT = "CONNECT"
10. }

复制代码

 HttpDataType

  

1. /**
2. * Indicates the type of the returned data.
3. * 指定返回数据的类型
4. * @since 9
5. */
6. export enum HttpDataType {
7.     STRING,
8.     OBJECT = 1,
9.     ARRAY_BUFFER = 2
10. }

复制代码

HttpProtocol

  

1. /**
2. * Supported protocols.
3. * 支持的协议
4. * @since 9
5. */
6. export enum HttpProtocol {
7.     HTTP1_1,
8.     HTTP2
9. }

复制代码

HttpResponse 

request方法回调函数的返回值类型。

名称	类型	阐明
result	string | Object | ArrayBuffer（API6之后）	HTTP请求根据响应头中Content-type类型返回对应的响应格式内容
resultType（API 9之后）	HttpDataType（罗列）	返回值类型
responseCode	ResponseCode | number	回调函数执行乐成时，此字段为ResponseCode。若执行失败，错误码会从AsyncCallback中的err字段返回
header	Object	http请求返回的响应头

 封装http请求及案例

封装Response

按照后端返回的数据格式封装Response

1. export default class Response{
2.   /**
3.    * 响应码
4.    */
5.   code: number
6.   /**
7.    * 相应消息
8.    */
9.   msg: string
10.   /**
11.    * 相应数据
12.    */
13.   data: any
14. }

复制代码

封装http请求

封装http请求方法，并且处理返回值。将http请求函数作为可导出模块，之后在其他模块中引用即可使用http请求，同Axios。
注意：假如使用当地模拟器，使用"http://locaohost:端标语"不能完成请求，必要将localhost更换为本机的ip地址
http请求封装引自鸿蒙 HarmonyOS4.0 Http数据请求封装详解-CSDN博客

https://blog.csdn.net/qq_68512683/article/details/134724984

1. import http from '@ohos.net.http';
2. import Response from './Response';
4. //导出httpRequest请求函数
5. export function request(url: string, method: http.RequestMethod, requestData?: any): Promise<Response>{
6.   //如果使用本地模拟器，则ip为本机的IP地址
7.   const BASE_URL: string = "http://ip:服务端端口号"
8.   let httpRequest = http.createHttp()
9.   let responseResult = httpRequest.request(
10.     BASE_URL + url,
11.     {
12.       method: method,
13.       header: {
14.         'Content-Type': 'application/json'
15.       },
16.       //携带额外参数
17.       extraData: JSON.stringify(requestData),
18.       //可选，默认为60000ms
19.       connectTimeout: 60000,
20.       readTimeout: 60000,
21.     }
22.   )
23.   let response = new Response();
24.   //处理数据，并返回
25.   return responseResult.then((value: http.HttpResponse) => {
26.     if (value.responseCode === 200) {
27.       //获取返回数据,将返回的json数据解析成事先预定好的响应格式
28.       //这里建议和后端的保持一致
29.       let res: Response = JSON.parse(`${value.result}`);
30.       response.data = res.data;
31.       response.code = res.code;
32.       response.msg = res.msg;
33.      }else {
34.        response.msg = '请求错误';
35.        response.code = 400;
36.      }
37.      return response;
38.   }).catch(() => {
39.     response.msg = '请求错误';
40.     response.code = 400;
41.     return response;
42.   });
43. }

复制代码

案例

后端接口请自行设计。
登录页面

1. import router from '@ohos.router'
2. import { User } from '../entity/User'
3. import { login } from './httpRequest/UserRelated'
4. /**
5. * 登录页面
6. */
7. @Entry
8. @Component
9. struct Login{
11.   @State user: User = new User('','')
13.   build(){
14.     Column({space: 10}){
15.       Row(){
16.         Text('+86')
17.         TextInput({placeholder: '请输入手机号'})
18.           .type(InputType.PhoneNumber)
19.           .height(45)
20.           .backgroundColor('#ffffff')
21.           .padding(10)
22.           .layoutWeight(1)
23.           .onChange(value =>{
24.             this.user.phone = value
25.           })
26.       }.padding({left: 20, right: 20})
27.       Row(){
28.         TextInput({placeholder: '请输入密码'})
29.           .type(InputType.Number)
30.           .height(45)
31.           .backgroundColor('#ffffff')
32.           .padding({left: 0, right: 0})
33.           .layoutWeight(1)
34.           .onChange(value =>{
35.             this.user.password = value
36.           })
37.       }.padding({left: 20, right: 20})
38.       Row(){
39.         Button('登 录')
40.           .type(ButtonType.Normal)
41.           .fontSize(20)
42.           .width('100%')
43.           .borderRadius(20)
44.           .backgroundColor('#2f90b9')
45.           .fontColor('#ffffff')
46.           .onClick(() => {
47.             login(this.user).then(res =>{
48.               if (res.code === 1) {
49.                 router.pushUrl({
50.                   url: 'pages/Index'
51.                 })
52.               } else {
53.                 AlertDialog.show({
54.                   title: '警告',
55.                   message: res.msg
56.                 })
57.               }
58.             })
59.           })
60.       }.padding({left: 20, right: 20})
62.     }
63.     .width('100%')
64.     .height('100%')
65.     .justifyContent(FlexAlign.Center)
66.   }
67. }

复制代码

用户相干http请求
将http请求从页面中抽离出来封装在一个ets文件中，在页面中直接引用方法即可。不混杂在页面代码中，加强代码可读性。

1. import http from '@ohos.net.http'
2. import { User } from '../../entity/User'
3. import { request } from '../../utils/httpUtils/Request'
4. /**
5. * 用户相关数据请求
6. * @returns
7. */
8. export function login(user: User){
9.   return request('/user/user/login', http.RequestMethod.POST, user)
10. }

复制代码

用户对象
不在页面中定义，页面只进行数据项的定义和数据渲染即可，加强代码可读性。

1. export class User{
2.   phone: String
3.   password: String
5.   constructor(phone: String, password: String) {
6.     this.phone = phone
7.     this.password = password
8.   }
9. }

复制代码

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