HarmonyOS NEXT - 网络请求问题(http)

HTTP(HyperText Transfer Protocal,超文本传输协议)是一种用于传输超媒体文档(如HTML)的应用层协议,它是客户端和服务器之间通信的基础;无论是获取数据、提交表单、上传文件,HTTP都扮演着重要角色。

HarmonyOS NEXT开发过程中,HTTP请求也是不可或缺的技术,用于实现客户端和服务器之间的数据交互。同时,也需要注意网络权限、数据格式、合理配置等问题,确保应用的稳定性,以及避免以上问题未设置到位而产生的HTTP请求错误。

一、http返回数据的类型

在使用@ohos.net.http模块发送HTTP请求时,可能有些人在得到响应时,获取到的结果是一串字符串,而不是JSON格式的对象;这是因为在执行http.request()请求时,未配置expectDataType,其类型分为以下几种:

名称 描述
STRING 返回的类型是字符串。
OBJECT 返回的类型是Object。
ARRAY_BUFFER 返回类型为ArrayBuffer。

以上配置,可根据项目接口需要,对其合理配置即可。

所以,在之前一篇讲述@ohos.net.http模块封装中,我们可以配置下expectDataType参数,示例代码如下图:

@ohos.net.http模块封装地址:HarmonyOS NEXT - 电商App实例二( 网络请求http)-CSDN博客

HTTP数据请求官方地址:文档中心

二、Content-Type配置

在HarmonyOS NEXT中使用 @ohos.net.http 或 @ohos/axios发送POST请求是,如果后台接收到的数据为空,而通过Postman发送却正常,通常是因为请求配置或数据格式的问题。比如Content-Type未正确配置,具体如下图:

如果后台期望的是application/x-www-form-urlencoded,前端在发送请求时,将请求header中Content-Type统一为application/x-www-form-urlencoded即可。如果在项目中,出现多种请求类型,可以多实例完成不同类型数据的请求操作。如下图:

TypeScript 复制代码
import { HttpUtil } from './httpUtil'
/**
 * 初始化请求 实例类
 */
export const httpRequestForm = new HttpUtil('http://test.shop.com', {
  'Content-Type': 'application/x-www-form-urlencoded'
})

/**
 * 初始化请求 实例类
 */
export const httpRequestJson = new HttpUtil('http://test.shop.com', {
  'Content-Type': 'application/json'
})

@ohos.net.http和@ohos/axios请求封装功能,之前已讲过,这里不细说。

地址一:HarmonyOS NEXT - 电商App实例二( 网络请求http)-CSDN博客

地址二:HarmonyOS NEXT - 电商App实例三( 网络请求axios)_鸿蒙开发axios网络请求在预览器中没问题 在模拟器中无法发送请求 报错 couldn't r-CSDN博客

三、数据格式不正确

如axios请求中的data的数据格式与后台期望的格式不匹配,后台可能无法正确解析。后面期望的是JSON字符串,但传递的是普通对象,或者未将对象序列化为字符串。

3.1 未序列化

这里通过axios封装实例,向后台发送登录请求。示例代码如下:

TypeScript 复制代码
import { standardInterfaceResult } from '../types/http'
import { axiosRequestForm } from '../utils/request'

/**
 * 登录Api函数
 */
export const login = async (data) => {
  return await axiosRequestForm.post<standardInterfaceResult>('/login.php', data)
}

axiosUtil中未对data数据进行序列化处理,如下图:

在发送登录请求后,未得到正确响应,现在JSON解析错误。如下图:

3.2 序列化data数据

将axiosUtil中data数据序列化为字符串,如下图:

再次发送登录请求,查看控制台输出,则不会出现JSON解析错误的提示了。如下图:

四、模拟器网络代理

估计很多小伙伴在预览器中开发一切正常,但是打开设备管理器中的模拟器后,发现http请求发送不出去,并无法得到响应了。

previewer预览器:

设备管理器中的模拟器:

如下图,通过模拟器发送的请求,并未得到响应结果。

其实这个问题很好解决,在模拟器中的网络请求配置下即可。

首先,找到"网络配置"配置页,如下图:

打开"网络配置"页,此时是"无代理"状态。如下图:

将请求地址配置上去,并把端口号修改为80,点击"应用"按钮即可。

此时,再发送登录请求,则可以正常得到服务端的响应了。如下图:

http请求相关问题就讲到这,如果你有更多问题,欢迎随时沟通交流!

相关推荐
馨谙2 分钟前
OpenSSH 安全配置核心概念解析
linux·服务器·网络
烧冻鸡翅QAQ7 分钟前
HTTP 1.0版本的webserver自主实现
网络·网络协议·http
JarvanMo14 分钟前
不要在 SwiftUI 中使用 .onAppear() 进行异步(Async)工作——这就是它导致你的 App 出现 Bug 的原因。
前端
Moment17 分钟前
Next.js 16 新特性:如何启用 MCP 与 AI 助手协作 🤖🤖🤖
前端·javascript·node.js
吃饺子不吃馅17 分钟前
Canvas高性能Table架构深度解析
前端·javascript·canvas
一枚前端小能手23 分钟前
🔄 重学Vue之生命周期 - 从源码层面解析到实战应用的完整指南
前端·javascript·vue.js
JarvanMo24 分钟前
Flutter:借助 jnigen通过原生互操作(Native Interop)使用 Android Intent。、
前端
开开心心就好31 分钟前
Word转PDF工具,免费生成图片型文档
前端·网络·笔记·pdf·word·powerpoint·excel
一枚前端小能手32 分钟前
「周更第9期」实用JS库推荐:mitt - 极致轻量的事件发射器深度解析
前端·javascript
Moment34 分钟前
为什么 Electron 项目推荐使用 Monorepo 架构 🚀🚀🚀
前端·javascript·github