八、鸿蒙开发-网络请求、应用级状态管理
提示:本文根据b站尚硅谷2024最新鸿蒙开发HarmonyOS4.0+鸿蒙NEXT星河版零基础教程课整理
文章目录
一、网络请求
鸿蒙系统提供了http
模块用于发送http
请求,另外,OpenHarmony
社区基于该模块将前端开发中常用的网络请求库axios
移植到了鸿蒙系统,因此我们也可以在鸿蒙系统中使用axios
发送http
请求,下面重点为大家介绍axios
的用法。
1.1 申请网络访问权限
默认情况下,应用只能访问有限的系统资源,若应用需要访问一些受保护的数据(照片、通讯录、位置等)或者功能(打电话、发短信、联网等),需要先申请相应的权限。鸿蒙系统的权限列表可参考官方文档。
权限的申请可分为如下两步
第一步:声明所需权限
开发者需要在entry/src/main/module.json5
文件中声明所需权限,具体格式如下
{
"module": {
......
"requestPermissions": [
{
"name": 'ohos.permission.******'
}
]
}
}
第二步:申请授权
- 如果目标权限的
授权方式
为system_grant
,开发者在完成第一步后,系统会在安装应用时自动为其进行权限预授予,开发者不需要做其他操作即可使用权限。 - 如果目标权限的
授权方式
为是user_grant
,开发者在完成第一步后,还需要在应用运行时弹窗请求用户授权,具体操作可参考官方文档。
由于网络访问权限的授权方式为system_grant
,因此只需完成第一步即可,具体内容如下
{
"module": {
......
"requestPermissions": [
{
"name": 'ohos.permission.INTERNET'
}
]
}
}
1.2 安装axios库
axios
相当于鸿蒙应用项目的一个第三方库,鸿蒙应用项目使用ohpm
管理(包括安装、卸载等)第三方库。除了axios
,还有很多其他的第三方库可供开发者使用,所有的第三方库都收录在链接中。
1.2.1 配置环境变量
为方便执行ohpm
命令,需先将ohpm
的安装目录添加到操作系统的Path
环境变量下,具体操作如下
第一步:查看ohpm
安装目录
打开Deveco Studio
设置界面,搜索ohpm
1.2.2 第二步:配置环境变量
将上述目录添加到Path
环境变量
完成上述环境变量的配置之后,便可在任意目录下执行ohpm
命令了。
1.3 安装axios
点击Deveco Studio
底部的Terminal
选项卡,启动终端
之后在终端执行如下命令即可
ohpm i @ohos/axios
1.3 axios快速入门
第一步:导入axios
import axios from '@ohos/axios'
第二步:创建axios实例
const instance = axios.create({
baseURL: 'http://<ip>:<port>',
timeout: 2000
})
注意:需要根据实际情况替换上述的ip地址和端口号
第三步:发送http请求
创建axios
实例后,便可通过该实例的api
来发送各种http
请求,常用的api
定义如下
api | 功能 |
---|---|
get(url, config?): Promise | 发送GET请求 |
delete(url, config?): Promise | 发送DELETE请求 |
post(url, data?, config?): Promise | 发送POST请求 |
put(url, data?, config?): Promise | 发送PUT请求 |
第四步:获取请求结果
上述api
的返回值类型均为Promise
,Promise
是JavaScript
中用于表示异步操作结果的对象,若操作成功,其中会包含具体结果,若操作失败,其会包含错误的原因。在实际应用中,开发者可以通过该对象的then()
方法来处理操作成功时的结果,通过catch()
方法来处理操作失败的情况,例如
get(...)
.then((response:AxiosResponse)=>{
//处理请求成功的结果
...
})
.catch((error:AxiosError)=>{
//处理请求失败的错误
...
})
AxiosResponse
是axios
定义的响应结果类型,默认情况下,通过axios
发送的所有请求,其成功的响应结果都是该类型。其包含的属性如下
{
//服务器返回的响应结果
data: {},
//服务器响应的 HTTP 状态码
status: 200,
//服务器响应的 HTTP 状态信息
statusText: 'OK',
// 服务器响应头
headers: {},
//axios请求的配置信息
config: {},
//生成此响应的请求信息
request: {}
}
因此,response.data
才是服务器返回的真实数据,具体处理逻辑如下
get(...)
.then((response:AxiosResponse)=>{
//获取服务器返回的数据
let data = response.data;
//处理服务器返回的数据
...
})
.catch((error:AxiosError)=>{
//处理请求失败的错误
...
})
1.4 axios拦截器
axios
可以分别为请求和响应配置拦截器,请求拦截器可在请求发送前进行拦截,响应拦截器可以在then()
或者catch()
方法执行前进行拦截,如下图所示
在拦截器中,开发者可以对请求的参数或者响应的结果做一些统一的处理,比如在请求拦截器中统一为所有请求增加token
这一Header
,在响应拦截器中统一处理错误响应。
拦截器的配置方式如下
请求拦截器
// 添加请求拦截器
instance.interceptors.request.use((config:InternalAxiosRequestConfig) => {
// 对请求数据做点什么
return config;
}, (error:AxiosError) => {
// 对请求错误做些什么
return Promise.reject(error);
});
响应拦截器
// 添加响应拦截器
instance.interceptors.response.use((response:AxiosResponse)=> {
// 对响应数据做点什么
return response;
}, (error:AxiosError)=> {
// 对响应错误做点什么
return Promise.reject(error);
});
二、应用级状态管理
第5章为大家介绍了一系列状态共享相关的装饰器(@State
、@Prop
、@Link
、@Provide
、@Consume
等),但是这些装饰器仅能在两个组件之间共享状态,如果开发者需要在一个页面内的所有组件中共享状态,或者是在多个页面之间共享状态,这些装饰器便不再适用了,此时我们需要的就是应用级状态管理功能。
2.1 LocalStorage
LocalStorage
用于存储页面级的状态数据,位于LocalStorage
中的状态数据可以在一个页面内的所有组件中共享,其用法如下
第一步:创建LocalStorage
实例,并初始化状态变量
let storage = new LocalStorage({ count: 0 });
第二步:将LocalStorage实例绑定到页面的入口组件
@Entry(storage)
@Component
struct Parent {
build(){
......
}
}
第三步:在页面内的组件访问LocalStorage
ArkTs
提供了两个装饰器用于访问LocalStorage
,分别是@LocalStorageProp
和@LocalStorageLink
,前者可以和LocalStorage
实现单向同步,后者可以和LocalStorage
实现双向同步,具体用法如下
父组件
let storage = new LocalStorage({ count: 0 });
@Entry(storage)
@Component
struct Parent {
//与storage中的count属性双向同步
@LocalStorageLink('count') count: number = 0;
build(){
Child()
}
}
子组件
@Component
struct Child {
//与storage中的count属性单向同步
@LocalStorageProp('count') count: number = 0;
build(){
...
}
}
2.2 AppStorage
AppStorage
用于存储应用级的状态数据,位于AppStorage
中的状态数据可以在整个应用的所有组件中共享,其用法如下
第一步:初始化状态变量
AppStorage.SetOrCreate('count', 0)
第二步:在整个应用内的组件中访问AppStorage
ArkTs
提供了两个装饰器用于访问AppStorage
实例,分别是@StorageProp
和@StorageLink
,前者可以和AppStorage
实现单向同步,后者可以和AppStorage
实现双向同步,具体用法如下
PageOne
AppStorage.SetOrCreate('count', 0)
@Entry
@Component
struct PageOne {
//与AppStorage中的count属性双向同步
@StorageLink('count') count: number = 0;
build(){
...
}
}
PageTwo
@Entry
@Component
struct PageTwo {
//与AppStorage中的count属性单向同步
@StorageProp('count') count: number = 0;
build(){
...
}
}
2.3 PersistentStorage
LocalStorage
和AppStorage
都是将状态数据保存在内存中,应用一旦退出,数据就会被清理,如果需要对数据进行持久化存储,就需要用到PersistentStorage
,其用法如下
PersistentStorage
可以将指定的AppStorage
中的属性保存到磁盘中,并且PersistentStorage
和AppStorage
的该属性会自动建立双向同步,开发者不能直接访问PersistentStorage
中的属性,而只能通过AppStorage
进行访问,具体操作如下
PersistentStorage.PersistProp('count', 0);
@Entry
@Component
struct Index {
@StorageLink('count') count: number = 0
build() {
Row() {
Column() {
// 应用退出时会保存当前结果。重新启动后,会显示上一次的保存结果
Text(`${this.count}`)
.onClick(() => {
this.count += 1;
})
}
}
}
}
原文地址:https://blog.csdn.net/weixin_48963720/article/details/143822195
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!