鸿蒙中Axios数据请求的封装和配置方法

2025-04-11 16:50

本文主要是介绍鸿蒙中Axios数据请求的封装和配置方法,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

《鸿蒙中Axios数据请求的封装和配置方法》:本文主要介绍鸿蒙中Axios数据请求的封装和配置方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧...

适用于(HarmonyOS NEXT/5.0/API12+)

1.配置权限 应用级权限和系统级权限

鸿蒙中Axios数据请求的封装和配置方法

2.配置网络请求的代码

"requestPermissions": [
  { "name": "ohos.permission.INTERNET" }
],

3.下载在Entry中 下载Axios

//终端中运行
ohpm install @ohos/axios

4.封装Http请求

实现思路:

//1.创建AXIOS的实例对象

//配置基地址,超时时间

//2.配置请求拦截器

//3.配置响应拦截器

//4.封装Htpp类

//5.创建并导出 http实例对象

//6.统一导出

import axios, { AxiosError, AxiosRequestConfig, AxiosResponse } from "@ohos/axios"
import { logger } from "./Logger"
const baseURL = 'https://api-harmony-teach.itheima.net'
//1.创建AXIOS的实例对象
//配置基地址,超时时间
//create 创建一个新的Axios对象 可以多个接口使用 
export  const instance =axios.create({
  baseURL,
  timeout:6000
})
//2.配置请求拦截器 (前端给后端的东西)
instance.编程interceptors.request.use((config:InternalAxiosRequestConfig)=>{
  const user = auth.getUser()
  if(user.token){
    config.headers.Authorization = `Bearer ${ user.token}`
  }
  return config
},(err: AxiosError) => {
  logger.error('Req Error', jsON.stringify(err))
  return Promise.reject(err)
})
//3.配置响应拦截器   后端给前端的东西
// instance.interceptors.response.use(()=>{成功} ,()=>{失败})
//拦截器interceptors
//response通常指的是网络请求的响应。这是一个结构体,用于封装服务器返回的信息,
//AxiosResponse是Axios库中的一个接口,用于表示HTTP响应。以便开发者可以轻松地访问响应的各个部分。
instance.interceptors.response.use((res: AxiosResponse) => {
  //成功
  if (res.data.code === 10000) {
    logger.debug('Req Success', JSON.stringify(res.data.data))
    return res.data.data
  }
  //请求成功,回传是错误的
  logger.error('Req Error', JSON.stringify(res.data))
  return Promise.reject(res.data)
}, (err: AxiosError) => {
  //失败返回的错误
  logger.error('Req Error', JSON.stringify(err))
  return Promise.reject(err)
})
//4.封装Htpp类
// 提供request方法
class Http {
  // Get 请求可以省略第二个泛型,因为axios默认是any任何值可传
  //ResponseData 响应数据类型 返回的数据(响应回来的数据)  
  //RequestData  请求数据类型 请求携带的参数
  //Object 给个默认值 有的是入参
 //AxiosResponse是Axios库中的一个接口,用于表示HTTP响应。以便开发者可以轻松地访问响应的各个部分。
  // request<T,D>
  //T是自己的,D是请求得到
  request<ResponseData, RequestData = Object>(config: AxiosRequestConfig<RequestData>) {
    return instance<null, ResponseData, RequestData>(config)
  }
}
//5.创建并导出 http实例对象
export const http = new Http()

5.页面中使用

import axios, { AxiosError, AxiosRequestConfig, AxiosResponse } from "@ohos/axios"
import { logger } from "./Logger"
const baseURL = 'https://api-harmony-teacandroidh.itheima.net'
//1.创建AXIOS的实例对象
//配置基地址,超时时间
//create 创建一个新的Axios对象 可以多个接口使用 
export  const instance =axios.create({
  baseURL,
  timeout:6000
})
//2.配置请求拦截器 (前端给后端的东西)
instance.interceptors.request.use((config:InternalAxiosRequestConfig)=>{
  const user = auth.getUser()
  if(user.token){
    config.headers.Authorization = `Bearer ${ user.token}`
  }
  return config
},(err: AxiosError) => {
  logger.error('Req Error', JSON.stringify(err))
  return Promise.reject(err)
})
//3.配置响应拦截器   后端给前端的东西
// instance.interceptors.response.use(()=>{成功} ,()=>{失败})
//拦截器interceptors
//response通常指的是网络请求的响应。这是一个结构体,用于封装服务器返回的信息,
//AxiosResponse是Axios库中的一个接口,用于表示HTTP响应。以便开发者可以轻松地访问响应的各个部分。
instance.interceptors.response.use((res: AxiosResponse) =&pythongt; {
  //成功
  if (res.data.code === 10000) {
    logger.debug('Req Success', JSON.stringify(res.data.data))
    return res.data.data
  }
  //请求成功,回传是错误的
  logger.error('Req Error', JSON.stringify(res.data))
  return Promise.reject(res.data)
}, (err: AxiosError) => {
  //失败返回的错误
  logger.error('Req Error', JSON.stringify(err))
  return Promise.reject(err)
})
//4.封装Htpp类
// 提供request方法
class Http {
  // Get 请求可以省略第二个泛型,因为axios默认是any任何值可传
  //ResponseData 响应数据类型 返回的数据(响应回来的数据)  
  //RequestData  请求数据类型 请求携带的参数
  //Object 给个默认值 有的是入参
 //AxiosResponse是Axios库中的一个接口,用于表示HTTP响应。以便开发者可以轻松地访问响应的各个部分。
  // request<T,D>
  //T是自己的,D是请求得到
  request<ResponseData, RequestData = Object>(config: AxiosRequestConfig<http://www.chinasem.cnRequestData>) {
    return instance<null, ResponseData, RequestData>(config)
  }
}
//5.创建并导出 http实例对象
export const http = new Http()

到此这篇关于鸿蒙中Axios数据请求的封装和配置方法的文章就介绍到这了,更多相关鸿蒙 Axios数据请求内容请搜索China编程(www.chinasem.cn)以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程China编程栈(www.chinasem.cn)!

这篇关于鸿蒙中Axios数据请求的封装和配置方法的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1154180

相关文章

使用jenv工具管理多个JDK版本的方法步骤

《使用jenv工具管理多个JDK版本的方法步骤》jenv是一个开源的Java环境管理工具,旨在帮助开发者在同一台机器上轻松管理和切换多个Java版本,:本文主要介绍使用jenv工具管理多个JD... 目录一、jenv到底是干啥的?二、jenv的核心功能(一)管理多个Java版本(二)支持插件扩展(三)环境隔

Java中Map.Entry()含义及方法使用代码

《Java中Map.Entry()含义及方法使用代码》:本文主要介绍Java中Map.Entry()含义及方法使用的相关资料,Map.Entry是Java中Map的静态内部接口,用于表示键值对,其... 目录前言 Map.Entry作用核心方法常见使用场景1. 遍历 Map 的所有键值对2. 直接修改 Ma

Springboot3+将ID转为JSON字符串的详细配置方案

《Springboot3+将ID转为JSON字符串的详细配置方案》:本文主要介绍纯后端实现Long/BigIntegerID转为JSON字符串的详细配置方案,s基于SpringBoot3+和Spr... 目录1. 添加依赖2. 全局 Jackson 配置3. 精准控制(可选)4. OpenAPI (Spri

华为鸿蒙HarmonyOS 5.1官宣7月开启升级! 首批支持名单公布

《华为鸿蒙HarmonyOS5.1官宣7月开启升级!首批支持名单公布》在刚刚结束的华为Pura80系列及全场景新品发布会上,除了众多新品的发布,还有一个消息也点燃了所有鸿蒙用户的期待,那就是Ha... 在今日的华为 Pura 80 系列及全场景新品发布会上,华为宣布鸿蒙 HarmonyOS 5.1 将于 7

Mybatis Plus Join使用方法示例详解

《MybatisPlusJoin使用方法示例详解》:本文主要介绍MybatisPlusJoin使用方法示例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,... 目录1、pom文件2、yaml配置文件3、分页插件4、示例代码:5、测试代码6、和PageHelper结合6

Java中实现线程的创建和启动的方法

《Java中实现线程的创建和启动的方法》在Java中,实现线程的创建和启动是两个不同但紧密相关的概念,理解为什么要启动线程(调用start()方法)而非直接调用run()方法,是掌握多线程编程的关键,... 目录1. 线程的生命周期2. start() vs run() 的本质区别3. 为什么必须通过 st

使用SpringBoot整合Sharding Sphere实现数据脱敏的示例

《使用SpringBoot整合ShardingSphere实现数据脱敏的示例》ApacheShardingSphere数据脱敏模块,通过SQL拦截与改写实现敏感信息加密存储,解决手动处理繁琐及系统改... 目录痛点一:痛点二:脱敏配置Quick Start——Spring 显示配置:1.引入依赖2.创建脱敏

maven私服配置全过程

《maven私服配置全过程》:本文主要介绍maven私服配置全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录使用Nexus作为 公司maven私服maven 私服setttings配置maven项目 pom配置测试效果总结使用Nexus作为 公司maven私

C#之List集合去重复对象的实现方法

《C#之List集合去重复对象的实现方法》:本文主要介绍C#之List集合去重复对象的实现方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录C# List集合去重复对象方法1、测试数据2、测试数据3、知识点补充总结C# List集合去重复对象方法1、测试数据

SpringBoot读取ZooKeeper(ZK)属性的方法实现

《SpringBoot读取ZooKeeper(ZK)属性的方法实现》本文主要介绍了SpringBoot读取ZooKeeper(ZK)属性的方法实现,强调使用@ConfigurationProperti... 目录1. 在配置文件中定义 ZK 属性application.propertiesapplicati