如何使用Flutter http包对接Node JS用户存储API？

我已用Node.js搭建了一个用于存储用户名和密码的简易API，现在想将它和Flutter应用对接。目前我使用Flutter的http包（HTTP版本详情见下图：），但不知道如何完成集成，请求技术帮助。我尝试过的代码如下：

void _saveForm() {
    if (_formKey.currentState!.validate()) {
      _formKey.currentState!.save();
    }

    var data = {
      "email": formData['email'].toString(),
      "password": formData['password'].toString(),
    };
    // ignore: avoid_print
    print(data);

    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => Home(),
      ),
    );
  }

1. 确认http包配置 #

先检查pubspec.yaml中已添加http依赖，版本与你截图一致，执行flutter pub get完成依赖安装。

2. 修改表单提交逻辑，加入API请求 #

把你现有的_saveForm方法修改为包含HTTP请求的版本，以POST方式提交用户数据到Node.js API：

import 'package:http/http.dart' as http;
import 'dart:convert';

void _saveForm() async {
  if (_formKey.currentState!.validate()) {
    _formKey.currentState!.save();

    var data = {
      "email": formData['email'].toString(),
      "password": formData['password'].toString(),
    };

    try {
      // 替换成你的Node.js API实际地址
      var apiUrl = Uri.parse('http://你的API地址/注册接口路径');
      var response = await http.post(
        apiUrl,
        headers: {'Content-Type': 'application/json'},
        body: jsonEncode(data),
      );

      if (response.statusCode == 200) {
        // 请求成功，可解析返回结果并跳转首页
        var result = jsonDecode(response.body);
        print('提交成功: $result');
        Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => Home()),
        );
      } else {
        // 请求失败，根据状态码处理错误
        print('提交失败，状态码: ${response.statusCode}');
        // 可在这里给用户显示错误提示，比如Toast或弹窗
      }
    } catch (error) {
      // 捕获网络异常，避免APP崩溃
      print('网络错误: $error');
    }
  }
}

3. 关键注意事项 #

• 本地API访问：如果Node.js API在本地调试，不要用localhost，换成你电脑的局域网IP（比如http://192.168.1.100:3000），否则模拟器/真机无法访问。
• 请求格式匹配：确保请求头的Content-Type和Node.js API接收的格式一致。如果API接收表单数据，就把请求头改成application/x-www-form-urlencoded，并使用FormData提交。
• 异常处理：必须添加try-catch捕获网络异常、解析错误等情况，避免APP闪退。
• 状态码判断：根据Node.js返回的状态码（如200成功、400参数错误、500服务器异常）做对应处理，给用户明确的反馈。

4. Node.js API端适配参考 #

如果你的API用Express框架，需确保能正确解析JSON请求体：

const express = require('express');
const app = express();
// 启用JSON请求体解析
app.use(express.json());

app.post('/注册接口路径', (req, res) => {
  const { email, password } = req.body;
  // 这里编写存储用户数据到数据库的逻辑
  console.log('收到用户数据:', { email, password });
  // 返回成功响应
  res.status(200).json({ message: '存储成功' });
});

app.listen(3000, () => {
  console.log('API运行在3000端口');
});

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