HarmonyOS鸿蒙Next中动态数据Promise

HarmonyOS鸿蒙Next中动态数据Promise 指南：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/http-request

所有的任务都可以分为：

• 同步任务：立即执行的任务，同步任务一般会直接进入到主线程中执行
• 异步任务：异步执行的任务，比如ajax网络请求，setTimeout定时函数等

同步任务与异步任务的运行流程图：

promise是es6提出的一个概念，主要用来决绝异步回调的问题，是一个数据容器，保存了未来的一个结果。

promise本身是可以用来存放同步代码和异步代码

//resolve,reject  是两个函数
new Promise((resolve,reject)=>{

})

以上浅聊了下Promise，下面就通过Promise来实现http请求的封装。

为什么这么干？

在实际写代码的时候很多页面需要通过接口获取数据，那么就要写无数个http的请求，功能可以实现，但不够优雅。为了后期代码方便维护。以下讨论对http进行封装和对外暴露的一种设计方案。

封装工具

import { http } from "@kit.NetworkKit";
import { JSON } from "@kit.ArkTS";

// 这里的T是返回类型，K是参数类型
export function HtpRequest<T,K>(
  url: string,
  method: http.RequestMethod,
  requestData?: K) {
  const httpRequest = http.createHttp()
  // 在ArkTs中resolve，reject需要指明数据类型
  return new Promise<(value: Record<string,T>) => void, (value?: string) => void>((resolve, reject) => {
    // 监听响应头没啥用，可以删掉
    httpRequest.on('headersReceive', (header) => {
      console.info('header:' + JSON.stringify(header))
    })

    httpRequest.request(url, {
      method: method,
      header: {
        // 告诉后端你的数据是什么类型，text、json、二进制
        'Content-type': 'application/json'
      },
      // 通过JSON.stringify(requestData)把requestData转字符串。原始这个参数格式应该是'id=xx&name=xx'，为了避免复杂业务导致这个参数写的又臭又长，实现接收一个对象{id:xx,name:xx}
      extraData: JSON.stringify(requestData)|| '',
      connectTimeout: 6000,
      readTimeout: 6000
    }, (error: Error, data: http.HttpResponse) => {
      if (!error) {
        resolve((JSON.parse(data.result as string)) as Record<string,T>)
        // 当该请求使用完毕时，调用destroy方法主动销毁
        httpRequest.destroy()
      } else {
        reject(error.message)
        // 当该请求使用完毕时，调用destroy方法主动销毁
        httpRequest.destroy()
      }
    })
  })
}

这个方法写在shared模块中，对外暴露get post put delete请求

export function htpRequestGet<T, K>(url: string, requestData?: K): Promise<Record<string, T>> {
  return htpRequest<T, K>(url, http.RequestMethod.GET, requestData)
}

export function htpRequestPost<T, K>(url: string, requestData?: K): Promise<Record<string, T>> {
  return htpRequest<T, K>(url, http.RequestMethod.POST, requestData)
}

export function htpRequestPut<T, K>(url: string, requestData?: K): Promise<Record<string, T>> {
  return htpRequest<T, K>(url, http.RequestMethod.PUT, requestData)
}

export function htpRequestDelete<T, K>(url: string, requestData?: K): Promise<Record<string, T>> {
  return htpRequest<T, K>(url, http.RequestMethod.DELETE, requestData)
}

在index.ets中暴露

export { htpRequestGet,htpRequestPost,htpRequestPut,htpRequestDelete } from './src/main/ets/utils/HttpUtils'

在不同业务中使用网络请求，把所有请求封装到指定的页面，一个业务模块一个页面来管理

import { htpRequestGet } from "common";

// 获取轮播图
export function findSwiperDataApi<T,K>(){
  return htpRequestGet<T,K>('/home/swiperdata')
}
// 获取分类信息
export function  findCategoryDataApi<T,K>(){
  return htpRequestGet<T,K>('/home/catitems')
}
export function  findProductDataApi<T,K>(){
  return htpRequestGet<T,K>('/goods/search')
}
export function  findProductDataByIdApi<T,K>(params:K){
  return htpRequestGet<T,K>('/goods/searchById',params)
}

如何使用

aboutToAppear(): void {
    this.fetchSwiperData()
    this.fetchActivityData()
    this.fetchProductsData()
  }
  // 获取轮播图
   fetchSwiperData= async () =>{
    const res=await findSwiperDataApi<Array<SwiperDataModel>,null>()
    this.swiperData=res.message
  }

  fetchActivityData= async () =>{
    const res=await findCategoryDataApi<Array<ActivityDataModel>,null>()
    this.activityTitle=res.message
  }

  fetchProductsData= async () =>{
    const res=await findProductDataApi<Array<ProductDataModel>,null>()
    this.products=res.message
  }

这样做优势：页面完全没有请求代码。不管你的请求如何修改（请求路径请求参数）都不会影响页面的代码