一、概论

      在鸿蒙应用开发中，网络请求与数据交互是连接前端与后端的桥梁。ArkUI-X框架提供了丰富的网络请求API，支持HTTP/HTTPS协议，并集成了华为云服务生态。本文将深入探讨 @ohos.net.http 模块的使用方法，结合实际案例展示如何实现高效的数据交互。

二、基础网络请求实现

1. GET请求

@Entry

@Component

struct GetRequestDemo {

  @State response: string = ''

  build() {

    Column() {

      Text('GET请求示例').fontSize(20).margin(20)

      Button('获取数据')

        .onClick(this.fetchData)

        .margin(20)

        .padding(15)

        .backgroundColor('#4ECDC4')

        .fontColor('#FFFFFF')

        .borderRadius(10)

      Text(this.response).fontSize(16).margin(20)

    }

    .width('90%')

    .height('100%')

    .justifyContent(FlexAlign.Center)

  }

  async fetchData() {

    const request = http.createHttp()

    request.request(

      'https://api.example.com/data',

      { method: http.RequestMethod.GET },

      (err, data) => {

        if (!err) {

          this.response = data.result

        } else {

          this.response = `请求失败：${err.message}`

        }

      }

    )

  }

}

2. POST请求

@Entry

@Component

struct PostRequestDemo {

  @State inputValue: string = ''

  @State result: string = ''

  build() {

    Column() {

      Input({ placeholder: '输入内容' })

        .onChange((value) => this.inputValue = value)

        .margin(20)

  

      Button('提交数据')

        .onClick(this.submitData)

        .margin(20)

      

      Text(this.result).fontSize(16)

    }

  }

  async submitData() {

    const request = http.createHttp()

    request.request(

      'https://api.example.com/submit',

      {

        method: http.RequestMethod.POST,

        header: { 'Content-Type': 'application/json' },

        body: JSON.stringify({ data: this.inputValue })

      },

      (err, data) => {

        if (!err) {

          this.result = `响应：${data.result}`

        }

      }

    )

  }

}

3. 华为云服务集成

import cloudDB from '@ohos.cloudDB'

@Entry

@Component

struct CloudDBExample {

  @State cloudData: string = ''

  build() {

    Column() {

      Button('查询云数据库')

        .onClick(this.queryCloudDB)

        .margin(20)

      

      Text(this.cloudData).fontSize(16)

    }

  }

  async queryCloudDB() {

    const service = await CloudDBService.getInstance()

    const result = await service.query('crops')

    this.cloudData = `查询结果：${JSON.stringify(result)}`

  }

}

三、高级网络请求技巧

1. 请求拦截器

class HttpInterceptor {

  static async intercept(request: http.HttpRequest): Promise<http.HttpRequest> {

    // 添加请求头

    request.header['Authorization'] = await getToken()

    

    // 添加日志

    console.log('请求拦截:', request.url)

    

    return request

  }

}

// 使用示例

const request = http.createHttp()

request.intercept(HttpInterceptor.intercept.bind(this))

2. 请求重试机制

async retryRequest(url: string, maxRetries: number = 3): Promise<string> {

  let retries = 0

  while (retries < maxRetries) {

    try {

      const data = await http.get(url)

      return data.result

    } catch (err) {

      retries++

      if (retries < maxRetries) {

        await sleep(1000 * retries)

      }

    }

  }

  throw new Error('请求失败')

}

3. 数据缓存策略

class CacheManager {

  static async getCache(key: string): Promise<string> {

    return storage.get(key)

  }

  static async setCache(key: string, value: string, ttl: number = 3600): Promise<void> {

    await storage.setOrCreate(key, value)

    await storage.setOrCreate(`${key}_expire`, Date.now() + ttl * 1000)

  }

}

四、常见问题解决方案

1. 超时处理

const request = http.createHttp()

request.request(

  'https://api.example.com/slow',

  {

    method: http.RequestMethod.GET,

    timeout: 5000 // 设置超时时间5秒

  },

  (err, data) => {

    if (err.code === http.RequestCode.TIMEOUT) {

      console.log('请求超时')

    }

  }

)

2. 数据解析错误

request.request(

  'https://api.example.com/data',

  { method: http.RequestMethod.GET },

  (err, data) => {

    if (!err) {

      try {

        const json = JSON.parse

   } catch (e) {
        console.error('解析失败:', e)
      }
    }
  }
)

 
3. 网络状态检测
 

import connectivity from '@ohos.connectivity'

function checkNetwork(): boolean {
  const networkInfo = connectivity.getNetworkInfo()
  return networkInfo.isAvailable
}

// 使用示例
if (checkNetwork()) {
  fetchData()
} else {
  message.showToast({ message: '网络不可用' })
}
 

 
五、最佳实践建议

 
1. 统一错误处理：

 
http.on('error', (err) => {
  message.showToast({ message: `网络错误：${err.message}` })
})

 
2. HTTPS强制要求：

// 在config.json中配置
{
  "reqPermissions": [
    {
      "name": "ohos.permission.INTERNET"
    }
  ]
}

 
3. 敏感数据加密：

 
import { encrypt } from '@ohos.security.cipher'

const encryptedData = encrypt('user_password', 'encryption_key')

 
 
六、高级案例：RESTful API封装

 
class APIClient {
  static async get<T>(url: string, params?: object): Promise<T> {
    const request = http.createHttp()
    const response = await request.get(url, {
      params: params,
      header: { 'Content-Type': 'application/json' }
    })
    return response.result
  }

  static async post<T>(url: string, data: object): Promise<T> {
    const request = http.createHttp()
    const response = await request.post(url, {
      body: JSON.stringify(data),
      header: { 'Content-Type': 'application/json' }
    })
    return response.result
  }
}

// 使用示例
APIClient.get<Crop[]>('/api/crops').then(data => {
  console.log('获取作物列表:', data)
})

注：适用版本Harmony OS NEXT/5.0/API12+