核心概念解析

@ohos.net.http 模块 是鸿蒙OS官方提供的用于发起网络请求的库。它遵循标准的HTTP协议，支持GET、POST等多种请求方法。

核心API流程：

1、创建HTTP客户端：使用http.createHttp()方法创建一个HttpRequest对象。这个对象代表了一个会话，可以用来发送一个或多个请求。

2、发起请求：调用httpRequest.request(url, options)方法发起请求。

• url: 请求的目标API地址。
• options: 一个可选的配置对象，可以设置请求方法（method）、请求头（header）、期望的响应类型（expectDataType）等。对于GET请求，method可以省略，默认为GET。

3、处理异步响应：request方法返回一个Promise<HttpResponse>。这意味着它是一个异步操作，我们可以使用async/await语法来优雅地处理它。

• 成功：Promise会resolve一个HttpResponse对象。我们主要关心它的responseCode（状态码，如200表示成功）和result（响应体，通常是JSON字符串）。
• 失败：Promise会reject一个错误对象，我们可以用try…catch来捕获。

4、状态管理：为了在UI上反映网络请求的不同阶段（加载中、成功、失败），我们需要定义几个@State变量来管理这些状态。

使用场景

比如实现一个“用户列表”页面：

在页面加载时：显示一个“加载中…”的动画或文本。

在请求成功时：隐藏加载动画，将从服务器获取的用户列表数据渲染成一个列表。

在请求失败时：隐藏加载动画，显示一个错误提示，如“网络请求失败，请稍后重试”，并提供一个“重试”按钮。

实现效果

完整代码

import http from '@ohos.net.http'; // 1. 导入http模块

// 定义用户数据接口
interface User {
  id: number;
  name: string;
  email: string;
  phone: string;
}

@Entry
@Component
struct Index {
  // 2. 定义管理网络请求状态的变量
  [@State](/user/State) isLoading: boolean = true; // 是否正在加载
  [@State](/user/State) errorMessage: string = ''; // 错误信息
  [@State](/user/State) userList: User[] = []; // 用户列表数据

  // 3. 在页面即将出现时，发起网络请求
  aboutToAppear() {
    this.fetchUserData();
  }

  // 封装网络请求逻辑
  private async fetchUserData() {
    this.isLoading = true; // 开始加载
    this.errorMessage = ''; // 清空旧错误信息

    try {
      // 创建一个HttpRequest对象
      let httpRequest = http.createHttp();

      // 发起请求
      let response = await httpRequest.request('https://jsonplaceholder.typicode.com/users', {
        expectDataType: http.HttpDataType.OBJECT, 
        header: {
          'Content-Type': 'application/json'
        }
      });

      // 检查响应状态码
      if (response.responseCode === 200 && response.result) {
        // 请求成功，更新数据
        this.userList = response.result as User[];
      } else {
        // 状态码非200，视为错误
        this.errorMessage = `请求失败，状态码: ${response.responseCode}`;
      }

      // 当请求结束后，销毁HttpRequest对象
      httpRequest.destroy();

    } catch (error) {
      // 捕获网络异常或其他错误
      console.error(`网络请求异常: ${error}`); 
      this.errorMessage = '网络请求失败，请检查网络连接';
    } finally {
      // 无论成功还是失败，都结束加载状态
      this.isLoading = false;
    }
  }

  build() {
    Column() {
      Text('用户列表')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 20, bottom: 20 })

      // 4. 根据不同状态渲染不同UI
      if (this.isLoading) {
        // 加载中状态
        LoadingProgress()
          .width(50)
          .height(50)
          .color('#007DFF')
        Text('正在加载数据...')
          .fontSize(16)
          .margin({ top: 10 })
      } else if (this.errorMessage) {
        // 错误状态
        Column({ space: 15 }) {
          Image($r('app.media.startIcon')) // 假设你有一个错误图标
            .width(60)
            .height(60)
          Text(this.errorMessage)
            .fontSize(16)
            .fontColor('#FF0000')
          Button('重试')
            .onClick(() => {
              this.fetchUserData(); // 点击重试
            })
        }
      } else {
        // 成功状态，渲染列表
        List({ space: 10 }) {
          ForEach(this.userList, (user: User) => {
            ListItem() {
              Row() {
                Column({ space: 5 }) {
                  Text(user.name)
                    .fontSize(18)
                    .fontWeight(FontWeight.Bold)
                  Text(user.email)
                    .fontSize(14)
                    .fontColor('#666666')
                }
                .alignItems(HorizontalAlign.Start)
                .layoutWeight(1)

                Text(user.phone)
                  .fontSize(14)
                  .fontColor('#999999')
              }
              .width('100%')
              .padding(15)
              .backgroundColor('#FFFFFF')
              .borderRadius(8)
            }
          })
        }
        .layoutWeight(1)
        .width('90%')
      }
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Start)
    .backgroundColor('#F1F3F5')
  }
}