如何在Flutter中使用GetX调用Node.js的HTTP.put() API？

一、Node.js 端实现 PUT 接口 #

基于 Express 框架编写处理用户资料更新的接口，示例如下：

const express = require('express');
const app = express();
const cors = require('cors');

app.use(cors());
app.use(express.json());

// 模拟用户数据库（实际项目替换为真实数据库操作）
let users = [
  { id: 1, name: "张三", phone: "13800138000" }
];

// PUT 接口：根据用户ID更新资料
app.put('/api/user/:id', (req, res) => {
  const userId = parseInt(req.params.id);
  const updatedData = req.body;

  const userIndex = users.findIndex(user => user.id === userId);
  if (userIndex === -1) {
    return res.status(404).json({ message: "用户不存在" });
  }

  // 合并原有数据与更新数据
  users[userIndex] = { ...users[userIndex], ...updatedData };
  res.status(200).json({ message: "资料更新成功", user: users[userIndex] });
});

const PORT = 3000;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

二、Flutter 端用 GetX 实现请求逻辑 #

1. 添加依赖 #

在 pubspec.yaml 中引入 GetX 和 http 包：

dependencies:
  flutter:
    sdk: flutter
  get: ^4.6.5
  http: ^1.1.0

2. 创建 GetX 控制器管理请求与状态 #

新建 user_controller.dart，封装 PUT 请求和状态管理逻辑：

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

class UserController extends GetxController {
  // 响应式存储用户信息
  var user = {}.obs;
  // 加载状态标识
  var isLoading = false.obs;

  // 更新用户资料方法
  Future<void> updateUser(int userId, Map<String, dynamic> updateData) async {
    try {
      isLoading(true);
      final response = await http.put(
        Uri.parse('http://你的服务器IP:3000/api/user/$userId'),
        headers: {'Content-Type': 'application/json'},
        body: json.encode(updateData),
      );

      if (response.statusCode == 200) {
        final data = json.decode(response.body);
        user.value = data['user'];
        Get.snackbar('成功', '资料更新完成');
      } else {
        final errorData = json.decode(response.body);
        Get.snackbar('失败', errorData['message'] ?? '更新失败');
      }
    } catch (e) {
      Get.snackbar('错误', '网络请求失败：${e.toString()}');
    } finally {
      isLoading(false);
    }
  }
}

3. 页面中集成控制器实现交互 #

在个人资料页面，通过控制器触发更新请求：

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'user_controller.dart';

class ProfilePage extends StatelessWidget {
  final UserController userController = Get.put(UserController());
  final TextEditingController nameController = TextEditingController();
  final TextEditingController phoneController = TextEditingController();
  // 实际项目中从登录态获取用户ID，此处用固定值模拟
  final int currentUserId = 1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('个人资料')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            TextField(
              controller: nameController,
              decoration: const InputDecoration(labelText: '姓名'),
            ),
            TextField(
              controller: phoneController,
              decoration: const InputDecoration(labelText: '手机号'),
            ),
            const SizedBox(height: 20),
            Obx(() => ElevatedButton(
              onPressed: userController.isLoading.value 
                  ? null 
                  : () {
                      final updateData = {
                        'name': nameController.text,
                        'phone': phoneController.text,
                      };
                      userController.updateUser(currentUserId, updateData);
                    },
              child: userController.isLoading.value 
                  ? const CircularProgressIndicator(color: Colors.white) 
                  : const Text('保存修改'),
            )),
          ],
        ),
      ),
    );
  }
}

三、关键注意事项 #

• 替换 http://你的服务器IP:3000 为实际地址：Android 模拟器用 10.0.2.2 映射本地服务器，iOS 模拟器直接用 localhost。
• 用户ID需从登录会话中获取，可存储在 GetX 全局状态或本地存储（如 SharedPreferences）。
• 生产环境需添加接口鉴权，比如在请求 headers 中携带 Authorization: Bearer token。

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