注意：博主有个鸿蒙专栏，里面从上到下有关于鸿蒙next的教学文档，大家感兴趣可以学习下
如果大家觉得博主文章写的好的话，可以点下关注，博主会一直更新鸿蒙next相关知识
专栏地址: https://blog.csdn.net/qq_56760790/category_12794123.html
目录
[1. 网络管理-应用权限](#1. 网络管理-应用权限)
[1.1 概述](#1.1 概述)
[1.2 配置方式](#1.2 配置方式)
[1.3 用法](#1.3 用法)
[2. 网络管理-HTTP请求](#2. 网络管理-HTTP请求)
[2.1 概述](#2.1 概述)
[2.2 接口](#2.2 接口)
[2.3 开发步骤](#2.3 开发步骤)
[2.4 简单代码示例](#2.4 简单代码示例)
[3. 网络管理-第三方库axiso使用](#3. 网络管理-第三方库axiso使用)
[3.1 概述](#3.1 概述)
[3.2 主要特性](#3.2 主要特性)
[3.3 用法](#3.3 用法)
[3.3.1 安装axios依赖](#3.3.1 安装axios依赖)
[3.3.2 申请网络权限](#3.3.2 申请网络权限)
[3.3.3 直接使用](#3.3.3 直接使用)
[3.3.4 封装使用](#3.3.4 封装使用)
[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 开发步骤
- 从@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.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 主要特性
- 跨平台支持：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.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")
// 获取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%')
}
}