深入浅出ArkTS开发指南之调用接口将 json 对象渲染到界面

大家好，我是全栈的峰哥，独立开发者，相关问题可以加v:2588234，联系我一起沟通

---

今天主要给大家带来通过调用接口，通过返回参数转换成我们需要的对象，并通过状态管理，渲染到界面上，主要案例是在首页需要调用轮播图接口list，并在首页上能展示轮播图

定义实体

首选，我们需要先定义接口返回的json，参考如下伪代码：

{
    "code":0,
    "data":[
        {
            "id":1,
            "url":"轮播图 URL",
            "title":"轮播图标题"
        }
    ]
}

通过转化后得到了两个实体

export class BannerModel{
 code: number = 0;
 data: BannerData[] = [];
}

@ObservedV2
export class BannerData{
 id: number = 0;
 url: string = "";
 title: string = "";
}

定义组件

其次，我们首页代码中定义 swiper 组件，用于渲染轮播图，当中相关的参数需要大家自行到官网查阅，包括swiper 组件的相关属性，怎么使用 ForEach 进行循环渲染。

@Entry
@ComponentV2
struct MainPage {
    private swiperController: SwiperController = new SwiperController();
    @Local bannerList: BannerData [] = [];
  
    build() {
        Swiper(this.swiperController) {
          ForEach(this.bannerList, (item: BannerData) => {
            Image(item.url)
              .width(400)
              .height(400)
          }, (item: BannerData) => item.id.toString())
        }
        .interval(3000)
        .itemSpace(0)
        .indicator(false)
        .padding(20)
    }
}

获取数据并转化成对象

既然已经有了组件，我们如何获取json数据并将数据转化成我们想要的实体对象呢，首选我们需要定义一个方法getBannerList，并在 MainPage 中增加aboutToAppear方法，然后在aboutToAppear方法增加调用getBannerList，而getBannerList就是我们本次的主角，下面我们来看下代码：

async aboutToAppear() {
  await this.getBannerList();
}

private async getBannerList() {
  let httpRequest = http.createHttp();
  httpRequest.request(
    'https://www.xxx.com/api/banner',
    {
      method: http.RequestMethod.POST,
      header: {
        'Content-Type': 'application/json'
      }
    }, (err, data: http.HttpResponse) => {
    if (err) {
      httpRequest.destroy();
      return;
    }
    let result: BannerModel = JSON.parse(data.result.toString());
    if (result.code == 1) {
      result.data.forEach((item: BannerData) => {
        this.bannerList.push(item);
      })
    }
    httpRequest.destroy();
  }
  );
}

其中注意到对data.result进行转化成BannerModel对象，这样我们就可以直接将数据进行 push 到bannerList中。
这里有个细节点就是状态管理，官网其实有 V1 和 V2 两个版本的状态管理，这里我选择了使用 V2 的状态管理，大家可以根据具体情况做出选择。基本上按照上面的方法就可以实现一个查询接口并渲染到界面了。