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