鸿蒙开发axios超具体解析，以及完备封装，一次封装终身可用，小白都能上手使用axios发送网络请求
在鸿蒙客户端开发过程中，客户端和服务器进行数据交互，一定会使用到http模块去发送网络请求，鸿蒙原生的http模块使用起来比力繁琐，当然，也可提前封装，简化后边请求数据的操作，在第三方库中有一个广为人知的网络请求工具axios，axios库便是对http模块的网络请求工具进行了封装，简便了开发者发送网络请求的操作，在这里分享一个对axios的进一步封装步调，满足基本的增删查改操作。附上完备封装好的axios工具，一次封装，终身受用。1、安装axios
OpenHarmony三方库中心仓https://csdnimg.cn/release/blog_editor_html/release2.3.8/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=P1C7https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Faxios在这统统的操作之前需要打开项目的网络权限，在项目的module.json5文件中设置
https://i-blog.csdnimg.cn/direct/365643b2a9b7418a85701395a2873946.png
在module下面设置以下：
"requestPermissions": [
{
"name": "ohos.permission.INTERNET"
}
] https://i-blog.csdnimg.cn/direct/5e63a776d5bb4f4fa87257980fbaa301.png
在项目终端运行以下下令安装axios工具包
ohpm i @ohos/axios
2、创建axios实例，写上基地址
这一步操作需要将baseURL替换成自己项目的请求基地址
// 创建Axios实例
export const instance = axios.create({
// 请求基地址 替换为自己项目的请求基地址
baseURL: 'https://xxxxxxx',
}); 3、封装请求拦截器
请求拦截器顾名思义，在请求发出去之前会经过这里，这里可以对请求参数进行修改，一样平常这里会实行请求头自动注入token操作，也可以在这里注入一些请求基类参数
// 请求拦截器发请求之前进入这里
instance.interceptors.request.use((config: InternalAxiosRequestConfig) => {
// 这里可以对请求参数进行修改比如请求头自动注入token
return config;
}, (error: AxiosError) => {
return Promise.reject(error);
}); 4、封装响应拦截器
响应拦截器，也是顾名思义 ，服务器响应数据会先进入这里，分为请求成功与请求失败，在请求失败里边可以提示错误信息，在请求成功里边又需要判断业务是否成功，业务状态码为配景返回状态码，需要根据接口文档填写，若是成功，则将相应的数据return出去完成成功的网络请求，若是失败，则提示错误信息
// 响应拦截器
instance.interceptors.response.use((response: AxiosResponse) => {
// 响应成功进入这里
// 这里根据业务码进行判断比如code为200则返回数据否则弹出错误提示
if (response.data.code ==='网络请求成功码') {
return response.data.data;
}
// 提示错误信息msg字段根据自己服务端返回的字段进行修改
promptAction.showToast({ message: response.data.msg });
return Promise.reject(new Error(response.data.msg));
}, (error: AxiosError) => {
// 请求失败进入这里
// 这里可以根据自己的业务逻辑进行修改 比如判断错误码进行错误提示 401 404 等等
const res = error.response?.data as object;
if (res) {
// 提示服务端返回的错误信息
promptAction.showToast({ message: res["msg"] });
}
return Promise.reject(error);
}); 5、封装post、get、put、delete四种方法
为了简便我们后续的发请求操作，在axios封装这里就可以直接将增删改查四个方法直接封装好，后续使用只需要传地址和参数即可，低落了开发成本这里封装是根据axios的请求范例以及响应范例来封装的，以get方法为例：
get<T = any, R = AxiosResponse<T>, D = any> 这里可以看到返回值范例为Promise<R> 也就是说这个方法最终得到的数据是一个Promise<R>的对象，开发者在传入范例时，R范例会将T范例覆，
纵然传入T范例也只会得到Promise<AxiosResponse<T>> ,为何不直接将T置为null，开发者只需要传入R即可确定返回值范例，这个D是请求参数范例，现在还不确定，可以直接使用object替代，在使用时确定范例即可。其他3个方法也是同理。
在这里导出了一个RequestAxios类
get<T = any, R = AxiosResponse<T>, D = any>(url: string, config?: AxiosRequestConfig<D>): Promise<R>; export class RequestAxios {
static get<T>(url: string, params?: object): Promise<T> {
return instance.get<null, T>(url, { params });
}
static post<T>(url: string, data?: object): Promise<T> {
return instance.post<null, T>(url, data);
}
static delete<T>(url: string, data?: object): Promise<T> {
return instance.delete<null, T>(url, { data });
}
static put<T>(url: string, data?: object): Promise<T> {
return instance.put<null, T>(url, data);
}
} 6、调用RequestAxios
这里也是以get请求为例，在封装好之后，发送请求就是如此简便，只需传入接口地址，以及请求参数即可 ，由于返回值Promise对象，可以直接使用async、await语法糖来获取返回值，也可以在
.then中获取返回值
// 这里的地址是指除去请求基地址的接口地址 ，参数需要根据服务端接口文档进行修改
// 获取返回值方法1
const res = await RequestAxios.get('具体接口地址',请求参数)
// 获取返回值方法2
RequestAxios.get('具体接口地址',请求参数)
.then((res)=>{
// res即返回值
})
最后附上完备axios工具：
import axios, { AxiosError, AxiosResponse, InternalAxiosRequestConfig } from '@ohos/axios';import { promptAction } from '@kit.ArkUI';// 创建Axios实例
export const instance = axios.create({
// 请求基地址 替换为自己项目的请求基地址
baseURL: 'https://xxxxxxx',
});// 请求拦截器发请求之前进入这里
instance.interceptors.request.use((config: InternalAxiosRequestConfig) => {
// 这里可以对请求参数进行修改比如请求头自动注入token
return config;
}, (error: AxiosError) => {
return Promise.reject(error);
});// 响应拦截器instance.interceptors.response.use((response: AxiosResponse) => {// 响应成功进入这里// 这里根据自己业务码进行判断比如code为'ok'则返回数据否则弹出错误提示if (response.data.code ==='网络请求成功码') { return response.data.data;}// 提示错误信息msg字段根据自己服务端返回的字段进行修改promptAction.showToast({ message: response.data.msg });return Promise.reject(new Error(response.data.msg));}, (error: AxiosError) => {// 请求失败进入这里// 这里可以根据自己的业务逻辑进行修改 比如判断错误码进行错误提示 401 404 等等const res = error.response?.data as object;if (res) { // 提示服务端返回的错误信息 promptAction.showToast({ message: res["msg"] });}return Promise.reject(error);});export class RequestAxios { // get请求static get<T>(url: string, params?: object): Promise<T> { return instance.get<null, T>(url, { params });} // post请求static post<T>(url: string, data?: object): Promise<T> { return instance.post<null, T>(url, data);} // delete请求static delete<T>(url: string, data?: object): Promise<T> { return instance.delete<null, T>(url, { data });}// put请求static put<T>(url: string, data?: object): Promise<T> { return instance.put<null, T>(url, data);}}
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]