鸿蒙NEXT开发-网络管理

 注意：博主有个鸿蒙专栏，里面从上到下有关于鸿蒙next的教学文档，大家感兴趣可以学习下

如果大家觉得博主文章写的好的话，可以点下关注，博主会一直更新鸿蒙next相关知识

目录

1. 网络管理-应用权限

1.1 概述

1.2 配置方式

1.3 用法

2. 网络管理-HTTP请求

2.1 概述

2.2 接口

2.3 开发步骤

2.4 简单代码示例

3. 网络管理-第三方库axiso使用

3.1 概述

3.2 主要特性

3.3 用法

3.3.1 安装axios依赖

3.3.2 申请网络权限

3.3.3 直接使用

3.3.4 封装使用

---

1. 网络管理-应用权限

1.1 概述

应用权限保护的对象可以分为数据和功能：

数据包含了个人数据（如照片、通讯录、日历、位置等）、设备数据（如设备标识、相机、麦克风等）、应用数据。功能则包括了设备功能（如打电话、发短信、联网等）、应用功能（如弹出悬浮框、创建快捷方式等）等。

根据授权方式的不同，权限类型可分为system_grant（系统授权）和user_grant（用户授权）。

应用在申请权限时，需要在项目的配置文件中，逐个声明需要的权限，否则应用将无法获取授权。

1.2 配置方式 配置文件权限声明向用户申请授权

1.3 用法

在module.json5文件中加上(也就是在module下面加上requestPermissions)

{ "module": { "name": "entry", "type": "entry", "description": "$string:module_desc", "mainElement": "EntryAbility", "deviceTypes": [ "phone", "tablet", "2in1" ], "requestPermissions":[ { "name" : "ohos.permission.INTERNET", "reason": "$string:reason", "usedScene": { "abilities": [ "FormAbility" ], "when":"inuse" } } ],

参考文档

文档中心

2. 网络管理-HTTP请求

2.1 概述

HTTP数据请求功能主要由http模块提供。

使用该功能需要申请ohos.permission.INTERNET权限。

2.2 接口

2.3 开发步骤

从@ohos.net.http中导入http命名空间。调用createHttp()方法，创建一个HttpRequest对象。调用该对象的on()方法，订阅http响应头事件，此接口会比request请求先返回。可以根据业务需要订阅此消息。调用该对象的request()方法，传入http请求的url地址和可选参数，发起网络请求。按照实际业务需要，解析返回结果。调用该对象的off()方法，取消订阅http响应头事件。当该请求使用完毕时，调用destroy()方法主动销毁。

2.4 简单代码示例 import http from '@ohos.net.http' @Entry @Component struct Index { build() { Column() { Text('测试http请求').onClick(()=>{ // 创建http对象 const httpRequest = http.createHttp() // 发送请求 httpRequest.request('http://open.ibestservices /basic-api/platformCms/cms/door/index/info?siteId=1') .then(res => { console.log('http测试' + JSON.stringify(res.result)) }) }) }.width('100%') .height('100%') } }

注意：console.log输出数据的大小不能超过1kb，要不然打印不出来

3. 网络管理-第三方库axiso使用

3.1 概述

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

3.2 主要特性

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

3.3 用法

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

3.3.1 安装axios依赖

打开编辑器里面终端，输入以下命令

ohpm install @ohos/axios

3.3.2 申请网络权限

要请求网络数据，首先需要申请权限，需要在module.json5文件中设置网络访问权限

在module.json5文件中加上(也就是在module下面加上requestPermissions)

{ "module": { "name": "entry", "type": "entry", "description": "$string:module_desc", "mainElement": "EntryAbility", "deviceTypes": [ "phone", "tablet", "2in1" ], "requestPermissions":[ { "name" : "ohos.permission.INTERNET", "reason": "$string:reason", "usedScene": { "abilities": [ "FormAbility" ], "when":"inuse" } } ],

3.3.3 直接使用

import axios, { AxiosError, AxiosResponse } from '@ohos/axios'; @Entry @Component struct Index { build() { Column() { Text('测试axios') .onClick(() => { axios.get('http://open.ibestservices /basic-api/platformCms/cms/door/index/info?siteId=1') .then((res: AxiosResponse) => { console.log("get - 返回数据:" + JSON.stringify(res)); }) .catch((err: AxiosError) => { console.log("result:" + err.message); }); }) }.width('100%') .height('100%') } }

3.3.4 封装使用

注意 baseURL: 'http://****:8099/' 里面的ip和端口要切换成对应自己的接口ip和端口

import axios, { AxiosError, AxiosResponse, InternalAxiosRequestConfig } from '@ohos/axios' import router from '@ohos.router'; import { promptAction } from '@kit.ArkUI'; /** * axios封装 */ const httpRequest = axios.create({ baseURL: 'http://****:8099/', headers: { 'Content-Type': 'application/json', "Channel": "B2B" }, method: "post", }) /** * 添加请求拦截器 */ httpRequest.interceptors.request.use((config: InternalAxiosRequestConfig) => { // 获取数据 const token: string | undefined = AppStorage.get("token") // 获取token if (token) { config.headers.Authorization = token } return config; }, (error: AxiosError) => { // 对请求错误做些什么 return Promise.reject(error); }); /** * 添加响应拦截器 */ httpRequest.interceptors.response.use((response: AxiosResponse) => { console.log('响应数据' + JSON.stringify(response)) // 判断响应状态码 if (response.status === 200) { // 请求成功 if (response.data.code === 200) { return Promise.resolve(response.data.data); } else if (response.data.code === 401) { clearLoginInfoAndGoLoginPage(); } } promptAction.showToast({ message: response.data.message || '请求错误', duration: 2000, }) return Promise.reject(response); }, (error: AxiosError) => { promptAction.showToast({ message: '网络错误，换个网络试试', duration: 2000, }) return Promise.reject(error); }); /** * 清除用户信息并跳到登录页面 */ async function clearLoginInfoAndGoLoginPage() { // 401错误 -> 清理用户信息，跳转到登录页 // 清理token，返回登录页 // 跳转首页路由 router.pushUrl({ url: 'pages/Login' }) } export default httpRequest;

import httpRequest from '../request/Request' /** * 用户接口 */ class UserApi { /** * 获取验证码接口 */ getCode = (data: string) => { return httpRequest.get('/v1/user/getCode?phone=' + data) } } const userApi = new UserApi(); export default userApi as UserApi;

注意：手机号记得填写真实的

import UserApi from '../api/UserApi'; @Entry @Component struct Login { /** * 获取验证码 */ getCode() { UserApi.getCode('你的手机号'); } build() { Column() { Text('获取验证码').onClick(() => { this.getCode() }) }.width('100%') .height('100%') } }