首页 > 其他分享 >HarmoryOS 网络请求模块及Axios库的封装

HarmoryOS 网络请求模块及Axios库的封装

时间:2024-09-07 20:54:39浏览次数:12  
标签:axios return 请求 拦截器 response 响应 Axios 封装 HarmoryOS

        我们在使用 DevEec Studio 进行网络请求时,需选择一个稳定、高效的网络库作为基础,如Axios、Fetch API、Moya等;需要对网络请求的基本配置进行统一设定,比如基础URL、超时时间、默认请求头等;要进行错误处理:封装时应该考虑各种可能的错误情况,并提供统一的错误处理逻辑;设置请求和响应拦截器:在请求发出前和响应返回后添加拦截器,可以用来修改请求参数或响应数据;创建请求取消机制:提供请求取消的能力,防止不必要的请求消耗资源。

Axios库的封装如下:

//ArkTS
//首先我们需要先在终端进行 axios 库的安装

#安装
ohpm install @ohos/axios

#卸载
ohpm uninstall @ohos/axios

//代码如下:
import axios, { AxiosError, AxiosRequestConfig, AxiosResponse, InternalAxiosRequestConfig } from '@ohos/axios' //导入库及需要的参数类型
import { promptAction, router } from '@kit.ArkUI' //导入系统路由及弹窗

let req = axios.create({
  baseURL:'',  //基地址
  timeout: 5000     //请求超时时间
})

// axios 库的请求拦截器
install.interceptors.request.use((config:InternalAxiosRequestConfig) => {
  //获取用户token信息判断并传入请求头,自行获取
  if (token) {
    config.headers.Authorization = `${token}` //根据后端接口进行请求头的传入
  }
  return config
},(err: AxiosError) => {
  return Promise.reject(err)
})

// axios 库的响应拦截器
install.interceptors.response.use((response:AxiosResponse) => {
//此处 code 码为响应成功的结果,需自己从后端接口获取
  if (response.data.code === xxx) {
//从响应拦截器直接拦截想要的获取到的数据,也需自行判断
    return response.data.xxx
  }
  return Promise.reject(response.data)
},(error:AxiosError) => {
// 401 为服务器响应错误,用户登陆失效
  if (error.response?.status === 401) {
    auth.setUser({} as User)
    router.pushUrl({url:(此处跳转至登录页)},router.RouterMode.Single)
    promptAction.showToast({message:'登陆失效'})
  }
  return Promise.reject(error)
})

//封装为类方法,便于后期维护及更高安全性
class Http{
// Res 为响应体的类型,Req 为请求体的类型
  request<Res,Req = Object>(config:AxiosRequestConfig) {
    return install<null,Res,Req>(config)
  }
}

//将类实例化
export let http = new Http()

标签:axios,return,请求,拦截器,response,响应,Axios,封装,HarmoryOS
From: https://blog.csdn.net/qq_63739517/article/details/141993257

相关文章

  • 基于sprigboot、vue.js、elementui、axios.js、xlsx.js的小型购物管理系统
    该管理系统实现了增加、编辑、删除、导出、批量删除。以下是代码实现:<!DOCTYPEhtml><html>   <head>      <metacharset="utf-8">      <title></title>      <linkrel="stylesheet"href="./css/element.css"/>......
  • 封装
    封装就是把抽象出的字段和对字段的操作封装在一起,数据被保护在内部,数据的其他包只有通过被授权的操作方法才能对字段进行操作。封装的好处隐藏实现细节可以对数据进行验证,保证安全合理如何实现封装?建议将结构体、字段(属性)的首字母小写(其他包不能使用,类似于private)给结构体......
  • 必应每日壁纸API封装
    简介这个类封装了必应首页的每日壁纸查看功能,提供了查看、保存壁纸的方法,最大支持查看近8天的壁纸使用方法asyncTaskMain(){ try { varbing=BingWallpaperAPI.CreateInstance(8);//初始化,参数8表示一共会加载8张图片 vartask=awaitbing.Current(); task.Wal......
  • AI大模型接口封装
    在当今的AI应用场景中,许多企业和开发者面临一个共同的挑战:如何在不修改代码的情况下灵活调用不同的大模型(如OpenAI的GPT和Google的Bard),并且让这些调用尽可能简洁、可维护。这篇博客将介绍如何使用SpringBoot结合多种设计模式,实现一个屏蔽大模型差异的统一接口,从而使大模型应用更加......
  • axios使用 && axios拦截器
    1.安装npminstallaxios2.使用_axios.post("/api/auth/",form.value).then((res)=>{if(res.data.code===0){//{id:1,name:username.value,token:"xxx88sdkweisdfsd"}store.doLogin(res.data.data)ro......
  • 《C++中的面向对象编程三大特性:封装、继承与多态》
    在C++编程的广阔世界中,面向对象编程(Object-OrientedProgramming,OOP)的三大特性——封装、继承和多态,犹如三把强大的利器,帮助程序员构建出高效、可维护和可扩展的软件系统。本文将深入探讨如何在C++中实现这三大特性,并通过具体的代码示例展示它们的强大之处。一、封装(Enca......
  • 8.封装
    MODULE8 封装1.要回使用private关键字修饰成员,并知道被private修饰之后的作用(访问特点)是什么2.会使用set方法为属性赋值,使用get方法获取属性值3.会利用this关键字区分重名的成员变量和局部变量4.会利用空参构造创建对象,并知道空参构造作用5.会使用有构造创建对象,并为属性赋值......
  • 使用vue-json-pretty和vue-json-schema-editor-visual封装一个可视化json数据编辑器及
    一、前言        最近做了一个需求,要求实现可以对json结构进行编辑保存及字段级别的权限管控,结合目前已有的轮子和当前项目的结构,决定使用vue-json-pretty和vue-json-schema-editor-visual来实现效果如下组件支持修改左侧json数据,自动生成右侧树。也支持修改右侧树......
  • 低成本消费类电子主控推荐,PY32F002B单片机 多种封装可选
    今天给大家推荐一颗高性价比单片机,普冉的PY32F002B,专为超高性价比、精简的系统而设计,符合消费市场的基本设计需求,被低成本消费类电子广泛应用。PY32F002B单片机在低成本消费类电子领域具有极大成本优势,价格比部分八位单片机还要便宜,常用的TSSOP20只要5毛,我们还提供无丝印版本给有需......
  • 【C++】封装
    目录1.访问控制符2.封装的目的2.1.数据隐藏和保护2.2.接口与实现的分离2.3.控制访问3.封装的好处3.1.提高代码的安全性3.2.减少错误3.3.提高代码的可维护性3.4.增强代码的可读性3.5.促进模块化设计3.6.提高代码的可重用性3.7.支持面向对象的设计原则......