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

        我们在使用 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()

  • 14
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值