上线当天App就崩了，才发问题是手机网络超时没处理——用App Inventor 2的Web组件重构API调用 ...

App Inventor 2

上周五晚上，朋友老刘急匆匆给我发消息："我的查价App上线两天，应用商店差评炸了，用户说一打开就白屏。"

我让他把项目发过来看了看。好家伙——屏幕上拖了个Web组件，按钮点击直接执行GET请求，没有任何超时处理，没有错误兜底，甚至连返回状态码都没判断。用户在地铁里信号差，请求挂起30秒不返回，界面就僵在那里。

这大概是很多App Inventor 2新手最容易踩的坑：Web组件看起来简单，拖出来、设个URL、调个方法就完事了。但真实网络环境远比教程里的localhost复杂。

需求分析

老刘的查价App核心逻辑很简单：

• 用户输入商品关键词
• 调用第三方价格API（返回JSON）
• 解析数据，在列表中展示结果

问题出在第二步——他完全没有考虑网络异常的情况。

技术方案

我帮老刘用Web组件重新设计了API调用流程，核心改动有四个：

改动一：设置超时时间

Web组件有个超时时间(ms)属性，默认是0（无限等待）。我把它设成8000毫秒——8秒不返回就判定超时，触发超时事件，给用户提示"网络较慢，请稍后重试"。

改动二：异步请求 + 事件回调

老刘原来的代码是在按钮点击事件里直接调用执行GET请求()，然后试图立刻读取响应内容。但Web组件是异步的——请求发出后不会阻塞等待，必须通过获得文本事件来接收结果。

正确流程是这样的：

• 按钮点击 → 设置URL → 调用执行GET请求()
• 系统在后台发HTTP请求
• 请求完成后触发获得文本(URL网址, 响应代码, 响应类型, 响应内容)事件
• 在获得文本事件里解析JSON、更新界面

改动三：JSON解析用字典模式

API返回的数据是嵌套JSON，类似：
{"code":200, "data":{"products":[{"name":"手机壳","price":12.9}]}}

老刘原来用的是解码JSON文本方法，返回的是列表套列表的结构，取值要用在键值对中查找，嵌套多了容易绕晕。

我改成用字典解码JSON文本方法，返回的是字典对象，直接用获取键的值就能一层层取数据，代码可读性提升了一大截。

改动四：请求头设置

有些API要求在请求头里带Content-Type: application/json才能正确返回。通过Web组件的请求标头属性，设置一个双元素列表((Content-Type application/json))即可。

关键实现

核心积木拼装过程：

• 按钮点击事件：先检查输入框是否为空 → 设置Web组件的URL网址属性（关键词用URI编码处理，避免中文乱码）→ 设置超时时间为8000 → 调用执行GET请求()
• 获得文本事件：先判断响应代码是否等于200 → 是则用用字典解码JSON文本解析响应内容 → 遍历data中的products列表 → 逐条加入ListView
• 超时事件：弹出Notifier提示"请求超时，请检查网络后重试"
• 响应代码非200：弹出Notifier提示"服务异常，代码" + 响应代码

一个细节：URL里的中文参数必须用URI编码方法转码。老刘之前直接拼接中文关键词，结果搜索"手机壳"返回的全是乱码结果。

踩过的坑

重构过程中又发现两个隐蔽问题：

坑一：JSON解析报错。 API偶尔返回HTML格式的错误页面（比如网关502），直接丢给用字典解码JSON文本会触发Screen的错误事件。解决方案是在解析前加一个判断：检查响应内容是否以{开头。

坑二：Cookie丢失。 这个App需要登录后才能查价，但老刘没勾选允许使用Cookies属性，每次请求都是"裸奔"状态，API自然返回未授权。勾上之后，Web组件会自动维护Cookie，登录态就能保持了。

最终效果

重构后的App在各种网络环境下都表现稳定：

• WiFi正常：1-2秒返回结果
• 4G弱网：8秒内返回，超时有友好提示
• 无网络：超时事件触发，不会白屏卡死

老刘把新版提交上去，三天后差评率从12%降到了2%以下。他在评论区统一回复："已修复网络问题，抱歉让大家白屏了。"

复盘感悟

这次重构让我深刻体会到：Web组件虽简单，但异步编程的思维不能少。 异步回调、超时处理、错误兜底，这三件事在任何网络编程中都是基本功。App Inventor 2把这些能力都封装好了，关键在于你用不用。

如果你也在做调用API的App，建议把Web组件的文档完整读一遍，特别是事件回调和JSON解析部分。

参考文档：App Inventor 2 Web客户端完整文档 → https://www.fun123.cn/reference/components/connectivity.html

JSON解析案例：JSON转字典教程 → https://www.fun123.cn/reference/blocks/dictionaries.html

文件上传方案：App Inventor 2 文件上传到服务器全方案总结 → https://www.fun123.cn/pro/file_upload.html

---

*本文由 App Inventor 2 中文网 (fun123.cn) 原创，转载请注明出处。*