鸿蒙 HarmonyOS axios封装

✍️作者简介：小北编程（专注于HarmonyOS、Android、Java、Web、TCP/IP等技术方向）
🐳博客主页： 开源中国、稀土掘金、51cto博客、博客园、知乎、简书、慕课网、CSDN
🔔如果文章对您有一定的帮助请👉关注✨、点赞👍、收藏📂、评论💬。
🔥如需转载请参考【转载须知】

Axios 库简介和在 HarmonyOS 中的应用

Axios 介绍

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

主要特性

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

在 HarmonyOS 中使用 Axios

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

@ohos/axios 模块

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

优点

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

可能的缺陷

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

源码

ohos/axios 模块源码：OpenHarmony-SIG/ohos_axios

封装

1.创建 BaseRequest.ts 文件

/**
 * @ProjectName : tyxw-arkui
 * @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 axiosAPIRequest = new Request({
  baseURL: '自己接口地址',
  timeout: 60000
})

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

2.创建 Api.ts 文件

import { axiosAPI } from '../BaseRequest'

export const getList = (id:string) =>{
  return axiosAPI.get<object>({url:'自己的请求地址',
    params:{
      "id":id
    }})
}

3. 调用

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


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

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

结论

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

👍 点赞，是我创作的动力！
⭐️ 收藏，是我努力的指引！
✏️ 评论，是我进步的宝藏！
💖 衷心感谢你的阅读以及支持！