HarmonyOS 鸿蒙 @ohos/axios的封装
@ohos/axios的先容@ohos/axios文档是类似于前端axios的http请求库，相对于官方提供的@ohos.net.http模块更好用
@ohos/axios依赖的安装
ohpm install @ohos/axios
@ohos/axios的封装
主要代码如下：
import axios, { AxiosInstance, AxiosResponse, AxiosError,AxiosRequestConfig } from '@ohos/axios';
import {ResultEnum,RequestEnum,BASEURL} from './httpEnum';
import {preferenceUtils} from'../common/preferenceUtils'
let context = getContext(this);
// 定义请求配置接口，支持动态传递 token
interface RequestData<P> {
url: string; // 请求的 URL
contentType?: string; // 请求的 Content-Type
token?: string; // 动态传递的 Token
params?: P; // 查询参数类型
method:RequestEnum // 请求方式
}
// 创建 Axios 实例
const instance: AxiosInstance = axios.create({
baseURL: BASEURL.baseUrl, // 基路径
timeout: 5000, // 超时时间
});
// 响应拦截器
instance.interceptors.response.use(
async(response: AxiosResponse) => {
// 处理响应数据
if (response.status === ResultEnum.SUCCESS) {
// token持久化处理
if(response.data.token){
preferenceUtils().set(context,'token_store','token',response.data.token);
}
return response.data; // 返回完整的响应数据
}
return Promise.reject(response); // 抛出错误交由 catch 处理
},
(error: AxiosError) => {
return Promise.reject(error);
}
);
/**
* GET 请求
* @param requestData 请求配置
* @returns 返回 Promise 对象，数据类型由泛型 T 指定
*/
export async function httpRequest<T, P> (requestData: RequestData<P>): Promise<T> {
// 动态设置 headers 的 Token
const headers: Record<string, string> = {};
if (requestData.token) {
// token处理
const token =preferenceUtils().get(context,'token_store','token') as string
token && (headers.Authorization = String(token));
}
// 请求参数格式
if(requestData.contentType){
headers['Content-Type'] = requestData.contentType;
}
const config:AxiosRequestConfig ={
url: requestData.url,
method: requestData.method,
headers,
};
if (requestData.method === RequestEnum.POST || requestData.method === RequestEnum.PUT) {
config.data = requestData.params; // POST 或 PUT 请求需要将参数放在 data 中
} else {
config.params = requestData.params; // GET 或 DELETE 请求需要将参数放在 params 中
}
return instance.request(config);
}
导入的httpEnum.ets文件的内容：
/**
* @description: Request result set
*/
export enum ResultEnum {
SUCCESS = 200,
ERROR = 1,
UNAUTHORIZED = 401,
}
/**
* @description: request method
*/
export enum RequestEnum {
GET = "get",
POST = "post",
PUT = "put",
DELETE = "delete",
}
/**
* @description:contentType
*/
export enum ContentTypeEnum {
// json
JSON = "application/json;charset=UTF-8",
// form-data qs
FORM_URLENCODED = "application/x-www-form-urlencoded;charset=UTF-8",
// form-dataupload
FORM_DATA = "multipart/form-data;charset=UTF-8",
}
/**
* baseUrl
*/
export enum BASEURL {
baseUrl = 'http://xxxxxx'
}
导入的preferenceUtils.ets是对preference做的一个简朴的封装具体代码如下：
import dataPreferencesfrom '@ohos.data.preferences';
import { Context } from '@kit.AbilityKit'
// 定义 PreferenceUtils 的接口类型
interface PreferenceUtils {
set: (
context: Context,
storeName: string,
key: string,
value: dataPreferences.ValueType
) => Promise<void>;
get: (
context: Context,
storeName: string,
key: string
) => dataPreferences.ValueType | null;
deleteFn: (
context: Context,
storeName: string,
key: string
) => Promise<void>;
}
// preferenceUtils 函数的实现
export function preferenceUtils(): PreferenceUtils {
const getStore = (context: Context, storeName: string) => {
return dataPreferences.getPreferencesSync(context, {
name: storeName,
});
};
const set = async (
context: Context,
storeName: string,
key: string,
value: dataPreferences.ValueType
) => {
const store = getStore(context, storeName);
store.putSync(key, value);
await store.flush(); // flush操作是将数据进行本地持久化
};
const get = (
context: Context,
storeName: string,
key: string
): dataPreferences.ValueType | null => {
const store = getStore(context, storeName);
return store.getSync(key, null);
};
const deleteFn = async (
context: Context,
storeName: string,
key: string
) => {
const store = getStore(context, storeName);
store.deleteSync(key);
await store.flush(); // 更新到磁盘
};
return {
set,
get,
deleteFn,
};
}
封装后使用
经过封装后使用起来就很简朴了:
import {httpRequest} from '../axios';
import {LoginDTO,Params} from './loginModel'
import {RequestEnum} from '../httpEnum'
enum Api {
Login = "/boss/user/validlogin", //登录
}
export const LoginService = (params: Params) => {
return httpRequest<LoginDTO,Params>({
method:RequestEnum.GET,
url:Api.Login,
params
});
};
其中loginModel.ets文件内容:
import {BasicResult} from './baseModel'
export interface Params{
username:string,
password:string
}
export interface Login {
id?: number;
username?: string;
password?: string;
}
export type LoginDTO = BasicResult<Login>
其中baseModel.ets文件内容
export interface BasicResult<T>{
msg:string;
code:number;
data:T;
token:string;
}
总结：本章先容了@ohos/axios的简朴封装使用
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]