自学内容网 自学内容网

八、鸿蒙开发-网络请求、应用级状态管理

提示:本文根据b站尚硅谷2024最新鸿蒙开发HarmonyOS4.0+鸿蒙NEXT星河版零基础教程课整理

链接指引 => 尚硅谷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

1111

1.2.2 第二步:配置环境变量

将上述目录添加到Path环境变量
222

完成上述环境变量的配置之后,便可在任意目录下执行ohpm命令了。

1.3 安装axios

点击Deveco Studio底部的Terminal选项卡,启动终端
333
之后在终端执行如下命令即可

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的返回值类型均为PromisePromiseJavaScript中用于表示异步操作结果的对象,若操作成功,其中会包含具体结果,若操作失败,其会包含错误的原因。在实际应用中,开发者可以通过该对象的then()方法来处理操作成功时的结果,通过catch()方法来处理操作失败的情况,例如

get(...)
  .then((response:AxiosResponse)=>{
    //处理请求成功的结果
    ...
  })
  .catch((error:AxiosError)=>{
    //处理请求失败的错误
    ...
  })

AxiosResponseaxios定义的响应结果类型,默认情况下,通过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()方法执行前进行拦截,如下图所示

sddd
在拦截器中,开发者可以对请求的参数或者响应的结果做一些统一的处理,比如在请求拦截器中统一为所有请求增加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

LocalStorageAppStorage都是将状态数据保存在内存中,应用一旦退出,数据就会被清理,如果需要对数据进行持久化存储,就需要用到PersistentStorage,其用法如下
PersistentStorage可以将指定的AppStorage中的属性保存到磁盘中,并且PersistentStorageAppStorage的该属性会自动建立双向同步,开发者不能直接访问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)!