1、网络图片加载

Image('https://file.atomgit.com/uploads/user/default.png').width('100%').height('30%')

2、安装axios库

ohpm install @ohos/axios

加载完毕后引入axios import axios, { AxiosResponse } from '@ohos/axios';

3、对http的请求概述

应用通过HTTP发起一个数据请求，支持常见的GET、POST、OPTIONS、HEAD、PUT、DELETE、TRACE、CONNECT方法。

HTTP数据请求功能主要由http模块提供。

使用该功能需要申请ohos.permission.INTERNET权限。

配置设置 , "requestPermissions": [ { "name": "ohos.permission.INTERNET" } ]

4、model模型创建

创建model文件夹 创建model.ets文件

  city:string;
  country:string;
  street:string;
}

export interface Users {
  address:AddRess;
  age:number;
  email:string;
  id:number;
  name:string;
  phone_numbers:string;
}

5、GET请求示例

引包操作

import { ApiResult } from '../model/ApiResult';
import { Users } from '../model/Users';
import { BusinessError } from '@kit.BasicServicesKit';

返回数据

@State info: Users[] | null = null; GET请求函数

 * 异步加载get请求
 */
async queryUsers() {
  try {
    const url = "http://39.107.126.100:5000/getInfo";
    // 返回数据类型
    const result: AxiosResponse<Users[]> =
      await axios.get<ApiResult<Users[]>, AxiosResponse<Users[]>, null>(url);
    this.info=result.data;
  } catch (error) {
    const err = error as BusinessError;
  }
}

6、POST请求示例

遍历展示数据

import { BusinessError } from '@kit.BasicServicesKit';
import { Developer } from '../model/Developer';
import { Recommend } from '../model/Recommend';

PersistentStorage.persistProp<string>("token", "");

@Entry
@Component
struct ShowIndex {
  scroller: Scroller = new Scroller();
  @State url: string = "https://openatom.atomgit.com/api/developer/recommend_list";
  @State info: Developer | null = null;

  build() {
    Scroll(this.scroller) {
      Column(){
        ForEach(this.info?.records,(rec:Recommend,index)=>{
          Column(){
            Text(rec.nickname)
            Image(rec.photo).width(50)
            Text(rec.userId)
            Text(rec.username)
            Text(rec.jump)
          }
        })
      }.width('100%')
    }
  }
  aboutToAppear(): void {
    this.getOrgList();
  }
  async getOrgList() {
    interface RequestParam {
      pageSize: number;
      pageNum: number;
      isSelected: number;
    }
    const param: RequestParam = {
      pageSize: 10,
      pageNum: 1,
      isSelected: 0
    };
    axios.post(this.url, param, {
      headers: {
        "X-ATOMGIT-POP-COMMUNITY": "openatom"
      }
    }).then((ret: AxiosResponse) => {
      this.info=ret.data["data"];
      console.log(`请求结果：${JSON.stringify(ret.data["data"])}`);
    }).catch((error: BusinessError) => {
      console.error(`请求异常：${JSON.stringify(error)}`);
    })
  }
}