鸿蒙HarmonyOS NEXT开发：《鸿蒙应用中的网络请求方式与封装：原生 http 与 ...

在鸿蒙应用开发中，网络请求是实现应用与后端交互的关键部分。本文将详细介绍鸿蒙中的原生 http 请求和基于第三方库 axios 的网络请求，包罗其使用方法和常见的封装方式。
一、原生 http 请求

（一）创建请求对象并获取结果（无参数的 get 请求）

代码实现：

1. // 创建请求对象
2. const req = http.createHttp()
3. // 获取结果
4. const res = await req.request('请求地址')

复制代码

      这是最基础简单的无参数 get 请求方式，通过http.createHttp()创建请求对象，然后使用request方法发送请求并等待响应。
（二）带有参数的请求

代码实现

1. const res = req.request(`请求地址/path参数?xx=${encodeURIComponent(Query参数xx)}&yy=${encodeURIComponent(Query参数yy)}`,
2.   {
3.   // header参数
4.   header: {
5.              contentType: 'application/json',
6.     Authorization:'xxxxx'
7.   },
8.   // body参数
9.   extraData:{},
10.   // 请求类型 默认http.RequestMethod.GET
11.   method: xxxx
12.   })
13. const data = res.result

复制代码

当必要发送带有参数的请求时，可以通过拼接字符串的方式来构建请求地址。必要注意的是，对于中文等特殊字符，必要使用encodeURIComponent举行转码，以避免出现错误。同时，可以在请求设置中设置请求头（header）、请求体（extraData）和请求范例（method）等参数，后端返回的结果在res.result中获取。
二、第三方库 axios 请求

（一）安装与卸载

在使用 axios 之前，必要先辈行安装：

• 安装：ohpm i @ohos/axios
  
• 卸载：ohpm uninstall @ohos/axios
  

（二）基本使用

代码实现

1. const res = await axios
2. <响应类型, AxiosResponse<响应类型(优先级高), 提交类型>, 提交类型(优先级高)>
3. ({
4.     url: '',
5.     method: '',
6.     data: {},
7.     params: {},
8.     headers: {}
9.   })
10. const data = res.data

复制代码

使用 axios 发送请求时，传入包含请求地址（url）、请求方法（method，get请求可省略）、请求数据（data）、查询参数（params，会自动拼接到 URL 上且无需转码）和请求头（headers）等参数的对象。后端返回的结果在res.data中获取。

三、axios 封装网络请求工具

（一）不分开请求方式的封装

1. 封装基地址

1. const request = axios.create({baseURL:'基地址'})

复制代码

2. 添加请求拦截器和响应拦截器

• 请求拦截器
  

1. // 添加请求拦截器
2. request.interceptors.request.use((config:InternalAxiosRequestConfig) => {
3.   // 对请求数据做点什么  一般必须注入token(token存在时)
4.   const token =  'xxxxxxxxxxxxxxxxxxxx'  
5.   if(user.token){
6.     config.headers.Authorization = `Bearer ${user.token}`
7.   }
8.   return config;
9. }, (error:AxiosError) => {
10.   // 对请求错误做些什么
11.   return Promise.reject(error);
12. });

复制代码

在请求拦截器中，通常会查抄用户的 token（如果存在）并将其添加到请求头中。

• 响应拦截器
  

1. equest.interceptors.response.use((response:AxiosResponse)=> {
2.   // 对响应数据做点什么   网络通信成功  判断业务通信 处理事件
4.   return response;
5. },
6.   (error:AxiosError)=> {
7.   // 对响应错误做点什么     网络通信失败 401为登录超时 处理事件
8.   if(error.response?.status==401){
9.     promptAction.showToast({message:'登录超时，请重新登录!'})
11.     return Promise.reject()
12.   }
13.   promptAction.showToast({message:error.message})
14.   return Promise.reject(error);
15. });

复制代码

响应拦截器用于处置处罚网络通信成功和失败的情况，例如在登录超时（401 错误）时提示用户重新登录。
3. 写请求方法，实现请求

• 第一种写法
  

1. function otherAxiosRequest<T=null, D=null>(data:AxiosRequestConfig<D>){
2.   return request<null, AxiosResponse<T, null>, D>(data)
3. }
4. // data为axios的参数
5. // 如
6. interface IParams{
7. username:string
8. password:string
9. }
10. const res = await otherAxiosRequest<string, IParams>({
11. url:'hm/login',
12. data:{
13.   username: this.username,
14.   password: this.password
15. },
16. method:'post'
17. })
18. // res中的data便是后端返回的结果
19. const data = res.data

复制代码

• 第二种写法，
  

2. 如果后端返回的数据有规律，如
3. export interface IRes<T>{
4.   /** 请求成功 10000 标志  */
5.   code: number;
7.   /** 返回数据  */
8.   data: T;
10.   /** 请求成功  */
11.   message: string;
13.   /** 请求成功标志  */
14.   success: boolean;
15. }
16. function axiosRequest<T=null, D=null>(data:AxiosRequestConfig<D>){
17.   return request<null, AxiosResponse<IRes<T>, null>, D>(data)
18. }
20. // data为axios的参数
21. // 如
22. interface IParams{
23. username:string
24. password:string
25. }
26. const res = await axiosRequest<string, IParams>({
27. url:'hm/login',
28. data:{
29.   username: this.username,
30.   password: this.password
31. },
32. method:'post'
33. })
34. // res中的data便是后端返回的IRes中data数据（返回数据）
35. const data = res.data

复制代码

（二）分开请求方式的封装

1. 封装基地址和添加拦截器
与不分开请求方式的封装步调 1 和 2 相同。
2. 写请求方法，实现请求

• 新建 RequestAxios 类管理
  

1. export  class RequestAxios{
2.   static get<T>(url: string, params?: object): Promise<T> {
3.     return instance.get<null, T>(url, { params })
4.   }
6.   static put<T>(url: string, data?: object): Promise<T> {
7.     return instance.put<null, T>(url, data)
8.   }
10.   static post<T>(url: string, data?: object): Promise<T> {
11.     return instance.post<null, T>(url, data)
12.   }
14.   static delete<T>(url: string, data?: object): Promise<T> {
15.     return instance.delete<null, T>(url, { data })
16.   }
17. }

复制代码

通过创建一个类来分别管理差别范例的请求方法（get、put、post、delete），方便在差别场景下调用， data为一些须要参数，可以理解为axios的参数对象中除了method和url。
3. 调用方法获取结果

1. const res = await RequestAxios.get<Goods>(`xxxx`)
2. const res = await RequestAxios.post<SearchResult>("xxxx",
3.   {
4.       keyword: '',
5.       sortField: 'publishTime',
6.       sortMethod: 'desc',
7.       page: 1,
8.       pageSize: 10
9.   } as xxx)
10. //res.data 便是后端返回的IRes中data数据（返回数据）

复制代码

通过调用相应的请求方法来发送请求，并从res.data中获取后端返回的数据。
4. 封装为单个 API

1. export const getXxxAPI = async () => {
2.   return await RequestAxios.get<address[]>("/Xxx")
3. }
5. export const addXxxAPI = async (data:参数对象类型) => {
6.   return await RequestAxios.post<null>("Xxx", data)
7. }
9. export const delXxxAPI = async (id:string) => {
10.   return await RequestAxios.delete<null>(`Xxx${id}`)
11. }
13. export const updateXxxAPI = async (id:string,data:参数对象类型) => {
14.   return await RequestAxios.put<null>(`Xxx${id}`, data)
15. }

复制代码

进一步将请求方法封装为独立的 API 函数，方便在项目中同一管理和调用。

通过上述原生 http 请求和基于 axios 的网络请求方式及其封装方法，可以高效地实现鸿蒙应用与后端的网络通信，满意差别业务场景的需求。




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