http请求数据

  1. 导入http模块
    1
    import http from '@ohos.net.http'
  2. 是用http模块发生请求，处理响应
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    // 2.1 创建一个http的请求对象，不可复用
    let httpRequest = http.createHttp()
    // 2.2 发生网络请求
    httpRequest.request(
    	'http://localhost:3000/users',  //请求URL路径
    	{  //请求选项HttpRequestOptions
    		method: http.RequestMethod.GET,
    		extraData: {'param1': 'value1'}  //k1=v1&k2=v2
    	}
    )  //Promise：存放未来会完成的结果
    // 2.3 处理响应结果
    .then((resp: http.HttpRequest) => {
    	if(resp.responseCode === 200){
    		//请求成功
    	}
    })
    .catch((err: Error) => {
    	//请求失败
    })
  • HttpRequestOptions
名称 类型 描述
method RequestMethod 请求方式，GET、POST、PUT、DELETE等
extraDate string|Object 请求参数
header Object 请求头字段
connectTimeout number 连接超时时间，单位毫秒，默认为60000ms
readTimeout number 读取超时间，同上
  • HttpResponse
名称 类型 描述
responseCode ResponseCode 响应状态码
header Object 响应头
cookies string 响应返回的cookies
result string|Object 响应体，默认是json字符串
resultType HttpDateType 返回值类型
  • 以下是实例

image.png

  • 封装的方法和类
  • 网络请求是有延迟的，所有使用promise异步处理，获取将来的结果
  • request返回的是promise，所有整个函数返回的也该是promise
  • resolve是成功的通知，reject是失败的通知

image.png

  • 创建对象并导出，在使用时调入
  • 也需要.then来处理结果
  • 最后一行的concat的作用是将原来的列表和新获取的进行拼接，实现每次获取都能在后面添加

image.png

  • 触底继续获取的方法
  • 通过isLoading参数将回弹造成的两次触底进行抵消，并且翻页继续获取列表
  • 在获取完列表后idLoading被重新设置为false
  • isMode参数的作用是检查是否还有数据可以获取

第三方库axios

下载和安装ohpm

  1. 下载和安装ohpm（open harmony package manager），鸿蒙第三方库的包管理工具
  2. 下载地址和官方文档
  3. 下载安装，并按照官方文档进行环境变量的配置

下载和安装axios

  1. 下载axios
    1
    2
    # 进入项目目录，然后输入下面命令
    ohpm install @ohos/axios
    image.png
  • 在oh-package.json5文件当中可以看到所有第三方库依赖


2. 开放网络权限

1
2
3
4
5
6
7
8
// 在模块的module.json5文件中配置网络权限
"module": {  
  "requestPermissions": [  
    {  
      "name": "ohos.permission.INTERNET"  
    }  
  ]
}

使用axios

  1. 导入axios
    1
    import axios from '@ohos/axios'
  2. 发送请求并处理响应
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    axios.get(  //请求方式，不同方式使用不同方法
    	'url'，  //请求路径
    	{
    		params: {'param1': 'value1'}, //请求选项
    		data: {'param1': 'value1'}
    		//请求可选项非常多，可以参考官方文档
    		//params是GET请求时的参数，会被放在url后面，data是POST或者PUT等等的请求参数
    	}
    )
    	.then(response => { //响应结果，AxiosResponse
    		if(response.status !== 200){
    			console.log('查询失败')
    		}
    		console.log('查询成功')
    	})
    	.catch(error => {
    		console.log('查询失败', JSON.stringify(error))
    	})
名称 类型 描述
status number 响应状态码
headers Object 响应头
data any 服务端返回的响应体
  • 这里的data不同于http需要把JSON格式转换，这里可以直接使用
  • 下面是实例

image.png

  • 无需创建请求对象