HarmonyOS 鸿蒙 @ohos/axios的封装

@ohos/axios的先容

@ohos/axios文档是类似于前端axios的http请求库，相对于官方提供的@ohos.net.http模块更好用
@ohos/axios依赖的安装

1. ohpm install @ohos/axios

复制代码

@ohos/axios的封装

主要代码如下：

1. import axios, { AxiosInstance, AxiosResponse, AxiosError,AxiosRequestConfig } from '@ohos/axios';
2. import {ResultEnum,RequestEnum,BASEURL} from './httpEnum';
3. import {preferenceUtils} from  '../common/preferenceUtils'
4. let context = getContext(this);
6. // 定义请求配置接口，支持动态传递 token
7. interface RequestData<P> {
8.   url: string; // 请求的 URL
9.   contentType?: string; // 请求的 Content-Type
10.   token?: string; // 动态传递的 Token
11.   params?: P; // 查询参数类型
12.   method:RequestEnum // 请求方式
13. }
15. // 创建 Axios 实例
16. const instance: AxiosInstance = axios.create({
17.   baseURL: BASEURL.baseUrl, // 基路径
18.   timeout: 5000, // 超时时间
19. });
21. // 响应拦截器
22. instance.interceptors.response.use(
23.   async(response: AxiosResponse) => {
24.     // 处理响应数据
25.     if (response.status === ResultEnum.SUCCESS) {
26.       // token持久化处理
27.       if(response.data.token){
28.         preferenceUtils().set(context,'token_store','token',response.data.token);
29.       }
30.       return response.data; // 返回完整的响应数据
31.     }
32.     return Promise.reject(response); // 抛出错误交由 catch 处理
33.   },
34.   (error: AxiosError) => {
35.     return Promise.reject(error);
36.   }
37. );
39. /**
40. * GET 请求
41. * @param requestData 请求配置
42. * @returns 返回 Promise 对象，数据类型由泛型 T 指定
43. */
44. export async function httpRequest<T, P> (requestData: RequestData<P>): Promise<T> {
45.   // 动态设置 headers 的 Token
46.   const headers: Record<string, string> = {};
47.   if (requestData.token) {
48.     // token处理
49.     const token =  preferenceUtils().get(context,'token_store','token') as string
50.     token && (headers.Authorization = String(token));
51.   }
52.   // 请求参数格式
53.   if(requestData.contentType){
54.     headers['Content-Type'] = requestData.contentType;
55.   }
56.   const config:AxiosRequestConfig ={
57.     url: requestData.url,
58.     method: requestData.method,
59.     headers,
60.   };
61.   if (requestData.method === RequestEnum.POST || requestData.method === RequestEnum.PUT) {
62.     config.data = requestData.params; // POST 或 PUT 请求需要将参数放在 data 中
63.   } else {
64.     config.params = requestData.params; // GET 或 DELETE 请求需要将参数放在 params 中
65.   }
66.   return instance.request(config);
67. }

复制代码

导入的httpEnum.ets文件的内容：

1. /**
2. * @description: Request result set
3. */
5. export enum ResultEnum {
6.   SUCCESS = 200,
7.   ERROR = 1,
8.   UNAUTHORIZED = 401,
9. }
11. /**
12. * @description: request method
13. */
14. export enum RequestEnum {
15.   GET = "get",
16.   POST = "post",
17.   PUT = "put",
18.   DELETE = "delete",
19. }
21. /**
22. * @description:  contentType
23. */
24. export enum ContentTypeEnum {
25.   // json
26.   JSON = "application/json;charset=UTF-8",
27.   // form-data qs
28.   FORM_URLENCODED = "application/x-www-form-urlencoded;charset=UTF-8",
29.   // form-data  upload
30.   FORM_DATA = "multipart/form-data;charset=UTF-8",
31. }
33. /**
34. * baseUrl
35. */
36. export enum BASEURL {
37.   baseUrl = 'http://xxxxxx'
38. }

复制代码

导入的preferenceUtils.ets是对preference做的一个简朴的封装具体代码如下：

1. import dataPreferences  from '@ohos.data.preferences';
2. import { Context } from '@kit.AbilityKit'
4. // 定义 PreferenceUtils 的接口类型
5. interface PreferenceUtils {
6.   set: (
7.     context: Context,
8.     storeName: string,
9.     key: string,
10.     value: dataPreferences.ValueType
11.   ) => Promise<void>;
12.   get: (
13.     context: Context,
14.     storeName: string,
15.     key: string
16.   ) => dataPreferences.ValueType | null;
17.   deleteFn: (
18.     context: Context,
19.     storeName: string,
20.     key: string
21.   ) => Promise<void>;
22. }
24. // preferenceUtils 函数的实现
25. export function preferenceUtils(): PreferenceUtils {
27.   const getStore = (context: Context, storeName: string) => {
28.     return dataPreferences.getPreferencesSync(context, {
29.       name: storeName,
30.     });
31.   };
33.   const set = async (
34.     context: Context,
35.     storeName: string,
36.     key: string,
37.     value: dataPreferences.ValueType
38.   ) => {
39.     const store = getStore(context, storeName);
40.     store.putSync(key, value);
41.     await store.flush(); // flush操作是将数据进行本地持久化
42.   };
44.   const get = (
45.     context: Context,
46.     storeName: string,
47.     key: string
48.   ): dataPreferences.ValueType | null => {
49.     const store = getStore(context, storeName);
50.     return store.getSync(key, null);
51.   };
53.   const deleteFn = async (
54.     context: Context,
55.     storeName: string,
56.     key: string
57.   ) => {
58.     const store = getStore(context, storeName);
59.     store.deleteSync(key);
60.     await store.flush(); // 更新到磁盘
61.   };
63.   return {
64.     set,
65.     get,
66.     deleteFn,
67.   };
68. }

复制代码

封装后使用

经过封装后使用起来就很简朴了:

1. import {httpRequest} from '../axios';
2. import {LoginDTO,Params} from './loginModel'
3. import {RequestEnum} from '../httpEnum'
5. enum Api {
6.   Login = "/boss/user/validlogin", //登录
7. }
9. export const LoginService = (params: Params) => {
10.   return httpRequest<LoginDTO,Params>({
11.     method:RequestEnum.GET,
12.     url:Api.Login,
13.     params
14.   });
15. };

复制代码

其中loginModel.ets文件内容:

1. import {BasicResult} from './baseModel'
3. export interface Params{
4.   username:string,
5.   password:string
6. }
8. export interface Login {
9.   id?: number;
10.   username?: string;
11.   password?: string;
12. }
13. export type LoginDTO = BasicResult<Login>

复制代码

其中baseModel.ets文件内容

1. export interface BasicResult<T>{
2.   msg:string;
3.   code:number;
4.   data:T;
5.   token:string;
6. }

复制代码

总结：本章先容了@ohos/axios的简朴封装使用

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。