颤振卷曲 POST 请求答案

【问题标题】：Flutter curl POST request颤振卷曲 POST 请求
【发布时间】：2020-11-10 16:01:38
【问题描述】：

通过将 curl 转换为 JSON 在 FLutter 中发送 POST 请求时遇到问题。我是 Flutter 的新手，我正在尝试将数据发送到互联网。这是我的卷曲：

curl -X POST http://my-server/api/order \
    -d api_key='My API key' \
    -d phone='Mobile Phone' \
    -d street='Street Name'\
    -d moderation_required=no

这是我编写的 Flutter 代码：

import 'dart:convert';

import 'package:flutter/material.dart';
import 'model/orderTaxi_model.dart';
import 'package:http/http.dart' as http;

Future<Data> createOrder(String street) async {
  final http.Response response = await http.post(
    'http://XXX.XXX.XXX.XXX/api/order',
    headers: <String, String>{
      'Content-Type': 'application/json; charset=UTF-8',
    },
    body: jsonEncode(<String, String>{
      'api_key': 'My api Key',
      'phone': '1234',
      'street': street,
      'moderation_required': 'yes',
    }),
  );
  if (response.statusCode == 201) {
    return Data.fromJson(json.decode(response.body));
  } else {
    throw Exception('Failed to order Taxi');
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final TextEditingController _controller = TextEditingController();
  Future<Data> _futureOrder;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Post Request'),
      ),
      body: Container(
          alignment: Alignment.center,
          padding: const EdgeInsets.all(8.0),
          child: (_futureOrder == null)
              ? Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    TextField(
                      controller: _controller,
                      decoration: InputDecoration(hintText: 'Enter Street'),
                    ),
                    RaisedButton(
                      child: Text('Place Order'),
                      onPressed: () {
                        setState(() {
                          _futureOrder = createOrder(_controller.text);
                        });
                      },
                    )
                  ],
                )
              : FutureBuilder<Data>(
                  future: _futureOrder,
                  builder: (context, snapshot) {
                    if (snapshot.hasData) {
                      return Text(snapshot.data.phone);
                    } else if (snapshot.hasError) {
                      return Text('${snapshot.error}');
                    }
                    return CircularProgressIndicator();
                  },
                )),
    );
  }
}

作为我的参考，我正在使用这个网站https://flutter.dev/docs/cookbook/networking/send-data。如果有人能帮助我解决这个问题，我将不胜感激。我不知道我在哪里做错了。也许我的错误是当我将 HTTP.Response 转换为 dart 对象时？

【问题讨论】：

您能否通过添加您面临的错误来编辑您的帖子？
代码正在运行，但是 Future 函数 createOrder 抛出异常 'Failed to order Taxi'。我感觉我写的 Future 函数有问题。根据我提供的 crul，您能帮我将其转换为模型类吗？或者您将如何在 Flutter 中转换 crul？你有什么建议？
然后在抛出异常之前，打印response.body和状态码！

标签： flutter flutter-layout flutter-dependencies flutter-test

【解决方案1】：

在 curl -d 中表示一个 url 编码的表单参数。在您的 Dart 代码中，您发送的是 JSON 字符串。

删除所有对 JSON 的引用，让 http 客户端对表单进行编码（如果您传入 Map<String, String>，它将执行此操作。

  final http.Response response = await http.post(
    'http://xxx.yyy/api/order',
    headers: <String, String>{
      // no! let http set the content type itself -'Content-Type': 'application/json; charset=UTF-8',
    },
    body: <String, String>{
      'api_key': 'My api Key',
      'phone': '1234',
      'street': street,
      'moderation_required': 'yes',
    },
  );

【讨论】：