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

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

链接指引 => 尚硅谷2024最新鸿蒙开发HarmonyOS4.0+鸿蒙NEXT星河版零基础教程

文章目录

一、网络请求
- [1.1 申请网络访问权限](#1.1 申请网络访问权限)
- [1.2 安装axios库](#1.2 安装axios库)
- - [1.2.1 配置环境变量](#1.2.1 配置环境变量)
  - [1.2.2 第二步：配置环境变量](#1.2.2 第二步：配置环境变量)
  - [1.3 安装axios](#1.3 安装axios)
- [1.3 axios快速入门](#1.3 axios快速入门)
- [1.4 axios拦截器](#1.4 axios拦截器)
二、应用级状态管理
- [2.1 LocalStorage](#2.1 LocalStorage)
- [2.2 AppStorage](#2.2 AppStorage)
- [2.3 PersistentStorage](#2.3 PersistentStorage)

一、网络请求

鸿蒙系统提供了http模块用于发送http请求，另外，OpenHarmony社区基于该模块将前端开发中常用的网络请求库axios移植到了鸿蒙系统，因此我们也可以在鸿蒙系统中使用axios发送http请求，下面重点为大家介绍axios的用法。

1.1 申请网络访问权限

默认情况下，应用只能访问有限的系统资源，若应用需要访问一些受保护的数据（照片、通讯录、位置等）或者功能（打电话、发短信、联网等），需要先申请相应的权限。鸿蒙系统的权限列表可参考官方文档。

权限的申请可分为如下两步
第一步：声明所需权限

开发者需要在entry/src/main/module.json5文件中声明所需权限，具体格式如下

ts 复制代码

{
  "module": {
    ......
    "requestPermissions": [
      {
        "name": 'ohos.permission.******'
      }
    ]
  }
}

第二步：申请授权

如果目标权限的授权方式为system_grant，开发者在完成第一步后，系统会在安装应用时自动为其进行权限预授予，开发者不需要做其他操作即可使用权限。
如果目标权限的授权方式为是user_grant，开发者在完成第一步后，还需要在应用运行时弹窗请求用户授权，具体操作可参考官方文档。
由于网络访问权限的授权方式为system_grant，因此只需完成第一步即可，具体内容如下

ts 复制代码

{
  "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选项卡，启动终端

之后在终端执行如下命令即可

ts 复制代码

ohpm i @ohos/axios

1.3 axios快速入门

第一步：导入axios

ts 复制代码

import axios from '@ohos/axios'

第二步：创建axios实例

ts 复制代码

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()方法来处理操作失败的情况，例如

ts 复制代码

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

AxiosResponse是axios定义的响应结果类型，默认情况下，通过axios发送的所有请求，其成功的响应结果都是该类型。其包含的属性如下

ts 复制代码

{
  //服务器返回的响应结果
  data: {},

  //服务器响应的 HTTP 状态码
  status: 200,

  //服务器响应的 HTTP 状态信息
  statusText: 'OK',

  // 服务器响应头
  headers: {},

  //axios请求的配置信息
  config: {},
  
  //生成此响应的请求信息
  request: {}
}

因此，response.data才是服务器返回的真实数据，具体处理逻辑如下

ts 复制代码

get(...)
  .then((response:AxiosResponse)=>{
    //获取服务器返回的数据
    let data = response.data;
    //处理服务器返回的数据
    ...
  })
  .catch((error:AxiosError)=>{
    //处理请求失败的错误
    ...
  })

1.4 axios拦截器

axios可以分别为请求和响应配置拦截器，请求拦截器可在请求发送前进行拦截，响应拦截器可以在then()或者catch()方法执行前进行拦截，如下图所示

在拦截器中，开发者可以对请求的参数或者响应的结果做一些统一的处理，比如在请求拦截器中统一为所有请求增加token这一Header，在响应拦截器中统一处理错误响应。

拦截器的配置方式如下

请求拦截器

ts 复制代码

// 添加请求拦截器
instance.interceptors.request.use((config:InternalAxiosRequestConfig) => {
  // 对请求数据做点什么
  return config;
}, (error:AxiosError) => {
  // 对请求错误做些什么
  return Promise.reject(error);
});

响应拦截器

ts 复制代码

// 添加响应拦截器
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实例，并初始化状态变量

ts 复制代码

let storage = new LocalStorage({ count: 0 });

第二步：将LocalStorage实例绑定到页面的入口组件

ts 复制代码

@Entry(storage)
@Component
struct Parent {
  build(){
    ......
  }
}

第三步：在页面内的组件访问LocalStorage
ArkTs提供了两个装饰器用于访问LocalStorage，分别是@LocalStorageProp和@LocalStorageLink，前者可以和LocalStorage实现单向同步，后者可以和LocalStorage实现双向同步，具体用法如下

父组件

ts 复制代码

let storage = new LocalStorage({ count: 0 });

@Entry(storage)
@Component
struct Parent {
  //与storage中的count属性双向同步
  @LocalStorageLink('count') count: number = 0;
  
  build(){
    Child()
  }
}

子组件

ts 复制代码

@Component
struct Child {

  //与storage中的count属性单向同步
  @LocalStorageProp('count') count: number = 0;

  build(){
    ...
  }
}

2.2 AppStorage

AppStorage用于存储应用级的状态数据，位于AppStorage中的状态数据可以在整个应用的所有组件中共享，其用法如下
第一步：初始化状态变量

ts 复制代码

AppStorage.SetOrCreate('count', 0)

第二步：在整个应用内的组件中访问AppStorage
ArkTs提供了两个装饰器用于访问AppStorage实例，分别是@StorageProp和@StorageLink，前者可以和AppStorage实现单向同步，后者可以和AppStorage实现双向同步，具体用法如下

PageOne

ts 复制代码

AppStorage.SetOrCreate('count', 0)

@Entry
@Component
struct PageOne {
  //与AppStorage中的count属性双向同步
  @StorageLink('count') count: number = 0;

  build(){
    ...
  }
}

PageTwo

ts 复制代码

@Entry
@Component
struct PageTwo {
  //与AppStorage中的count属性单向同步
  @StorageProp('count') count: number = 0;

  build(){
    ...
  }
}

2.3 PersistentStorage

LocalStorage和AppStorage都是将状态数据保存在内存中，应用一旦退出，数据就会被清理，如果需要对数据进行持久化存储，就需要用到PersistentStorage，其用法如下
PersistentStorage可以将指定的AppStorage中的属性保存到磁盘中，并且PersistentStorage和AppStorage的该属性会自动建立双向同步，开发者不能直接访问PersistentStorage中的属性，而只能通过AppStorage进行访问，具体操作如下

ts 复制代码

PersistentStorage.PersistProp('count', 0);

@Entry
@Component
struct Index {
  @StorageLink('count') count: number = 0

  build() {
    Row() {
      Column() {
        // 应用退出时会保存当前结果。重新启动后，会显示上一次的保存结果
        Text(`${this.count}`)
          .onClick(() => {
            this.count += 1;
          })
      }
    }
  }
}