封装网络请求 鸿蒙APP HarmonyOS ArkTS

一、结果展示

   通过在页面直接调用 userLogin(params) 方法，获取登录令牌
  

二、申请网络权限

   访问网络时候首先需要申请网络权限，需要修改 src/main 目次下的 module.json5 文件，加入 requestPermissions 属性，详见官方文档
【声明权限】https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/declare-permissions-V5

1. {
2.   "module": {
3.     // ...
4.     "requestPermissions":[
5.       {
6.         "name" : "ohos.permission.INTERNET",
7.         "usedScene": {
8.           "abilities": [
9.             "FormAbility"
10.           ],
11.           "when":"inuse"
12.         }
13.       },
14.       {
15.         "name" : "ohos.permission.GET_NETWORK_INFO",
16.         "usedScene": {
17.           "abilities": [
18.             "FormAbility"
19.           ],
20.           "when":"inuse"
21.         }
22.       }
23.     ]
24.   }
25. }

复制代码

三、实现代码

   共分为 7 个步骤，其中第 1、2、3、5 步都是创建底子实体，第 4 步为请求工具封装、第 6 步为API封装、第 7 步为页面调用测试，我会在末了贴上文件目次布局
  1、创建常量类 CommonConstant.ets

   在这个常量类中主要定义后端服务IP端口，以及一些需要使用的状态码信息

1. /**
2. * HTTP API
3. */
4. export class Domain {
6.   // 后端服务IP
7.   static readonly SERVER: string = 'http://localhost:8999'
9. }
11. /**
12. * HTTP状态类
13. */
14. export class HttpStatus {
16.   // 成功
17.   static readonly SUCCESS: number = 200
19.   // 失败
20.   static readonly ERROR: number = 500
22. }
24. export const enum ContentType {
26.   // 响应体类型
27.   JSON = 'application/json'
28.   
29. }

复制代码

2、创建请求实体类 RequestBody.ets

   这个请求实体类主要可以实现简朴的传输【请求地址、请求方式、请求参数】这三个参数，再经过封装的工具去发送网络请求

1. export class RequestBody {
3.   url: string;
5.   method: string;
7.   data: Object;
9.   constructor() {
10.     this.url = ''
11.     this.method = 'GET'
12.     this.data = new Object
13.   }
14. }

复制代码

3、创建响应实体类 ResponseResult.ets

   这个响应实体主要对应后台的返回参数，比如我这里定义的后台响应码为【code】，信息为【msg】，响应数据为【data】，这个可以自行修改

1. export class ResponseResult {
3.   code: number;
5.   msg: string | Resource;
7.   data: ArrayBuffer | Object | string
9.   constructor() {
10.     this.code = 0;
11.     this.msg = '';
12.     this.data = '';
13.   }
14. }

复制代码

4、创建请求工具类 HttpRequest.ets

   详见官方文档
【HTTP数据请求】https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/http-> request-V5
【异步并发概述 (Promise和async/await)】https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/async-concurrency-overview-V5#promise

1. // 这里需要引入第 2 步和第 3 步创建的请求和响应实体
2. import { ResponseResult } from '../response/ResponseResult'
3. import { RequestBody } from '../response/RequestBody'
5. // 这里需要引入第 1 步公共常量类
6. import { Domain, HttpStatus, ContentType } from '../constant/CommonConstant'
8. // 这里引用 HTTP 库
9. import http from '@ohos.net.http'
11. // HTTP响应处理时候需要的库
12. import { BusinessError } from '@kit.BasicServicesKit';
14. class HttpRequest {
15.   request(requestBody: RequestBody) {
16.     const promise: Promise<ResponseResult> = new Promise((resolve: Function, reject: Function) => {
18.       console.log('创建HTTP请求，请求地址：' + Domain.SERVER + requestBody.url + '，请求方式：' + requestBody.method + '，请求体：' + JSON.stringify(requestBody.data))
20.       // 创建HTTP请求
21.       const httpRequest = http.createHttp()
23.           // 在这里发送 HTTP 请求，并且需要设置Url、Header、Body等信息
24.       httpRequest.request(
25.         Domain.SERVER + requestBody.url,
26.         {
27.           method: isPost(requestBody.method) ? http.RequestMethod.POST : http.RequestMethod.GET,
28.           readTimeout: 10000,
29.           header: {
30.             'Content-Type': ContentType.JSON
31.           },
32.           connectTimeout: 10000,
33.           extraData: requestBody.data
34.         },
35.         (err: BusinessError, data: http.HttpResponse) => {
36.           // 回调之后判断是否提示 Error
37.           if (!err) {
39.             let result = `${data.result}`
40.             let resultJSON: ResponseResult = JSON.parse(result)
42.                 // 判断响应码是否成功
43.             if (data.responseCode === HttpStatus.SUCCESS) {
45.               if (resultJSON.code === 0) {
46.                 console.info('请求成功：' + resultJSON.data)
48.                 resolve(resultJSON)
49.               } else {
50.                 reject(new Error('' + resultJSON.msg))
51.                 errorDialog('' + resultJSON.msg)
52.               }
53.             } else {
54.               reject(new Error('' + resultJSON.msg))
55.               errorDialog('' + resultJSON.msg)
56.             }
58.             // 当该请求使用完毕时，调用destroy方法主动销毁
59.             httpRequest.destroy();
60.           } else {
61.             console.error('ERROR:' + JSON.stringify(err));
63.             if (err.code === 2300007) {
64.               errorDialog('无法连接至服务器，请稍后重试')
65.             }
67.             if (err.code === 2300028) {
68.               errorDialog('当前网络环境不稳定，请稍后重试')
69.             }
71.             // 当该请求使用完毕时，调用destroy方法主动销毁
72.             httpRequest.destroy();
74.             reject(new Error('当前网络环境不稳定，请稍后重试'))
75.           }
76.         }
77.       )
78.     })
80.     return promise;
81.   }
82. }
84. const httpRequest = new HttpRequest();
85. export default httpRequest as HttpRequest;
87. // 判断是否是GET方法
88. function isGet(method: string): boolean | undefined {
90.   if (method === http.RequestMethod.GET) {
91.     return true;
92.   }
94.   return false;
95. }
97. // 判断是否是POST方法
98. function isPost(method: string): boolean | undefined {
100.   if (method === http.RequestMethod.POST) {
101.     return true;
102.   }
104.   return false;
105. }
107. // 提示错误
108. function errorDialog(msg: string) {
109.   console.error(msg)
110. }

复制代码

5、创建一个用户登录实体 userInfo.ets

   这个用户实体类包含用户的账号和密码信息，是登录所需

1. export class UserInfo {
3.   account: string;
5.   password: string;
7.   constructor() {
8.     this.account = ''
9.     this.password = ''
10.   }
11. }

复制代码

6、创建一个用户API user.ets

   这个API的作用就是统一格式，统一使用【url】、【data】、【method】这三个进行网络请求，也是在请求工具类 HttpRequest.ets 底子上的二次封装

1. // 这里引入第 4 步创建的请求工具类
2. import HttpRequest from '../request/HttpRequest'
4. // 这里引入第 3 步创建的响应体
5. import { ResponseResult } from '../response/ResponseResult'
7. // 这里引入第 5 步创建的自定义用户对象，主要用于定义各参数的类型
8. import { UserInfo } from '../../entity/userInfo'
10. // 用户登录 API
11. export function userLogin(params: UserInfo): Promise<ResponseResult> {
12.   return HttpRequest.request({
13.     url: '/auth/login',
14.     data: params,
15.     method:'POST'
16.   })
17. }

复制代码

7、在页面尝试调用 index.ets

   末了在我们的页面启动时直接调用 user.ets 中的 userLogin 方法进行登录测试

1. // 这里需要引入第 6 步创建的用户API
2. import { userLogin } from '../common/api/user';
4. @Entry
5. @Component
6. struct Index {
8.   // 在进入页面时调用 userLogin 接口进行测试
9.   aboutToAppear(): void {
10.     userLogin({account: 'admin', password: 'Admin@2024'}).then(res => {
11.       console.info('页面成功获取到用户信息：' + res.data)
12.     })
13.   }
15.   build() {
16.     RelativeContainer() {
17.       
18.     }
19.   }
20. }

复制代码

四、目次布局

   统共 7 个步骤创建了 7 个文件，盼望对您有所帮助
  

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