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;
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.

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

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

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

分享
微博
QQ
微信
回复
2024-12-27 19:53:02


相关问题
HarmonyOS 接口请求数据处理
407浏览 • 1回复 待解决
HarmonyOS 如何发起网络接口请求
493浏览 • 1回复 待解决
HarmonyOS 网络接口请求查看功能
379浏览 • 1回复 待解决
HarmonyOS 更新数据UI刷新
552浏览 • 1回复 待解决
HarmonyOS rcp网络请求返回数据为null
635浏览 • 1回复 待解决
HarmonyOS axios接口请求
590浏览 • 1回复 待解决
HarmonyOS 接口请求处理
794浏览 • 1回复 待解决
网络请求数据的处理
896浏览 • 1回复 待解决
HarmonyOS 接口请求处理处理
583浏览 • 1回复 待解决
HarmonyOS UI和ViewModel如何刷新数据
380浏览 • 1回复 待解决
鸿蒙JS开发 接口请求loading??
6892浏览 • 1回复 已解决
鸿蒙JS开发 接口请求loading?
6075浏览 • 1回复 待解决
HarmonyOS 网络请求结果数据解析
424浏览 • 1回复 待解决