HarmonyOS NEXT - 电商App实例二（ 网络请求http）

        在HarmonyOS中进行网络请求开发时，可以利用"@ohos.net.http"库，该库支持常见的HTTP方法，可以或许满意大多数应用或元服务的需求。
        接下来，我们将通过http库，对其进行二次封装，并向后台发送请求，完成banner数据的获取。

一、根本利用

1.1 导入模块

1. import http from '@ohos.net.http'

复制代码

1.2 http请求数据

        首先，我们先看下@ohos.net.http的根本用法，利用http模块发送一个GET请求，处理相应。示例代码如下：

1. import http from '@ohos.net.http';
3. // 创建 HTTP 请求对象
4. let httpRequest = http.createHttp();
6. // 发送 GET 请求
7. httpRequest.request(
8.     "https://api.example.com/data",
9.     {
10.         method: http.RequestMethod.GET,
11.         header: {
12.             'Content-Type': 'application/json'
13.         }
14.     },
15.     (err, data) => {
16.         if (err) {
17.             console.error('Error:', err);
18.         } else {
19.             console.log('Response Code:', data.responseCode);
20.             console.log('Response Data:', data.result);
21.         }
22.     }
23. );

复制代码

1.3 HttpRequestOptions

        参数如下表：

名称	类型	描述
method	RequestMethod	请求方式：GET、POST、PUT、DELETE等
extraData	string|Object	请求参数
header	Object	请求字段
connectTimeout	number	毗连超时时间，单位毫秒，默认是60000ms
readTimeout	number	读取超时时间，同上

1.4 HttpResponse

        参数如下表：

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

二、Http库

        官方提供的"@ohos.net.http库，支持常见的Http方法，如 get、post、options、head、put、delete、trace、connect等，为了简化网络请求的流程，更好地复用和管理代码，我们可以对@ohos.net.http进行封装，使其更易于利用。
        在网络请求中，通常需要考虑以下几个方面：

• 请求方法：利用哪种Http方法（GET、POSt、PUT、DELETE）来发送请求。
  
• 请求头：设置必要的请求头，例如Content-Type、Authorization等。
  
• 请求体：对POST、PUT请求，可能需要发送请求体。请求体可以是Json数据、表单数据或文件等。
  
• 处理相应：处理网络请求过程中可能出现的错误，例如超时，网络不可用、服务器错误等。
  
• 异步处理：网络请求通常是异步的，需要利用回调、Promise、async/awai等机制来处理异步操作。
  
• 安全性：确保网络请求的安全性，例如利用HTTPS、验证证书、防止CSRF攻击等。
  

2.1 封装@ohos.net.http

        为了简化代码并提高复用性，可以将@ohos.net.http封装成一个工具类。先在ets目次下创建utils目次，再创建httpUtil类（路径：ets/utils/httpUtil.ts）。代码如下：

1. import http from '@ohos.net.http';
3. /**
4. * http封装类
5. */
6. export class HttpUtil {
7.   private base_url: string = '';  // 基础路径
8.   private headers: Record<string, string> | null = null; // header信息
9.   private httpRequest: http.HttpRequest; // request请求
11.   /**
12.    * 构造函数
13.    * @param url 基础路径
14.    * @param headers header信息
15.    */
16.   constructor(url?: string, headers?: Record<string, string>) {
17.     this.httpRequest = http.createHttp()
18.     if (url) this.base_url = url
19.     if (headers) this.headers = headers
20.   }
22.   /**
23.    * 设置基础路径
24.    * @param url
25.    */
26.   setBaseUrl(url: string) {
27.     this.base_url = url
28.   }
30.   /**
31.    * 设置header信息
32.    * @param headers
33.    */
34.   setHeaders(headers: Record<string, string>) {
35.     this.headers = headers
36.   }
38.   /**
39.    * 销毁 http 请求对象
40.    */
41.   public destroy(){
42.     this.httpRequest.destroy()
43.   }
45.   /**
46.    * 发送HTTP请求
47.    * @param url 请求地址
48.    * @param method  请求方法（如GET、POST、PUT、DELETE）
49.    * @param headers 请求头
50.    * @param data  请求体（仅用于 POST/PUT）
51.    * @returns 返回响应数据
52.    */
53.   public async request (
54.     url: string,
55.     method: http.RequestMethod = http.RequestMethod.GET,
56.     headers: Record<string, string> = {},
57.     data?: Record<string, any>
58.   ): Promise<any> {
59.     // 合并基础路径
60.     const _url = this.base_url ? this.base_url + url : url
61.     // 合并header信息
62.     const _headers = this.headers ? Object.assign({}, this.headers, headers) : !headers ? {} : headers
63.     return new Promise((resolve, reject) => {
64.       this.httpRequest.request(_url, {
65.         method: method,
66.         header: _headers,
67.         extraData: data
68.       }, (err, response) => {
69.         if (err) {
70.           reject(err)
71.         } else {
72.           // 如果请求成功，返回正确结果，否则返回错误信息
73.           if (response.responseCode == http.ResponseCode.OK) {
74.             resolve(response.result)
75.           } else {
76.             reject('HttP Error:' + response.responseCode)
77.           }
78.         }
79.       })
80.     })
81.   }
83.   /**
84.    * 发送 GET 请求
85.    * @param url 请求地址
86.    * @param headers 请求头
87.    * @returns 返回响应数据
88.    */
89.   public async get(url: string, headers?: Record<string, string>) : Promise<any> {
90.     return this.request(url, http.RequestMethod.GET, headers)
91.   }
93.   /**
94.    * 发送 POST请求
95.    * @param url 请求地址
96.    * @param data 请求体
97.    * @param headers 请求头
98.    * @returns 返回响应数据
99.    */
100.   public async post(url: string, data: Record<string, any>, headers?: Record<string, string>) : Promise<any> {
101.     return this.request(url, http.RequestMethod.POST, headers, data)
102.   }
103. }

复制代码

2.2 实例httpUtil类

        在utils目次中，再创建request请求文件（路径：ets/utils/request.ts），用于初始化http请求的底子路径和header请求类型信息，而且全局共享该实例对象。示例代码如下：

1. import { HttpUtil } from './httpUtil'
3. /**
4. * 初始化请求 实例类
5. */
6. export const httpRequest = new HttpUtil('http://test.shop.com', {
7.   'Content-Type': 'application/json'
8. })

复制代码

2.3 api请求

        在api目次创建，创建index.ts文件，用于定义具体业务请求函数。这里向后台发送一个GET请求，用于获取banner信息。示例代码如下：

1. import { httpRequest } from '../utils/request'
3. /**
4. * 获取banner信息
5. */
6. export const getBannerInfo = async () => {
7.   return await httpRequest.get('/banner.php')
8. }

复制代码

2.4 获取banner信息

        如下图，在页面中添加按钮，点击“获取banner信息”，向后台发送GET请求，获取banner数据。

        打开pages/index.ets 页面文件，添加http请求。代码如下：

1. import { getBannerInfo } from '../api/index'
3. @Entry
4. @Component
5. struct Index {
6.   @State bannerMessage: string = '';
8.   build() {
9.     RelativeContainer() {
10.       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }){
11.         Text(this.bannerMessage)
13.         Button('获取banner信息').onClick(async () => {
14.           console.log('tag')
15.           await getBannerInfo().then(res => {
16.             this.bannerMessage = JSON.stringify(res)
17.             console.log('tas success', res)
18.           }).catch(() => {
19.             console.error('Error')
20.           })
21.         })
22.       }.width('100%')
23.     }
24.     .height('100%')
25.     .width('100%')
26.   }
27. }

复制代码

        但是，各人会发现Promise回调结果 res变量下方出现了波浪线，并提示错误为：Use explicit types instead of "any", "unknown" (arkts-no-any-unknown) <ArkTSCheck>。这是因为在ArkTS中，利用any或unknow 类型会降低代码的类型的安全性，因此需要利用显式类来替换它们，确保类型安全。

2.5 定义接口

        下面为请求和相应的数据类型定义明白的接口，并利用泛型来加强类型安全性。在types目次中创建http.d.ts文件，用于定义http的接口。代码如下：

1. import http from '@ohos.net.http';
3. // 定义请求参数接口
4. interface RequestOptions {
5.   url: string;
6.   method?: http.RequestMethod,
7.   headers?: Record<string, string>;
8.   data?: Record<string, any>;
9.   timeout?: number
10. }
12. // 定义响应数据接口
13. interface HttpResponse<T> {
14.   responseCode: number;
15.   result: T;
16. }

复制代码

2.6 httpUtil改造

       将定义的接口数据引入到httpUtil.ts中，对request、get、post等方法，增加泛型，通过表现类类型定义，确保请求和相应的数据类型一致。改造后的httpUtils 代码如下：

1. import http from '@ohos.net.http';
2. import { HttpResponse, RequestOptions } from '../types/http';
4. /**
5. * http封装类
6. */
7. export class HttpUtil {
8.   private base_url: string = '';  // 基础路径
9.   private headers: Record<string, string> | null = null; // header信息
10.   private httpRequest: http.HttpRequest; // request请求
12.   /**
13.    * 构造函数
14.    * @param url 基础路径
15.    * @param headers header信息
16.    */
17.   constructor(url?: string, headers?: Record<string, string>) {
18.     this.httpRequest = http.createHttp()
19.     if (url) this.base_url = url
20.     if (headers) this.headers = headers
21.   }
23.   /**
24.    * 设置基础路径
25.    * @param url
26.    */
27.   setBaseUrl(url: string) {
28.     this.base_url = url
29.   }
31.   /**
32.    * 设置header信息
33.    * @param headers
34.    */
35.   setHeaders(headers: Record<string, string>) {
36.     this.headers = headers
37.   }
39.   /**
40.    * 销毁 http 请求对象
41.    */
42.   public destroy(){
43.     this.httpRequest.destroy()
44.   }
46.   /**
47.    * 发送HTTP请求
48.    * @param options 请求参数
49.    * @returns 返回响应数据
50.    */
51.   public async request <T> (options : RequestOptions ): Promise<T> {
52.     // 合并基础路径
53.     const _url = this.base_url ? this.base_url + options.url : options.url
54.     // 合并header信息
55.     const _headers = this.headers ? Object.assign({}, this.headers, options.headers) :
56.                       !options.headers ? {} : options.headers
57.     return new Promise((resolve, reject) => {
58.       this.httpRequest.request(_url, {
59.         method: options.method || http.RequestMethod.GET,
60.         header: _headers,
61.         extraData: options.data || {},
62.         readTimeout: options.timeout || 5000,
63.         connectTimeout: options.timeout || 5000
64.       }, (err, response) => {
65.         if (err) {
66.           reject(err)
67.         } else {
68.           // 如果请求成功，返回正确结果，否则返回错误信息
69.           if (response.responseCode == http.ResponseCode.OK) {
70.             resolve(response.result as T)
71.           } else {
72.             reject('HttP Error:' + response.responseCode)
73.           }
74.         }
75.       })
76.     })
77.   }
79.   /**
80.    * 发送 GET 请求
81.    * @param url 请求地址
82.    * @param headers 请求头
83.    * @returns 返回响应数据
84.    */
85.   public async get <T> (url: string, headers?: Record<string, string>) : Promise<T> {
86.     return this.request <T> ({url, method: http.RequestMethod.GET, headers})
87.   }
89.   /**
90.    * 发送 POST请求
91.    * @param url 请求地址
92.    * @param data 请求体
93.    * @param headers 请求头
94.    * @returns 返回响应数据
95.    */
96.   public async post <T> (
97.     url: string, data: Record<string, any>, headers?: Record<string, string>
98.   ) : Promise<T> {
99.     return this.request({url, method: http.RequestMethod.POST, headers, data })
100.   }
101. }

复制代码

2.7 api更改

        定义banner信息数据类型，在发起get请求位置，将类型传入进去。代码如下：

1. interface apiBanner {
2.   id: number;
3.   name: string;
4.   thumb: string;
5.   uid: number;
6.   createTime: Date;
7.   updateTime: Date;
8. }
10. /**
11. * 获取banner信息
12. */
13. export const getBannerInfo = async () => {
14.   return await httpRequest.get<apiBanner>('/banner.php')
15. }

复制代码

        当httpUtil类和api请求改造好后，在页面中点击按钮，获取banner信息。如下图：

        点击按钮后，getBannerInfo接口向后台发送了一个请求，成功获取了接口相应的数据，并通过Text组件将数据表现在App界面中。
        在项目开发中，Http请求扮演着至关重要的角色，http请求是App与服务器之间进行数据交互的主要方式。通过发送http请求，App可以从服务器获取数据，如用户信息，产物信息等，也可以向服务器提交数据，如表单数据，文件上传等。这种数据交互是App实现各种功能的底子。
        假如你有更多题目，接待随时沟通交换！

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