HarmonyOS之axios封装

一、Axios 介绍

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

二、Axios特性

在 HarmonyOS 中，官方提供了 @ohos/net.http 模块进行网络访问。

🔈 1. 原生 http 请求：创建请求对象并获取结果（无参数的 get 请求）

// 创建请求对象
const req = http.createHttp()
// 获取结果
const res = await req.request('请求地址')

这是最基础简单的无参数 get 请求方式，通过http.createHttp()创建请求对象，然后使用request方法发送请求并等待响应。

🔈 2. 原生 http 请求：请求带有参数的请求

const res = req.request(`请求地址/path参数?xx=${encodeURIComponent(Query参数xx)}&yy=${encodeURIComponent(Query参数yy)}`,
  {
    // header参数
    header: {
      contentType: 'application/json',
      Authorization: 'xxxxx'
    },
    // body参数
    extraData: {},
    // 请求类型 默认http.RequestMethod.GET
    method: xxxx
  })
const data = res.result

当需要发送带有参数的请求时，可以通过拼接字符串的方式来构建请求地址。需要注意的是，对于中文等特殊字符，需要使用encodeURIComponent进行转码，以避免出现错误。同时，可以在请求配置中设置请求头（header）、请求体（extraData）和请求类型（method）等参数，后端返回的结果在res.result中获取。

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

跨平台支持：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 等非标准方法提供良好支持。
上传下载进度监控：支持监听文件上传和下载的进度事件。

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

🐼 优点

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

🐻 缺陷

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

三、封装与源码

1. 安装与卸载

在使用 axios 之前，需要先进行安装。前往OpenHarmony三方库中心仓，搜索“axios”会有axios库及基于axios封装的三方库。

然后在工程调试区“Terminal”安装

安装：ohpm i @ohos/axios
卸载：ohpm uninstall @ohos/axios

安装成功后，在oh-package.json5中就会看到安装的三方依赖

{
  "modelVersion": "5.0.0",
  "description": "Please describe the basic information.",
  "dependencies": {
    "@ohos/axios": "^2.2.4" // 根据需求选择自己的版本， 注意：版本提示2.2.2以下多文件上传不能正常使用
  },
  "devDependencies": {
    "@ohos/hypium": "1.0.19",
    "@ohos/hamock": "1.0.0"
  },
  "dynamicDependencies": {}
}

2. 添加网络权限

🦋 module.json5

  "requestPermissions": [
    {
      "name": "ohos.permission.GET_NETWORK_INFO",
      "reason": "$string:network",
      // 用于网络请求
      "usedScene": {
        "abilities": [
          "EntryAbility"
        ],
        "when": "inuse"
      }
    }
  ]

🦋 string.json

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

3. Axios请求使用

🔈：使用方式一（不建议）
直接调用get()，post(), 不建议使用，原因路径每次都是完整的，有重复性

//【导包：】
import axios from "@ohos/axios"

//get请求
axios.getUri()
//post请求
axios.post()
//put请求
axios.put()
//delete请求
axios.delete()

🔈：使用方式二（建议）
axios 封装网络请求工具

1. 定义公共部分

//1. 定义公共部分
const req = axios.create({
  baseURL: '主地址', // 公用部分的url
  //transformRequest:()=>{}, // 发送请求前的操作函数 (⚠️注意：知道别用出错有点难找)
  //transformResponse:()=>{}, // 接收结果  (⚠️注意：知道别用出错有点难找)
  timeout: 3 * 1000, // 请求超时时间
  headers: {} // 头部数据
})

2. 添加请求拦截器和响应拦截器

🌾：请求拦截器

req.interceptors.request.use((config: InternalAxiosRequestConfig) => {
  // 对请求数据做点什么  一般必须注入token(token存在时)
  const token = 'xxxxxxxxxxxxxxxxxxxx'
  if (token) {
    //1.方式一
    config.headers.Authorization = `Bearer ${token}`
    //2.方式二
    config.headers.token = token
  }
  return config;
}, (error: AxiosError) => {
  // 对请求错误做些什么
  return Promise.reject(error);
});

在请求拦截器中，通常会检查用户的 token（如果存在）并将其添加到请求头中。

🌾：响应拦截器

req.interceptors.response.use((response: AxiosResponse) => {
  // 对响应数据做点什么   网络通信成功  判断业务通信 处理事件
  return response;
},
  (error: AxiosError) => {
    // 对响应错误做点什么     网络通信失败 401为登录超时 处理事件
    if (error.response?.status == 401) {
      promptAction.showToast({ message: '登录超时，请重新登录!' })
      return Promise.reject()
    }
    promptAction.showToast({ message: error.message })
    return Promise.reject(error);
  });

响应拦截器用于处理网络通信成功和失败的情况，例如在登录超时（401 错误）时提示用户重新登录。

🌾：分开请求方式

export class HTTP {
  //Get请求
  static get<T>(url: string, params?: object): Promise<T> {
    return req.get<null, T>(url, { params })
  }

  //Post请求
  static post<T>(url: string, data?: object): Promise<T> {
    return req.post<null, T>(url, data)
  }

  //Put请求
  static put<T>(url: string, data?: object): Promise<T> {
    return req.put<null, T>(url, data)
  }

  //Delete请求
  static delete<T>(url: string, data?: object): Promise<T> {
    return req.delete<null, T>(url, { data })
  }
}

通过创建一个类来分别管理不同类型的请求方法（get、put、post、delete），方便在不同场景下调用， data为一些必要参数，可以理解为axios的参数对象中除了method和url。

🌾：封装为单个 API

export const getXxxAPI = async () => {
  return await HTTP.get<address[]>("/Xxx")
}

export const addXxxAPI = async (data:参数对象类型) => {
  return await HTTP.post<null>("Xxx", data)
}

export const delXxxAPI = async (id:string) => {
  return await HTTP.delete<null>(`Xxx${id}`)
}

export const updateXxxAPI = async (id:string,data:参数对象类型) => {
  return await HTTP.put<null>(`Xxx${id}`, data)
}

四、结论

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

posted on 2024-11-08 16:40 梁飞宇阅读(1170) 评论(0) 收藏举报

刷新页面返回顶部

梁飞宇