ToB企服应用市场:ToB评测及商务社交产业平台

标题: 鸿蒙HarmonyOS NEXT开发：《鸿蒙应用中的网络请求方式与封装：原生 http 与 [打印本页]
作者: 河曲智叟    时间: 2024-12-17 22:48
标题: 鸿蒙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 之前，必要先辈行安装：

（二）基本使用

代码实现
  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. 写请求方法，实现请求

  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企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4