HarmonyOS 鸿蒙应用开发 (七、HTTP网络组件 axios 介绍及封装使用)

目录

axios介绍

在harmonyos也能用axios?

axios网络请求库的使用

下载安装

开通权限

简单使用

axios模块封装及使用

客户端封装

封装后使用

官方@ohos/net.http 介绍

官方简易封装

官方http模块封装使用

写在最后

其他资源

axios介绍

axios 是一个著名的基于 javascript 的开源库，用于浏览器和 node.js 等环境中发送 http 请求。它支持 promise api，并且可以处理 xmlhttprequests 和 fetch api 背后的复杂性，为开发者提供了一种简洁易用的方式来实现 ajax（asynchronous javascript and xml）请求。

最早浏览器页面在向服务器请求数据，返回的是整个页面的数据，页面会强制刷新一下，这对于用户来讲并不是很友好。我们只想修改页面的部分数据，但是从服务器端返回的却是整个页面。于是出现一种新的技术，异步网络请求ajax(asynchronous javascript and xml)，它能与后台服务器进行少量数据交换，使网页实现异步局部更新。

由于浏览器中原生的xmlhttprequest api较难使用，于是又有了更多用于实现ajax的javascript框架出现，比如我们熟悉的jquery、dojo、yui等等。而如今一个叫axios的轻量框架逐步脱颖而出，它本质上也是对原生xhr的封装，只不过它是promise的实现版本，符合最新的es规范。

主要特性：

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

在harmonyos也能用axios?

在harmonyos中，官方提供了@ohos/net.http 模块进行网络访问。它是官方提供的基础http数据请求能力库，直接提供了对http协议的底层支持，开发者可以通过这个模块发送get、post等http请求，并处理响应结果。由于它是系统级别的api，其优点在于性能和兼容性得到保证，适用于基本的http通信需求。

虽然官方提供了@ohos/net.http 模块进行网络访问，但是axios库可以看作是一种功能更强大和易用的封装，且接口使用上更符合前端开发者的惯用习惯。axios库 以其强大的功能性和易用性成为现代javascript应用中非常流行的http客户端库。

直接使用原始的axios库肯定是不行，在harmonyos中的axios库，模块名字是@ohos/axios。

@ohos/axios第三方库是基于axios库进行适配，使其可以运行在openharmony中的一个发送网络请求库，并且本库沿用axios库现有用法和特性，使其更加适合于鸿蒙项目的开发。

@ohos/axios 模块可以理解为是对官方http api的一个封装或者扩展，它提供了一种更高级别的抽象和便利性，可能包含了更多的功能特性，比如自动转换数据格式、错误处理、拦截器机制以及对于promise的良好支持等，这些都是为了简化开发流程，提高开发效率。在实际开发应用时，如果需要更丰富和灵活的网络请求管理功能，通常推荐使用 @ohos/axios 这样的封装库。

通过对@ohos/axis源码的查看，发现也确实是使用ohos.net.http模块，对原库v1.3.4版本进行适配，使其可以应用在harmonyos上，并沿用其现有用法和特性。

• http 请求
• promise api
• request 和 response 拦截器
• 转换 request 和 response 的 data 数据
• 自动转换 json data 数据

ohos/axios 模块源码：

openharmony-sig/ohos_axios

axios网络请求库的使用

接口列表

接口	参数	功能
axios(config)	config：请求配置	发送请求
axios.create(config)	config：请求配置	创建实例
axios.request(config)	config：请求配置	发送请求
axios.get(url[, config])	url：请求地址 config：请求配置	发送get请求
axios.delete(url[, config])	url：请求地址 config：请求配置	发送delete请求
axios.post(url[, data[, config]])	url：请求地址 data：发送请求体数据 config：请求配置	发送post请求
axios.put(url[, data[, config]])	url：请求地址 data：发送请求体数据 config：请求配置	发送put请求

属性列表

属性	描述
axios.defaults['xxx']	默认设置 。值为请求配置 config 中的配置项 例如 axios.defaults.headers 获取头部信息
axios.interceptors	拦截器。参考 拦截器 的使用

下载安装

• 方式一：在terminal窗口中，执行如下命令安装三方包，deveco studio会自动在工程的oh-package.json5中自动添加三方包依赖。

ohpm install @ohos/axis

如果提示无ohpm命令，则是环境变量没有配置。 点击查看详细配置。

• 方式二：在工程的oh-package.json5中设置三方包依赖，配置示例如下：

"dependencies": { "@ohos/axis": "^2.1.0"}

开通权限

 需要配置 ohos.permission.internet权限。在工程目录entry\src\main中找到module.json5文件，配置网络请求权限。

{
  "module": {
    "name": "entry",
    "type": "entry",
    "description": "$string:module_desc",
    "mainelement": "entryability",
    "devicetypes": [
      "phone"
    ],
    "requestpermissions": [
      {
        "name": "ohos.permission.internet"
      }
    ]
  }
}

简单使用

import axios from '@ohos/axios'
//创建axios的实例
const instance = axios.create({
  baseurl: "http://xx.xx.xx.xx", //基路径，要看api帮助文档的特征来确定基路径
  timeout: 5000, //请求超时的时间
  headers: {
    "content-type": "application/json"
  }
})
 
//响应拦截器，通过响应拦截器进一步对返回的数据做处理
instance.interceptors.response.use((response) => {
  //只返回接口有数据的结果
  if (200 === response.status) {
    return response.data; //接口返回的数据
  }
  return promise.reject(response); //表示请求有错，交给catch来处理结构
}, err => {
  return promise.reject(err)
})
 
/**
 * get请求
 * @param params = {} 查询参数
 * @returns
 */
export function httpget(url:string, params = {}) {
  return instance.get<any>(url, {
    params
  })
}
 
/**
 * post请求
 * @param data = {} 请求体数据
 * @returns
 */
export function httppost(url:string, data = {}) {
  return instance.post<any>(url, {
   data 
  })
}

axios模块封装及使用

axios模块封装：

//axioshttp.ets

import axios, {
  axiosinstance,
  axiosrequestconfig,
  axiosrequestheaders,
  axiosresponse,
  internalaxiosrequestconfig
} from "@ohos/axios";
import { logutils } from '../utils/logutils';


/**
 * 定义接口响应包装类
 */
export interface baseresponse {
  //wanandroid-api响应体
  errorcode: number
  errormsg: string
  //拓展xxx-api响应体
}

/**
 * 接口实现类包装，例如有其他业务可以再次继承实现xxxresponse
 */
export interface apiresponse<t = any> extends baseresponse {
  //wanandroid-api响应体
  data: t | any;
  //拓展xxx-api响应体
}

/**
 * 封装后，不支持传入拦截器
 * 需要自己定义接口继承 axiosrequestconfig类型
 * 从而支持传入拦截器，但拦截器选项应为可选属性
 * 之后请求实例传入的options为继承了axiosrequestconfig的自定义类型
 */
interface interceptorhooks {
  requestinterceptor?: (config: httprequestconfig) => promise<httprequestconfig>;
  requestinterceptorcatch?: (error: any) => any;
  responseinterceptor?: (response: axiosresponse) => axiosresponse | promise<axiosresponse>;
  responseinterceptorcatch?: (error: any) => any;
}

// @ts-ignore
interface httprequestconfig extends internalaxiosrequestconfig {
  showloading?: boolean; //是否展示请求loading
  checkresultcode?: boolean; //是否检验响应结果码
  checkloginstate?: boolean //校验用户登陆状态
  needjumptologin?: boolean //是否需要跳转到登陆页面
  interceptorhooks?: interceptorhooks;
  headers?: axiosrequestheaders
}


/**
 * 网络请求构造
 * 基于axios框架实现
 */
class axioshttprequest {
  config: httprequestconfig;
  interceptorhooks?: interceptorhooks;
  instance: axiosinstance;

  constructor(options: httprequestconfig) {
    this.config = options;
    this.interceptorhooks = options.interceptorhooks;
    this.instance = axios.create(options);
    this.setupinterceptor()
  }

  setupinterceptor(): void {
    this.instance.interceptors.request.use(
      //这里主要是高版本的axios中设置拦截器的时候里面的config属性必须是internalaxiosrequestconfig，但是internalaxiosrequestconfig里面的headers是必传，所以在实现的子类我设置成非必传会报错，加了个忽略注解
      // @ts-ignore
      this.interceptorhooks?.requestinterceptor,
      this.interceptorhooks?.requestinterceptorcatch,
    );
    this.instance.interceptors.response.use(
      this.interceptorhooks?.responseinterceptor,
      this.interceptorhooks?.responseinterceptorcatch,
    );
  }

  // 类型参数的作用，t决定axiosresponse实例中data的类型
  request<t = any>(config: httprequestconfig): promise<t> {
    return new promise<t>((resolve, reject) => {
      this.instance
        .request<any, t>(config)
        .then(res => {
          resolve(res);
        })
        .catch((err) => {
          logutils.error("网络请求request异常：", err.message)
          errorhandler(err)
          if (err) {
            reject(err);
          }
        });
    });
  }

  get<t = any>(config: httprequestconfig): promise<t> {
    return this.request({ ...config, method: 'get' });
  }

  post<t = any>(config: httprequestconfig): promise<t> {
    return this.request({ ...config, method: 'post' });
  }

  delete<t = any>(config: httprequestconfig): promise<t> {
    return this.request({ ...config, method: 'delete' });
  }

  patch<t = any>(config: httprequestconfig): promise<t> {
    return this.request({ ...config, method: 'patch' });
  }
}

export function errorhandler(error: any) {
  if (error instanceof axioserror) {
    showtoast(error.message)
  } else if (error != undefined && error.response != undefined && error.response.status) {
    switch (error.response.status) {
    // 401: 未登录
    // 未登录则跳转登录页面，并携带当前页面的路径
    // 在登录成功后返回当前页面，这一步需要在登录页操作。
      case 401:

        break;
    // 403 token过期
    // 登录过期对用户进行提示
    // 清除本地token和清空vuex中token对象
    // 跳转登录页面
      case 403:
        showtoast("登录过期，请重新登录")
      // 清除token
      // localstorage.removeitem('token');
        break;
    // 404请求不存在
      case 404:
        showtoast("网络请求不存在")
        break;

    // 其他错误，直接抛出错误提示
      default:
        showtoast(error.response.data.message)
    }

  }
}

export default axioshttprequest

客户端封装

//axiosrequest.ets
import {axioshttprequest,errorhandler} from './axioshttp'
import { axioserror, axiosrequestheaders } from '@ohos/axios';
import { logutils } from '../utils/logutils';
import showtoast from '../utils/toastutils';
import { hideloadingdialog, showloadingdialog } from '../utils/dialogutils';
import { storageutils } from '../utils/storageutils';
import { storagekeys } from '../constants/storagekeys';
import { jsonutils } from '../utils/jsonutils';
import { router } from '../route/router';
import { routepath } from '../route/routepath';

/**
 * axios请求客户端创建
 */
const axiosclient = new axioshttprequest({
  baseurl: "/api",
  timeout: 10 * 1000,
  checkresultcode: false,
  headers: {
    'content-type': 'application/json'
  } as axiosrequestheaders,
  interceptorhooks: {
    requestinterceptor: async (config) => {
      // 在发送请求之前做一些处理，例如打印请求信息
      logutils.debug('网络请求request 请求方法:', `${config.method}`);
      logutils.debug('网络请求request 请求链接:', `${config.url}`);
      logutils.debug('网络请求request params:', `\n${jsonutils.stringify(config.params)}`);
      logutils.debug('网络请求request data:', `${jsonutils.stringify(config.data)}`);
      axiosclient.config.showloading = config.showloading
      if (config.showloading) {
        showloadingdialog("加载中...")
      }
      if (config.checkloginstate) {
        let haslogin = await storageutils.get(storagekeys.user_login, false)
        logutils.debug('网络请求request 登录状态校验>>>', `${haslogin.tostring()}`);
        if (haslogin) {
          return config
        } else {
          if (config.needjumptologin) {
            router.push(routepath.testpage)
          }
          throw new axioserror("请登录")
        }
      }
      return config;
    },
    requestinterceptorcatch: (err) => {
      logutils.error("网络请求requesterror", err.tostring())
      if (axiosclient.config.showloading) {
        hideloadingdialog()
      }
      return err;
    },
    responseinterceptor: (response) => {
      //优先执行自己的请求响应拦截器，在执行通用请求request的
      if (axiosclient.config.showloading) {
        hideloadingdialog()
      }
      logutils.debug('网络请求响应response:', `\n${jsonutils.stringify(response.data)}`);
      if (response.status === 200) {
        // @ts-ignore
        const checkresultcode = response.config.checkresultcode
        if (checkresultcode && response.data.errorcode != 0) {
          showtoast(response.data.errormsg)
          return promise.reject(response)
        }
        return promise.resolve(response.data);
      } else {
        return promise.reject(response);
      }
    },
    responseinterceptorcatch: (error) => {
      if (axiosclient.config.showloading) {
        hideloadingdialog()
      }
      logutils.error("网络请求响应异常", error.tostring())
      errorhandler(error);
      return promise.reject(error);
    },
  }
});

export default axiosclient;

封装后使用

经过封装后，使用变得很简单了。示例如下：

import axiosclient from './axiosrequest'

let baseurl = "https://www.wanandroid.com/"

//返回数据结构定义
interface homemodelissuelist {
  releasetime: number;
  type: string;
  date: number;
  publishtime: number;
  count: number;
}

interface homemodel {
  issuelist: homemodelissuelist[];
  itemlist: homemodelissuelist[];
  nextpageurl: string;
  nextpublishtime: number;
  newestissuetype: string;
}

interface bannerdatamodeldata {
  desc: string;
  id: number;
  imagepath: string;
  isvisible: number;
  order: number;
  title: string;
  type: number;
  url: string;
}

/**
 * 请求首页数据-axios客户端请求
 * @param date
 * @returns
 */
export function gethomelistaxios(date: string = "") {
  return axiosclient.get<homemodel>({
    url: baseurl + "api/v2/feed",
    params: { "date": date },
    showloading: true
    // headers: { "accept": "application/json" } as axiosrequestheaders
  })
}

/**
 * 获取分类详情接口
 * @param id
 * @param start
 */
export function getcategorydetaillist(id: number, start: number) {
  return axiosclient.get<homemodel>(
    {
      url: baseurl + "api/v4/categories/videolist",
      params: {
        "id": id,
        "start": start,
        "udid": commonconstants.uuid,
        devicemodel: commonconstants.device_num
      }
    }
  )
}

/**
 * 获取wanandroid首页banner数据，测试校验api data：t泛型数据
 * @returns
 */
export function getwanandroidbanner() {
  return axiosclient.get<apiresponse<bannerdatamodeldata[]>>(
    {
      url: wanandroidurl + "/banner/json",
      checkresultcode: true,
      showloading: true
    }
  )
}

官方@ohos/net.http 介绍

在harmonyos（openharmony）中，@ohos/net.http 是官方提供的一个用于进行http通信的基础模块。开发者可以利用这个模块发送和接收http请求与响应，实现应用程序与服务器之间的数据交互。

文档中心--http数据请求

官方简易封装

@ohos/net.http模块直接使用起来不太友好，简易封装如下：

//http.ets
/**
 * 定义接口响应包装类
 */
import http from '@ohos.net.http';

export interface baseresponse {
  //wanandroid-api响应体
  errorcode: number
  errormsg: string
  //拓展xxx-api响应体
}

/**
 * 接口实现类包装，例如有其他业务可以再次继承实现xxxresponse
 */
export interface apiresponse<t = any> extends baseresponse {
  //wanandroid-api响应体
  data: t | any;
  //拓展xxx-api响应体
}

interface httprequestconfig extends http.httprequestoptions {
  showloading?: boolean; //是否展示请求loading
  checkresultcode?: boolean; //是否检验响应结果码
  checkloginstate?: boolean //校验用户登陆状态
  needjumptologin?: boolean //是否需要跳转到登陆页面
  url?: string, //请求网络链接
}


/**
 * 网络请求构造器
 * 基于鸿蒙默认的http框架实现
 */
class httpbuilder {
  httpclient: http.httprequest
  config: httprequestconfig

  constructor(options: httprequestconfig) {
    this.httpclient = http.createhttp()
    this.config = options
    this.setupinterceptor()
  }
  /**
   * 配置属性拦截器
   */
  setupinterceptor() {

  }

  request<t = any>(config: httprequestconfig): promise<t> {
    return new promise<t>((resolve, reject) => {
      this.httpclient.request(
        config.url,
        config,
        (error, data) => {
          if (!error) {
            resolve(data.result as t);
          } else {
            reject(error)
          }
          // 当该请求使用完毕时，调用destroy方法主动销毁x
          this.httpclient.destroy()
        }
      )
    })
  }

  get<t = any>(config: httprequestconfig): promise<t> {
    return this.request({ ...config, method: http.requestmethod.get })
  }

  post<t = any>(config: httprequestconfig): promise<t> {
    return this.request({ ...config, method: http.requestmethod.post })
  }
}

export default httpbuilder

官方http模块封装使用

import http from '@ohos.net.http';
import showtoast from '../utils/toastutils';
import httpbuilder from './http';

//接口发送超时
const read_timeout = 100000
//接口读取超时
const connect_timeout = 100000

let baseurl = "https://www.wanandroid.com/"

const httpclient = new httpbuilder({
  readtimeout: read_timeout,
  connecttimeout: connect_timeout
})

//返回数据结构定义
interface homemodelissuelist {
  releasetime: number;
  type: string;
  date: number;
  publishtime: number;
  count: number;
}

interface homemodel {
  issuelist: homemodelissuelist[];
  itemlist: homemodelissuelist[];
  nextpageurl: string;
  nextpublishtime: number;
  newestissuetype: string;
}

/**
 * 请求数据--系统http请求
 * @param date
 * @returns
 */
export function gethomelist(date: string = "") {
  return httpclient.get<homemodel>({
    url: baseurl + "api/v2/feed",
    extradata: { "date": date }
  })
}

写在最后

• 如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
• 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
• 关注博主，同时可以期待后续文章ing🚀，不定期分享原创知识。
• 想要获取更多完整鸿蒙最新vip学习资料，请关注猫哥公众号【猫青年】，回复“鸿蒙”获取

其他资源

太硬核！为什么一定要学习鸿蒙harmonyos系统开发？-csdn博客

鸿蒙harmony应用开发，一起来写一个“遥遥领先”的开眼app_开眼api-csdn博客

鸿蒙harmonyos开发框架—学习arkts语言（状态管理 一）_鸿蒙os appstorage @storageprop @watch-csdn博客

文档中心--http数据请求

yang/ohos_axios

网络组件axios可以在openharmony上使用了_@ohos/axios-csdn博客

openharmony-sig/ohos_axios

typescript利用ts封装axios实战_编程网

ts 封装 axios 技巧：充分利用类型检查与提示 - 掘金