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

 更新时间:2025年04月11日 10:13:51   作者:Mnebo  
这篇文章主要介绍了鸿蒙中Axios数据请求的封装和配置方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

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

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

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-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()

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

相关文章

  • 解决使用IDE Run运行出错package pack/test is not in GOROOT (/usr/local/go/src/pack/test)

    解决使用IDE Run运行出错package pack/test is not in GOROOT (/usr/loca

    这篇文章主要介绍了解决使用IDE Run运行出错package pack/test is not in GOROOT (/usr/local/go/src/pack/test),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-11-11
  • OAuth 2.0 概念及授权流程梳理

    OAuth 2.0 概念及授权流程梳理

    这篇文章主要介绍了OAuth 2.0 概念及授权流程梳理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • 二维码的生成细节和原理

    二维码的生成细节和原理

    本篇文章主要介绍二维码,二维码大家都很熟悉,但是二维码是如何生成的并不了解,对二维码感兴趣的小伙伴可以看下本篇文章
    2016-07-07
  • 10分钟搭建自己的Git仓库

    10分钟搭建自己的Git仓库

    GitLab是一款使用MIT许可证的基于网络的Git仓库管理工具,本文将介绍如何使用Gitlab在Linux下快速搭建Git仓库,具有一定的参考价值,感兴趣的可以了解一下
    2021-12-12
  • 使用roolup构建你的lib(实现步骤)

    使用roolup构建你的lib(实现步骤)

    大家都知道Rollup更加适合用于构建lib 而 Webpack, Precel 更加适合开发应用。本文,将结合一个简单的例子说说如何使用Rollup构建自己的lib,感兴趣的朋友一起看看吧
    2021-08-08
  • BeyondCompare4下载安装使用超详细步骤

    BeyondCompare4下载安装使用超详细步骤

    使用BeyondCompare只需使用简单而强大的命令和操作,即可开启最优质的对比体验,找出您感兴趣的差异,合并变化,然后同步文件,并生成报告,对此感兴趣的朋友跟随小编一起看看吧
    2021-12-12
  • 科普:多线程与异步的区别

    科普:多线程与异步的区别

    这篇文章主要介绍了科普:多线程与异步的区别,本文讲解了多线程和异步操作的异同、异步操作的本质、线程的本质、异步操作的优缺点、多线程的优缺点等内容,需要的朋友可以参考下
    2015-06-06
  • Vscode的SSH插件远程连接Linux的实现步骤

    Vscode的SSH插件远程连接Linux的实现步骤

    本文主要介绍了Vscode的SSH插件远程连接Linux的实现步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • 伪静态技术介绍与优缺点分析(较完整篇)

    伪静态技术介绍与优缺点分析(较完整篇)

    伪静态太适合用在普通的企业网站上了——既不要求高并发,但同时又很在乎seo(搜索引擎优化),而且也要求后台可动态更新。
    2009-11-11
  • 5G频段阐述

    5G频段阐述

    这篇文章主要介绍了5G频段阐述方法的相关资料,需要的小伙伴可以参考下面
    2021-08-08

最新评论