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、POST、PUT、DELETE 请求
 * @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-data  upload
  FORM_DATA = "multipart/form-data;charset=UTF-8",
}

/**
 * baseUrl
 */
export enum BASEURL {
  baseUrl = 'http://xxxxxx'
}

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

import dataPreferences  from '@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的简单封装使用