鸿蒙NEXT开发笔记（二十二）仿抖音快手App的网络接口调用

上一节我们通过添加权限配置成功申请了应用的网络访问权限，这样App才能访问网络接口，才能加载网络图片。那么调用HTTP接口是很常见的网络访问操作，在鸿蒙App代码中调用HTTP的具体过程包含以下几个步骤：

一、创建HTTP请求对象

HTTP的接口请求操作用到了http库，也就是在ETS代码开头添加下面的导包语句：

import { http } from '@kit.NetworkKit';

接着调用http.createHttp方法，创建一个HttpRequest类型的HTTP请求对象，有关HTTP接口的GET请求和POST请求都要通过HttpRequest对象实现。HttpRequest对象主要提供了以下两个方法：
request：根据指定的URL地址，发起HTTP网络请求，返回结果以callback方式异步回调。注意该接口仅支持接收大小为5M以内的返回数据。
destroy：中断请求任务，并释放HTTP请求资源。

二、向服务端发起接口调用请求

在发起接口调用之前，得先构造请求选项，包括请求方式（GET还是POST）、请求包头、读取超时时间、连接超时时间等等。下面是个请求选项的构造代码例子。

let options: http.HttpRequestOptions ={
  method: http.RequestMethod.GET, // 请求方式。默认为http.RequestMethod.GET
  header: { // 请求包头
    'Accept-Language': 'zh-CN', // 客户端期望服务器返回的内容语言
    'Referer': '', // 本次请求的来源页面
    'Content-Type': 'application/json', // 客户端发送的内容格式
    'Accept': 'application/json' // 客户端期望服务器返回的内容格式
  },
  readTimeout: 60000, // 读取超时时间。单位毫秒，默认为60000毫秒
  connectTimeout: 60000, // 连接超时时间。单位毫秒，默认为60000毫秒
}

构造好了请求选项之后，再调用HttpRequest对象的request方法，向指定的URL地址发起接口调用请求。下面是HttpRequest对象的接口调用代码框架：

httpRequest.request(this.urlArray[this.index], options,
  (err: BusinessError, data: http.HttpResponse) => {
      // 这里暂时省略返回结果的回调代码
    }
    // 当该请求使用完毕时，开发者务必调用destroy方法主动销毁该JavaScript对象
    httpRequest.destroy();
  })

三、异步接收服务端的返回结果

因为网络请求属于耗时操作，所以HTTP接口的调用结果在request方法中异步返回，该方法的第三个参数即为异步回调事件的处理代码。回调事件中BusinessError类型的err参数用来判断是否HTTP调用成功，http.HttpResponse类型的参数用来获取HTTP调用的结果数据。http.HttpResponse的内部字段说明如下：
responseCode：HTTP应答状态码。常见的应答状态码包括：200表示调用成功，400表示错误请求，403表示禁止访问，404表示页面未找到，500表示服务器内部错误。
resultType：结果类型。
result：结果数据。可调用result的toString方法，得到字符串形式的结果报文。
header：返回结果的包头。
根据上述各字段的说明，可知在处理HTTP返回数据时，先判断HTTP调用是否成功，再从data.result.toString()获取结果报文。具体的返回结果处理代码示例如下：

if (!err) {
  this.result = 'httpRequest查询HTTP接口返回内容如下：\n'+data.result.toString()
  // data.result为HTTP响应内容，可根据业务需要进行解析
  console.info('Result:' + JSON.stringify(data.result));
  console.info('responseCode:' + JSON.stringify(data.responseCode));
  console.info('resultType:' + JSON.stringify(data.resultType));
  // data.header为HTTP响应头，可根据业务需要进行解析
  console.info('header:' + JSON.stringify(data.header));
} else {
  console.error('error:' + JSON.stringify(err));
}

经过以上三个步骤的HTTP请求操作，才算实现了一个GET类型的HTTP接口访问。以访问搜狐股指接口为例（https://q.stock.sohu.com/hisHq?code=cn_000001&start=20240306&end=20240306），下面是该接口返回的结果报文截图。

下一篇文章会介绍如何使用下拉刷新组件实现App界面的刷新效果。