引言
在现代前端开发中,网络请求的封装是提升代码可维护性和复用性的关键。本文将介绍如何使用Axios库在ArkTS环境中封装一个通用的网络请求工具类Curl
,并探讨其设计与实现。
技术选型
我们选择了@ohos/axios
作为网络请求的基础库,因为它提供了强大的功能,如拦截器、请求和响应转换等。此外,结合项目的基础配置(如BASE_URL
和TIME_OUT
),我们可以更好地管理网络请求的全局配置。
类结构设计
Curl
类
Curl
类是整个封装的核心,负责创建Axios实例并设置请求和响应拦截器。通过构造函数初始化实例,并传入基础配置。
typescript
class Curl {
instance: AxiosInstance
constructor(opt: CreateAxiosDefaults = { baseURL: BASE_URL, timeout: TIME_OUT }) {
this.instance = axios.create(opt)
this.setInterceptorsRequest()
this.setInterceptorsResponse()
}
}
拦截器设置
请求拦截器
在请求拦截器中,我们添加了用户认证信息到请求头中,确保每个请求都携带有效的Token。
typescript
private setInterceptorsRequest() {
this.instance.interceptors.request.use(
(config: InternalAxiosRequestConfig) => {
const token = authUser.getUser()
config.headers['Authorization'] = `Bearer ${token?.token}`
return config
},
(err: AxiosError) => {
return Promise.reject(err.message)
}
)
}
响应拦截器
响应拦截器用于处理响应数据和错误信息,统一返回格式或抛出异常。
typescript
private setInterceptorsResponse() {
this.instance.interceptors.response.use(
(res: AxiosResponse) => {
if (res.data.code === '1') {
return res.data
} else {
return Promise.reject(res.data.message)
}
},
(err: AxiosError) => {
return Promise.reject(err.message)
}
)
}
请求方法封装
为了简化不同类型的HTTP请求,我们在Curl
类中封装了常见的GET、POST、PUT和DELETE方法,并支持FormData上传。
typescript
get<R, Q>(url: string, params?: Q): Promise<R> {
return this.instance.get(url, params && { params })
}
post<R, Q>(url: string, data: Q): Promise<R> {
return this.instance.post(url, data)
}
post_form<R, Q>(url: string, formData: Q): Promise<R> {
return this.instance.postForm(url, formData, {
headers: {
'Content-Type': 'multipart/form'
},
context: getContext(this)
})
}
put<R, Q>(url: string, data: Q): Promise<R> {
return this.instance.put(url, data)
}
delete<R, Q>(url: string, data: Q): Promise<R> {
return this.instance.delete(url, {
data: data
})
}
导出实例
最后,我们导出一个Curl
实例,供其他模块使用。
typescript
export const curl = new Curl()
完整代码
typescript
import axios, {
AxiosError,
AxiosInstance,
AxiosResponse,
CreateAxiosDefaults,
InternalAxiosRequestConfig
} from '@ohos/axios' // 导入axios及相关类型
import { BASE_URL, TIME_OUT } from '../../../../../Index' // 导入基础配置
import { authUser, logger } from '.' // 导入用户认证模块
class Curl {
instance: AxiosInstance // 存储axios实例
constructor(opt: CreateAxiosDefaults = { baseURL: BASE_URL, timeout: TIME_OUT }) { // 构造函数,初始化axios实例
this.instance = axios.create(opt) // 创建axios实例
this.setInterceptorsRequest() // 设置请求拦截器
this.setInterceptorsResponse() // 设置响应拦截器
}
// 请求拦截器
private setInterceptorsRequest() { // 设置请求拦截器方法
this.instance.interceptors.request.use(// 使用请求拦截器
(config: InternalAxiosRequestConfig) => { // 请求配置处理函数
const token = authUser.getUser() // 获取用户Token
config.headers['Authorization'] = `Bearer ${token?.token}` // 设置请求头Authorization
return config // 返回配置
},
(err: AxiosError) => { // 请求错误处理函数
return Promise.reject(err.message) // 拒绝请求并返回错误信息
}
)
}
// 响应拦截器
private setInterceptorsResponse() { // 设置响应拦截器方法
this.instance.interceptors.response.use(// 使用响应拦截器
(res: AxiosResponse) => { // 响应数据处理函数
if (res.data.code === '1') { // 判断响应码是否为成功
return res.data // 返回响应数据
} else { // 响应码不为成功
return Promise.reject(res.data.message) // 拒绝响应并返回错误信息
}
},
(err: AxiosError) => { // 响应错误处理函数
return Promise.reject(err.message) // 拒绝响应并返回错误信息
}
)
}
// GET请求 获取
get<R, Q>(url: string, params?: Q): Promise<R> { // GET请求方法
return this.instance.get(url, params && { params }) // 发送GET请求
}
// POST请求 新增
post<R, Q>(url: string, data: Q): Promise<R> { // POST请求方法
return this.instance.post(url, data) // 发送POST请求
}
// FormData 上传请求 新增
post_form<R, Q>(url: string, formData: Q): Promise<R> { // FormData上传方法
return this.instance.postForm(url, formData, {
// 发送FormData请求
headers: {
// 设置请求头
'Content-Type': 'multipart/form' // 设置Content-Type为multipart/form
},
context: getContext(this) // 设置请求上下文
})
}
// PUT请求 修改
put<R, Q>(url: string, data: Q): Promise<R> { // PUT请求方法
return this.instance.put(url, data) // 发送PUT请求
}
// delete请求 删除
delete<R, Q>(url: string, data: Q): Promise<R> { // DELETE请求方法
return this.instance.delete(url, {
// 发送DELETE请求
data: data // 设置请求体数据
})
}
}
export const curl = new Curl() // 导出Curl实例
结论
通过上述设计与实现,我们成功地封装了一个高效且易于使用的网络请求工具类Curl
。这种封装不仅提高了代码的可读性和可维护性,还为后续的功能扩展打下了坚实的基础。