HarmonyOS 接口请求网络数据返回后,如何通知页面UI数据刷新

MVVM框架下,如何将异步接口请求的网络数据通知UI组件进行更新?

HarmonyOS
2024-12-27 16:59:29
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
FengTianYa

若想请求网络数据返回后,如何通知页面UI数据刷新可以尝试以下方案:

1.首先编写http请求方法:

import http from '@ohos.net.http';
import MyData from '../MyData'
export default async function getHttpData(): Promise<MyData[]> {
  let dataList: MyData[] = []
  let httpRequest = http.createHttp();
  let response = httpRequest.request(
    // 填写HTTP请求的URL地址,可以带参数也可以不带参数。URL地址需要开发者自定义。请求的参数可以在extraData中指定
    "xxxxxx",
    {
      method: http.RequestMethod.GET, // 可选,默认为http.RequestMethod.GET
      // 开发者根据自身业务需要添加header字段
      header: {
        'Content-Type': 'application/json'
      },
      expectDataType: http.HttpDataType.STRING, // 可选,指定返回数据的类型
    }
  );
  // 使用await和async,等待请求完成处理数据后返回
  await response.then((data) => {
    if (data.responseCode == 200) {
      // 处理返回结果
      const response = data.result + "";
      const res = JSON.parse(response).data
      for (let i = 0; i < res.length; i++) {
        let item = res[i];
        dataList.push({
          id: item.id, content: item.content, createTime: item.createTime
        });
      }
    } else {
      // todo 请求失败,进行失败逻辑处理
    }
  }).catch((err) => {
    // todo 请求失败,进行失败逻辑处理
    console.info('error:' + JSON.stringify(err));
  })
  return dataList;
}

2.在ets文件中调用方法获取数据,注意由于封装getHttpData时为async方法,所以调用同样需要使用async方式调用,代码如下所示:

@State dataList: Array<MyData> = [{ id: "1", content: "content", createTime: "" }]
async aboutToAppear() {
  this.dataList = await getHttpData()
}

3.获取到dataList数组后,就可以通过ForEach循环显示组件和数据啦,到此就完成HTTP网络请求动态数据获取刷新UI界面。

分享
微博
QQ
微信
回复
2024-12-27 19:53:02
相关问题
HarmonyOS 接口请求数据处理
228浏览 • 1回复 待解决
HarmonyOS 如何发起网络接口请求
390浏览 • 1回复 待解决
HarmonyOS 网络接口请求查看功能
228浏览 • 1回复 待解决
HarmonyOS 更新数据UI刷新
362浏览 • 1回复 待解决
HarmonyOS rcp网络请求返回数据为null
500浏览 • 1回复 待解决
HarmonyOS axios接口请求
478浏览 • 1回复 待解决
HarmonyOS 接口请求处理
698浏览 • 1回复 待解决
网络请求数据的处理
798浏览 • 1回复 待解决
HarmonyOS UI和ViewModel如何刷新数据
298浏览 • 1回复 待解决
HarmonyOS 接口请求处理处理
470浏览 • 1回复 待解决
鸿蒙JS开发 接口请求loading??
6788浏览 • 1回复 已解决
鸿蒙JS开发 接口请求loading?
5972浏览 • 1回复 待解决
HarmonyOS 网络请求结果数据解析
280浏览 • 1回复 待解决