鸿蒙 HarmonyOS axios封装

一、Axios 介绍

Axios 是一个基于 JavaScript 的开源库，用于在浏览器和 Node.js 等环境中发送 HTTP 请求。它支持 Promise API，并简化了 XMLHttpRequests 和 Fetch API 的使用，为开发者提供了一种简洁易用的方式来实现 AJAX 请求。

二、主要特性

跨平台支持：Axios 在浏览器端通过 XMLHttpRequests 发送请求，在 Node.js 中则使用 http/https 模块发送请求。
Promise API：所有网络请求方法都返回 Promise 对象，使得异步编程更加简洁和易于处理。
拦截请求与响应：提供了全局和实例级别的请求和响应拦截器，可以在请求发送前或响应返回后进行预处理、错误处理或数据转换等操作。
取消请求：支持主动取消已发出但还未完成的 HTTP 请求。
自动转换 JSON 数据：Axios 自动将来自服务器的 JSON 数据转换为 JavaScript 对象，并自动序列化 POST、PUT 等请求体中的 JSON 数据为字符串发送。
配置灵活性：允许自定义请求头、URL 参数、超时时间等多种配置项，适用于不同场景下的 API 调用需求。
请求方法多样：支持所有标准的 HTTP 方法（GET、POST、PUT、DELETE 等），并对 PATCH 等非标准方法提供良好支持。
上传下载进度监控：支持监听文件上传和下载的进度事件。

在 HarmonyOS 中使用 Axios

在 HarmonyOS 中，官方提供了 @ohos/net.http 模块进行网络访问。虽然 @ohos/net.http 提供了基本的 HTTP 通信功能，但 Axios 作为功能更强大和易用的封装库，在 HarmonyOS 项目中也能发挥很大的作用。

@ohos/axios 模块

@ohos/axios 是基于 Axios 库进行适配的模块，使其可以运行在 OpenHarmony 中。它沿用了 Axios 库的现有用法和特性，为 HarmonyOS 项目的开发提供了便利。

优点

统一接口 ：@ohos/axios 保留了 Axios 的 API 接口，使前端开发者可以使用熟悉的方式进行网络请求。
丰富的功能：继承了 Axios 的所有特性，包括请求和响应拦截器、Promise 支持、自动 JSON 数据转换等。
简化开发流程：提供了更高级别的抽象和便利性，简化了网络请求的开发流程，提高了开发效率。

可能的缺陷

性能：由于 @ohos/axios 是对 @ohos/net.http 模块的封装，可能在某些情况下性能上会略逊于直接使用系统级别的 API。
兼容性 ：虽然 @ohos/axios 已适配 HarmonyOS，但在某些特定场景下可能仍存在一些兼容性问题。
额外依赖 ：引入 @ohos/axios 需要额外的库依赖，这可能会增加项目的复杂性和体积。

三、封装与源码

有兴趣的可以看看 ohos/axios 源码：OpenHarmony-SIG/ohos_axios

1.oh-package.json5 引用 `@ohos/axios`

// 根据需求选择自己的版本，TOC：版本提示2.2.2以下多文件上传不能正常使用
"@ohos/axios": "^2.2.2"

2.module.json5 添加网络权限

{

        "name": "ohos.permission.GET_NETWORK_INFO",
        "reason": "$string:network",// 用于网络请求
        "usedScene": {

          "abilities": [
            "EntryAbility"
          ],
          "when": "inuse"
        }
      }

string.json

{

      "name": "network",
      "value": "用于网络请求"
    }

3.创建 BaseRequest.ts 文件

/**
 * @ProjectName : 
 * @FileName : BaseRequest
 * @Author : 沫小北
 * @Time : 2024/7/22 15:00
 * @Description :
 */
// import axios from  '@ohos/axios'
import axios, {
    AxiosInstance, AxiosRequestConfig, AxiosResponse }  from '@ohos/axios'
import {
    promptAction } from '@kit.ArkUI'

class BaseRequest {

  instance: AxiosInstance;

  constructor(config: AxiosRequestConfig<AxiosResponse>) {

    this.instance = axios.create(config);

    // 请求拦截
    this.instance.interceptors.request.use((config) => {

        const token = '获取自己本地储存的token';
        if (token) {

          config.headers.token = token;
        }
        console.log('Request config', config);
        return config;
      }, (err) => {

        console.error('Request error', err);
        return Promise.reject(err);
      }
    );

    // 响应拦截
    this.instance.interceptors.response.use((response: AxiosResponse<any, any>) => {

        let data = response.data;
        console.log('Response data', data);
        if (typeof data === 'string') {

          data = JSON.parse(data.trim());
        }
        const {
    code, msg } = data;
        if (code === 200) {
     // 处理成功情况
            return response.data;
        } else if (code === 400) {
    // 处理错误码
          promptAction.showToast({

            message: msg
          });
          return Promise.reject(new Error(msg));
        } else if (code === 500) {

          promptAction.showToast({

            message: msg
          });
          return response.data;
        } else {
    // 处理其他错误码
          promptAction.showToast({

            message: msg
          });
          return Promise.reject(new Error(msg));
        }
      }, (err) => {

        console.error('Response error', err);
        return Promise.reject(err);
      }
    );
  }

  request<T = any>(config: AxiosRequestConfig): Promise<T> {

    console.log('Request config', config);
    return this.instance.request<any, T>(config);
  }

  get<T = any>(config: AxiosRequestConfig): Promise<T> {

    return this.request<T>({
    ...config, method: 'GET' });
  }

  post<T = any>(config: AxiosRequestConfig): Promise<T> {

    return this.request<T>({
    ...config, method: 'POST' });
  }
}

export const axiosAPI = new BaseRequest({

  baseURL: '自己接口地址',
  timeout: 60000
})

上面的是基本的封装，根据自己的需求处理成功和错误码！

4.创建 Api.ts 文件

import {
    axiosAPI } from '../BaseRequest'

export const getList = (id:string) =>{

  return axiosAPI.get<object>({
   url:'自己的请求地址',
    params:{

      "id":id
    }})
}

5. 调用

import {
    getList } from '../http/Api'

getList(this.data.id).then((res)=>{

              })

写到这里网络请求就封装完成了

结论

在 HarmonyOS 中使用 @ohos/axios 可以带来许多便利，尤其对于熟悉 Axios 的前端开发者而言。但在性能和兼容性方面可能需要进行额外的测试和优化，以确保在所有情况下都能达到最佳效果。总的来说，@ohos/axios 提供了一种更高级别的抽象和便利性，是开发 HarmonyOS 应用时一个值得考虑的选择。

作者：小北编程
链接：https://blog.csdn.net/u014696856/article/details/140610780

文章版权归作者所有，未经允许请勿转载。

THE END