鸿蒙NEXT开发-网络管理（基于最新api12稳定版）

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

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

专栏地址: https://blog.csdn.net/qq_56760790/category_12794123.html

目录

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 封装使用

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 开发步骤

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

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. 上传下载进度监控：支持监听文件上传和下载的进度事件

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@Componentstruct Index {build() {Column() {Text('测试axios').onClick(() => {axios.get('http://open.ibestservices.com/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")// 获取tokenif (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@Componentstruct Login {/*** 获取验证码*/getCode() {UserApi.getCode('你的手机号');}build() {Column() {Text('获取验证码').onClick(() => {this.getCode()})}.width('100%').height('100%')}}

4. 学习地址

 全网首发鸿蒙NEXT星河版零基础入门到实战，2024年最新版，企业级开发！视频陆续更新中！_哔哩哔哩_bilibili