12.6：HttpClient

HttpClient (opens new window) 是为 OpenHarmony 打造的一个高效的网络请求库，它可以让内容加载更快并节省流量，它以 OkHttp 为基础，整合了 android-async-http，AutobahnAndroid，OkGo 等库的功能特性，致力于在 OpenHarmony 打造一款高效易用，功能全面的网络请求库。

12.6.1：安装HttpClient

进入项目下的 entry 目录，执行如下命令：

npm config set @ohos:registry=https://repo.harmonyos.com/npm/
npm install @ohos/httpclient --save

📢：DevEco Studio 的预览器暂时不支持网络请求，只能在模拟器或真机上进行。

12.6.2：使用HttpClient

1. 引入HttpClient模块

   import httpClient from '@ohos/httpclient'
   

2. 创建HttpClient实例

   import httpClient from '@ohos/httpclient'
   import TimeUnit from '@ohos/httpclient'
   
   let httpClientImpl = new httpClient.HttpClient.Builder()
     .setConnectTimeout(15, TimeUnit.TimeUnit.SECONDS)
     .setReadTimeout(15, TimeUnit.TimeUnit.SECONDS)
     .build();
   

   HttpClient 实例创建完后就可以通过它发起网络请求了。

   📢：一个 HttpClient 实例可以发起多个 http 请求，所以应用内创建一个 HttpClient 实例就可以了。

3. 发起Get请求

   let request = new httpClient.Request.Builder()
     .url("https://www.baidu.com")                       // 请求地址
     .method("GET")                                      // 请求方式
     .addHeader("Content-Type", "application/json")      // Header设置
     .params("testKey1", "testValue2")                   // 额外参数
     .build();
   
   httpClientImpl.newCall(request).enqueue((result) => {
     console.log("success: " + JSON.stringify(result))   // 成功回调
   }, (error) => {
     console.log("error: " + JSON.stringify(error))      // 失败回调
   })
   

4. 发起Post请求

   let body = {
     "userName": "OpenHarmony",
     "password": "OpenHarmony666"
   };
   
   let requestBody = httpClient.RequestBody.create(JSON.stringify(body));
   
   let request = new httpClient.Request.Builder()
     .url("https://www.baidu.com")
     .method('POST')
     .body(requestBody)
     .addHeader("Content-Type", "application/json")
     .params("testKey1", "testValue2")
     .build();
   
   httpClientImpl.newCall(request).enqueue((result) => {
     console.log("success: " + JSON.stringify(result))
   }, (error) => {
     console.log("error: " + JSON.stringify(error))
   })
   

5. 文件下载

   let request = new httpClient.Request.Builder()
     .url("https://www.baidu.com")
     .filePath(localPath)
     .download()
     .build();
   
   httpClientImpl.newCall(request).execute().then((downloadTask) => {
     downloadTask.on('complete', () => {
       console.log("complete");
     });
     downloadTask.on("progress", (err, receivedSize, totalSize) => {
       console.log("progress: " + receivedSize + ", totalSize: " + totalSize);
     });
   }).catch((error) => {
     console.log("error")
   })
   

   httpClient 的使用很简单，除了这些基本用法外，它还支持请求配置，Cookie 管理，自定义拦截器等，读者可参考官方文档：https://gitee.com/openharmony-tpc/httpclient (opens new window)。

12.6.3：HttpClient实战

我们通过 Gitee 开放的 API 来请求 OpenHarmony 组件下所有的开源项目，实现：

1. 在请求阶段弹 Loading 框
2. 请求成功列举出所有的项目名称

代码如下所示：

import httpClient from '@ohos/httpclient'
import TimeUnit from '@ohos/httpclient'

let httpClientImpl = new httpClient.HttpClient.Builder()
  .setConnectTimeout(15, TimeUnit.TimeUnit.SECONDS)
  .setReadTimeout(15, TimeUnit.TimeUnit.SECONDS)
  .build();

@CustomDialog struct LoadingDialog {

  private controller: CustomDialogController;

  build() {
    Column({space: 10}) {
      LoadingProgress()
        .size({width: 60, height: 60})

      Text("加载中...")
        .fontSize(25)
    }
    .width("60%")
    .padding({top: 10, bottom: 10})
    .backgroundColor(Color.White)
    .borderRadius(10)
  }
}

@Entry @Component struct HttpClientTest {

  controller: CustomDialogController = new CustomDialogController({
    builder: LoadingDialog(),
    cancel: () => {
      console.log("cancel")
    },
    autoCancel: false,
    customStyle: true,
    alignment: DialogAlignment.Center
  });

  @State data: Array<string> = new Array();

  build() {

    Column({space: 10}) {
      Button("读取OpenHarmony开源仓")
        .onClick(() => {
          this.controller.open();
          this.requestData();
        })

      if(this.data.length > 0) {
        List()
      }
    }
    .width('100%')
    .height('100%')
    .padding(10)
  }

  private requestData() {
    let request = new httpClient.Request.Builder()
      .url("https://gitee.com/api/v5/orgs/openharmony/repos")
      .method("GET")
      .addHeader("Content-Type", "application/json")
      .build();

    httpClientImpl.newCall(request).enqueue((result) => {
      console.log("success: " + JSON.stringify(result));
      
      // 数据解析...
      
      this.controller.close();
    }, (error) => {
      console.log("error: " + JSON.stringify(error))
    })
  }
}

样例运行结果如下图所示：

12.6.4：小结

本节简单介绍了开源库 HttpClient (opens new window) 的使用，读者可以参考官方指导文档，由于预览器不支持网络请求，笔者条件也有限，身边没有设备验证本节的样例，待笔者有条件后再把该样例补齐，也非常欢迎有条件的读者能帮笔者补齐该样例！

(adsbygoogle = window.adsbygoogle || []).push({});