17.4：网络请求

实际项目开发中对于网络请求部分一般都是基于系统方法或者三方库封装一层请求 API ，后续整个项目的网络请求都是由这套 API 实现，这样做的好处是方便处理公共事件，比如添加公共参数，公共日志等，本节笔者简单介绍一下封装一版网络请求 API 。

17.4.1：定义请求API

项目中使用网络请求大多是 POST 、 GET 请求，也有少量的 HEAD 等其他请求，笔者暂时只演示 POST 和 GET 的定义和实现，定义一套公共接口 IHttpRequest ，代码如下所示：

import {RequestOptions} from "./RequestOptions"

export interface IHttpRequest {

  getRequest(): IHttpRequest;

  doGet(url: string, options?: RequestOptions);

  doPost(url: string, options?: RequestOptions);
}

• getRequest()：返回一个 IHttpRequest 实例，后续请求都由该实例完成。
• doGet()：发起一个 GET 请求， url 表示请求地址， options 表示额外请求参数。
• doPost()：发起一个 POST 请求， url 表示请求地址， options 表示额外请求参数。

RequestOptions 定义如下：

export class RequestOptions {

  public data?: any;

  public callback?: (data?: any) => void;

}

• data：请求的额外参数。

• callback：请求结果回调。

17.4.2：实现请求API

定义完 IHttpRequest 接口后，具体的网络请求可以由 @ohos.net.http 模块提供的 API 实现，也可以由开源的第三方库比如 HttpClient 实现，具体实现读者可自行选择，笔者把这两种方式都做下演示：

• 系统 API 实现

  使用系统 API 的方式实现，就是直接使用 @ohos.net.http 模块提供的 HttpRequest 相关方法实现网络请求（不清楚 HttpRequest 使用的读者可阅读第十二章 第 2 节 的内容），定义 HttpSystem 实现类并实现 IHttpRequest 接口，代码如下所示：

  import http from '@ohos.net.http';
  
  import {IHttpRequest} from "./IHttpRequest"
  
  export class HttpSystem implements IHttpRequest {
  
    // 请求具体实现类
    private httpRequest: http.HttpRequest;
  
    constructor() {
      this.httpRequest = http.createHttp();
    }
  
    public getRequest(): IHttpRequest {
      return this;
    }
  
    public doGet(url: string, options?: RequestOptions) {
      // 由httpRequest实现具体请求
    }
  
    public doPost(url: string, options?: RequestOptions) {
      // 由httpRequest实现具体请求
    }
  
  }
  

• 三方库实现

  使用三方库的方式实现，就是基于第三方网络库提供的方法实现网络请求，笔者使用 HttpClient 实现（不清楚 HttpClient 使用的读者可阅读第十二章 第 6 节 的内容），定义 HttpClient 实现类并实现 IHttpRequest 接口，代码如下所示：

  import httpClient from '@ohos/httpclient'
  import TimeUnit from '@ohos/httpclient'
  
  import {IHttpRequest} from "./IHttpRequest"
  
  let httpClientImpl = new httpClient.HttpClient.Builder()
    .setConnectTimeout(15, TimeUnit.TimeUnit.SECONDS)
    .setReadTimeout(15, TimeUnit.TimeUnit.SECONDS)
    .build();
  
  export class HttpClient implements IHttpRequest {
  
    public getRequest(): IHttpRequest {
      return this;
    }
  
    public doGet(url: string, options?: RequestOptions) {
      // httpClientImpl具体实现请求
    }
  
    public doPost(url: string, options?: RequestOptions) {
      // httpClientImpl具体实现请求
    }
  
  }
  

以上就是 IHttpRequest 接口的实现，接下来就是使用请求API了。

17.4.3：使用请求API

实现网络请求，需要获取一个 IHttpRequest 实例，我们再添加一个全局请求管理类 RequestManager ，它负责返回 IHttpRequest 的实例对象，代码如下所示：

import {IHttpRequest} from "./IHttpRequest"
import {HttpClient} from "./HttpClient"
import {HttpSystem} from "./HttpSystem"

export class HttpManager {

  private static sSystemRequest: IHttpRequest = null;
  private static sClientRequest: IHttpRequest = null;

  public static getRequest(system: boolean = true): IHttpRequest {
    if (system) {
      if (HttpManager.sSystemRequest == null) {
        HttpManager.sSystemRequest = new HttpSystem();
      }
      return HttpManager.sSystemRequest;
    } else {
      if (HttpManager.sClientRequest == null) {
        HttpManager.sClientRequest = new HttpClient();
      }
      return HttpManager.sClientRequest;
    }
  }

}

• getRequest()：返回一个 IHttpRequest 实例，后续的网络请求都由该实例完成。

定义完 HttpManager 后，就可以通过 HttpManager 实现网络请求了，测试代码如下所示：

Button({type: ButtonType.Normal}) {
  Text('登录')
    .fontSize(20)
    .fontColor(Color.White)
    .padding({left: 110, top: 5, right: 110, bottom: 5})
}
.margin({top: 50})
.borderRadius(8)
.backgroundColor($r("app.color.main_theme"))
.onClick(() => {
  // 发起GET请求
  HttpManager.getRequest().doGet("https://www.baidu.com");
  // 发起不带额外参数的POST请求
  HttpManager.getRequest().doPost("https://www.baidu.com", {
    callback: (data: any) => {
    }
  })
  // 发起带额外参数的POST请求
  HttpManager.getRequest().doPost("https://www.baidu.com", {
    data: "extra data",
    callback: (data: any) => {
    }
  })
})

17.4.4：小结

本节笔者只是简单演示一下在项目里如何封装一版公共请求 API ，它只是一个大概的请求框架，许多逻辑处理需要读者在自己项目中实现，读者可以根据自己的项目需要实现符合自己的一套请求框架。

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