Flutter如何读取Google Cloud Function返回的HTTP响应并获取实际数据

1 客户端获取实际响应数据的修复 #

你现在打印得到Instance of 'Future<Response>'的核心原因是没有等待异步函数执行完成，dataHTTP()是异步函数，返回的是Future对象，必须用await关键字等待执行完成才能拿到实际的Response结果，修正后的代码如下：

修正后的点击事件代码 #

TextButton(
  onPressed: () async {
    // 加await等待请求完成，获取实际响应对象
    final http.Response response = await dataHTTP();
    // 先打印状态码判断请求是否成功
    print('请求状态码：${response.statusCode}');
    // response.body就是云函数返回的原始内容，不管是纯文本还是JSON都可以直接读取
    print('云函数返回原始内容：${response.body}');
    // 如果云函数返回纯数字文本，直接转成int即可使用
    int? openSeatCount = int.tryParse(response.body.trim());
    print('解析后的余座数量：$openSeatCount');
  },
  child: Text('Enter'),
)

补充说明：Flutter的http包不限制仅读取JSON格式，response.body会返回接口响应的原始字符串，支持任意文本格式的返回结果。

2 云函数端的配置方案 #

你遇到的flask未找到报错，大概率是本地测试环境没有安装flask依赖，GCP Python 3.9运行环境默认已经预装flask，部署到云端后不会触发该报错。下面给出两种可用的返回写法：

方案A：直接返回纯文本数字（最简方案） #

不需要做JSON序列化，云函数端和客户端都不用额外处理序列化逻辑，适合接口永远仅返回单个数字的场景：

def open_seats(request):
    # 此处替换为你自己的业务逻辑，计算得到余座数字
    seat_count = 5
    # 直接返回字符串格式的数字，指定内容类型为纯文本即可
    return str(seat_count), 200, {"Content-Type": "text/plain"}

方案B：返回JSON格式（扩展性更好） #

如果后续可能新增其他返回字段，推荐用JSON格式返回，云函数写法如下：

import json

def open_seats(request):
    seat_count = 5
    res_data = {
        "open_seats": seat_count,
        "code": 0
    }
    return json.dumps(res_data), 200, {"Content-Type": "application/json"}

对应的客户端解析代码：

import 'dart:convert';
// ...
final response = await dataHTTP();
final resMap = jsonDecode(response.body);
int openSeatCount = resMap['open_seats'];

3 方案选择建议 #

如果你的该接口后续不会扩展返回字段，仅需要返回单个数字，直接返回纯文本的方案更简便，两端都不需要处理序列化逻辑，开发成本最低。如果后续有扩展字段的可能，直接选择JSON方案更稳妥。

内容的提问来源于stack exchange，提问作者Aymane