Flutter - 无法发出 POST 请求
Posted
技术标签:
【中文标题】Flutter - 无法发出 POST 请求【英文标题】：Flutter - Unable to make a POST Request 【发布时间】：2019-08-27 23:45:13 【问题描述】：我正在使用Flutter 开发一个移动应用程序。现在我正在尝试创建一个新用户。为此，我需要获取插入注册页面的数据并向 REST API 发出 POST 请求。
这是我的注册页面 - register_page.dart
import 'package:flutter/material.dart';
import '../models/user.dart';
import '../models/user_language.dart';
import '../models/user_right.dart';
import '../custom_functions/data_fetch.dart';
import '../common_functions/app_navigation.dart';
class RegisterPage extends StatelessWidget
@override
Widget build(BuildContext context)
return Scaffold(
appBar: AppBar(
title: Text("Register"),
),
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/background_login_5.jpg"),
fit: BoxFit.cover,
),
),
child: RegisterForm(),
),
);
class RegisterForm extends StatefulWidget
@override
State<StatefulWidget> createState()
// TODO: implement createState
return RegisterFormState();
class RegisterFormState extends State<RegisterForm>
final borderColorGreen = const Color(0xff339966);
bool passwordVisible, confirmPasswordVisible;
TextEditingController nameTxtController =TextEditingController();
TextEditingController emailTxtController =TextEditingController();
TextEditingController mobileTxtController =TextEditingController();
TextEditingController passwordTxtController =TextEditingController();
TextEditingController confirmPasswordTxtController =TextEditingController();
@override
Widget build(BuildContext context)
// TODO: implement build
passwordVisible=false;
confirmPasswordVisible=false;
return ListView(
children: <Widget>[
_buildTitleSection(),
_buildInputFields("Name",nameTxtController, TextInputType.text, Icons.border_color, Colors.white),
_buildInputFields("Email",emailTxtController,TextInputType.emailAddress, Icons.email, Colors.white),
_buildInputFields("Mobile",mobileTxtController, TextInputType.phone, Icons.phone, Colors.white),
_buildPasswordFields("Password",passwordTxtController,TextInputType.text),
_buildPasswordFields("Confirm Password",confirmPasswordTxtController, TextInputType.text),
_buildRegisterButton(),
],
);
Widget _buildTitleSection()
return Container(
margin: EdgeInsets.only(top: 20),
padding: EdgeInsets.all(32),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
"manningmarket.lk",
style: TextStyle(
color: borderColorGreen,
fontWeight: FontWeight.w900,
fontSize: 25,
),
),
],
));
Widget _buildInputFields(String label, TextEditingController textController, TextInputType textInputType, IconData icon, Color iconColor)
return Container(
margin: EdgeInsets.only(left: 20, bottom: 20),
child: Column(
children: <Widget>[
Container(
padding: EdgeInsets.only(right: 20),
child: Row(
children: <Widget>[
Flexible(
child: TextFormField(
controller: textController,
style: new TextStyle(color: Colors.white),
keyboardType: textInputType,
decoration: InputDecoration(
labelText: label,
fillColor: Colors.white,
labelStyle: TextStyle(
color: Colors.white, fontWeight: FontWeight.w600),
enabledBorder: OutlineInputBorder(
borderSide: const BorderSide(
color: Colors.white30, width: 2.0),
borderRadius: BorderRadius.circular(25.0),
),
suffixIcon: IconButton(
icon: Icon(
icon,
color: iconColor
),
onPressed: (),
)
),
),
),
],
),
),
],
));
Widget _buildPasswordFields(String label, TextEditingController textController, TextInputType textInputType)
return Container(
margin: EdgeInsets.only(left: 20, bottom: 20),
child: Column(
children: <Widget>[
Container(
padding: EdgeInsets.only(right: 20),
child: Row(
children: <Widget>[
Flexible(
child: TextFormField(
controller: textController,
style: new TextStyle(color: Colors.white),
keyboardType: textInputType,
decoration: InputDecoration(
labelText: label,
fillColor: Colors.white,
labelStyle: TextStyle(
color: Colors.white, fontWeight: FontWeight.w600),
enabledBorder: OutlineInputBorder(
borderSide: const BorderSide(
color: Colors.white30, width: 2.0),
borderRadius: BorderRadius.circular(25.0),
),
suffixIcon: IconButton(
icon: Icon(
// Based on passwordVisible state choose the icon
passwordVisible
? Icons.visibility
: Icons.visibility_off,
color: Theme.of(context).primaryColorDark,
),
onPressed: ()
// Update the state i.e. toogle the state of passwordVisible variable
setState(()
passwordVisible
? passwordVisible = false
: passwordVisible = true;
);
,
)
),
),
),
],
),
),
],
));
Widget _buildRegisterButton()
return Container(
margin: EdgeInsets.only(top: 10, right: 20, left: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Flexible(
child: SizedBox(
width: double.infinity, // match_parent
child: RaisedButton(
child: Text(
"Create Account",
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.normal),
),
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0)),
color: borderColorGreen,
onPressed: ()
setState(()
_createUser();
);
,
)))
],
),
);
void _createUser()
UserRight userRight = UserRight(
iduserRight: 2
);
UserLanguage userLanguage = UserLanguage(
iduserLanguage: 1
);
User user = User(
name: nameTxtController.text,
email: emailTxtController.text,
phone: mobileTxtController.text,
userLanguage: userLanguage,
userRights: userRight
);
DataFetch().createUser(AppNavigation.getAPIUrl() +
"user/saveUser", user).then((String result)
print("RESULT IS: "+result);
);
请查看_createUser查看数据post部分
现在，下面是代码，post 工作
//Create User
Future<String> createUser(
String url, User body) async
return http.post(url, body: body.toJson()).then((http.Response response)
final int statusCode = response.statusCode;
if (statusCode < 200 || statusCode > 400 || response.body == null)
throw new Exception("Error while fetching data");
else
return response.body;
);
最后是模型。先来看User模型
User.dart
import 'package:json_annotation/json_annotation.dart';
import './user_language.dart';
import './user_right.dart';
part 'user.g.dart';
@JsonSerializable()
class User
int iduser;
UserLanguage userLanguage;
UserRight userRights;
String name;
String address;
String phone;
String email;
int dob;
int deleteTimestamp;
int dateCreated;
int lastUpdated;
User(
this.iduser,
this.userLanguage,
this.userRights,
this.name,
this.address,
this.phone,
this.email,
this.dob,
this.deleteTimestamp,
this.dateCreated,
this.lastUpdated);
factory User.fromJson(Map<String, dynamic> json) => _$UserFromJson(json);
Map<String, dynamic> toJson() => _$UserToJson(this);
User.g.dart
// GENERATED CODE - DO NOT MODIFY BY HAND
part of 'user.dart';
// **************************************************************************
// JsonSerializableGenerator
// **************************************************************************
User _$UserFromJson(Map<String, dynamic> json)
return User(
iduser: json['iduser'] as int,
userLanguage: json['userLanguage'] == null
? null
: UserLanguage.fromJson(json['userLanguage'] as Map<String, dynamic>),
userRights: json['userRights'] == null
? null
: UserRight.fromJson(json['userRights'] as Map<String, dynamic>),
name: json['name'] as String,
address: json['address'] as String,
phone: json['phone'] as String,
email: json['email'] as String,
dob: json['dob'] as int,
deleteTimestamp: json['deleteTimestamp'] as int,
dateCreated: json['dateCreated'] as int,
lastUpdated: json['lastUpdated'] as int);
Map<String, dynamic> _$UserToJson(User instance) => <String, dynamic>
'iduser': instance.iduser,
'userLanguage': instance.userLanguage,
'userRights': instance.userRights,
'name': instance.name,
'address': instance.address,
'phone': instance.phone,
'email': instance.email,
'dob': instance.dob,
'deleteTimestamp': instance.deleteTimestamp,
'dateCreated': instance.dateCreated,
'lastUpdated': instance.lastUpdated
;
user_right.dart
import 'package:json_annotation/json_annotation.dart';
part 'user_right.g.dart';
@JsonSerializable()
class UserRight
int iduserRight;
String userRight;
int deleteTimestamp;
int dateCreated;
int lastUpdated;
UserRight(this.iduserRight, this.userRight, this.deleteTimestamp, this.dateCreated, this.lastUpdated);
factory UserRight.fromJson(Map<String, dynamic> json) =>
_$UserRightFromJson(json);
Map<String, dynamic> toJson() => _$UserRightToJson(this);
user_right.g.dart
// GENERATED CODE - DO NOT MODIFY BY HAND
part of 'user_right.dart';
// **************************************************************************
// JsonSerializableGenerator
// **************************************************************************
UserRight _$UserRightFromJson(Map<String, dynamic> json)
return UserRight(
iduserRight: json['iduserRight'] as int,
userRight: json['userRight'] as String,
deleteTimestamp: json['deleteTimestamp'] as int,
dateCreated: json['dateCreated'] as int,
lastUpdated: json['lastUpdated'] as int);
Map<String, dynamic> _$UserRightToJson(UserRight instance) => <String, dynamic>
'iduserRight': instance.iduserRight,
'userRight': instance.userRight,
'deleteTimestamp': instance.deleteTimestamp,
'dateCreated': instance.dateCreated,
'lastUpdated': instance.lastUpdated
;
user_language.dart
import 'package:json_annotation/json_annotation.dart';
part 'user_language.g.dart';
@JsonSerializable()
class UserLanguage
int iduserLanguage;
String language;
int deleteTimestamp;
int dateCreated;
int lastUpdated;
UserLanguage(this.iduserLanguage, this.language, this.deleteTimestamp,
this.dateCreated, this.lastUpdated);
factory UserLanguage.fromJson(Map<String, dynamic> json) =>
_$UserLanguageFromJson(json);
Map<String, dynamic> toJson() => _$UserLanguageToJson(this);
user_language.g.dart
// GENERATED CODE - DO NOT MODIFY BY HAND
part of 'user_language.dart';
// **************************************************************************
// JsonSerializableGenerator
// **************************************************************************
UserLanguage _$UserLanguageFromJson(Map<String, dynamic> json)
return UserLanguage(
iduserLanguage: json['iduserLanguage'] as int,
language: json['language'] as String,
deleteTimestamp: json['deleteTimestamp'] as int,
dateCreated: json['dateCreated'] as int,
lastUpdated: json['lastUpdated'] as int);
Map<String, dynamic> _$UserLanguageToJson(UserLanguage instance) =>
<String, dynamic>
'iduserLanguage': instance.iduserLanguage,
'language': instance.language,
'deleteTimestamp': instance.deleteTimestamp,
'dateCreated': instance.dateCreated,
'lastUpdated': instance.lastUpdated
;
当我执行我的注册页面并按下注册按钮时，我收到以下错误
E/flutter ( 2367): [ERROR:flutter/lib/ui/ui_dart_state.cc(148)] Unhandled Exception: NoSuchMethodError: The getter 'length' was called on null.
E/flutter ( 2367): Receiver: null
E/flutter ( 2367): Tried calling: length
E/flutter ( 2367): #0 Object.noSuchMethod (dart:core/runtime/libobject_patch.dart:50:5)
E/flutter ( 2367): #1 _Uri._uriEncode (dart:core/runtime/liburi_patch.dart:44:23)
E/flutter ( 2367): #2 Uri.encodeQueryComponent (dart:core/uri.dart:1098:17)
E/flutter ( 2367): #3 mapToQuery.<anonymous closure>
E/flutter ( 2367): #4 CastMap.forEach.<anonymous closure> (dart:_internal/cast.dart:286:8)
E/flutter ( 2367): #5 __InternalLinkedHashMap&_HashVMBase&MapMixin&_LinkedHashMapMixin.forEach (dart:collection/runtime/libcompact_hash.dart:367:8)
E/flutter ( 2367): #6 CastMap.forEach (dart:_internal/cast.dart:285:13)
E/flutter ( 2367): #7 mapToQuery
E/flutter ( 2367): #8 Request.bodyFields=
E/flutter ( 2367): #9 BaseClient._sendUnstreamed
E/flutter ( 2367): <asynchronous suspension>
E/flutter ( 2367): #10 BaseClient.post
E/flutter ( 2367): #11 post.<anonymous closure>
E/flutter ( 2367): #12 _withClient
E/flutter ( 2367): <asynchronous suspension>
E/flutter ( 2367): #13 post
E/flutter ( 2367): #14 DataFetch.createUser
E/flutter ( 2367): <asynchronous suspension>
E/flutter ( 2367): #15 RegisterFormState._createUser
E/flutter ( 2367): #16 RegisterFormState._buildRegisterButton.<anonymous closure>.<anonymous closure>
E/flutter ( 2367): #17 State.setState
E/flutter ( 2367): #18 RegisterFormState._buildRegisterButton.<anonymous closure>
E/flutter ( 2367): #19 _InkResponseState._handleTap
E/flutter ( 2367): #20 _InkResponseState.build.<anonymous closure>
E/flutter ( 2367): #21 GestureRecognizer.invokeCallback
E/flutter ( 2367): #22 TapGestureRecognizer._checkUp
E/flutter ( 2367): #23 TapGestureRecognizer.acceptGesture
E/flutter ( 2367): #24 GestureArenaManager.sweep
E/flutter ( 2367): #25 _WidgetsFlutterBinding&BindingBase&GestureBinding.handleEvent
E/flutter ( 2367): #26 _WidgetsFlutterBinding&BindingBase&GestureBinding.dispatchEvent
E/flutter ( 2367): #27 _WidgetsFlutterBinding&BindingBase&GestureBinding._handlePointerEvent
E/flutter ( 2367): #28 _WidgetsFlutterBinding&BindingBase&GestureBinding._flushPointerEventQueue
E/flutter ( 2367): #29 _WidgetsFlutterBinding&BindingBase&GestureBinding._handlePointerDataPacket
E/flutter ( 2367): #30 _rootRunUnary (dart:async/zone.dart:1136:13)
E/flutter ( 2367): #31 _CustomZone.runUnary (dart:async/zone.dart:1029:19)
E/flutter ( 2367): #32 _CustomZone.runUnaryGuarded (dart:async/zone.dart:931:7)
E/flutter ( 2367): #33 _invoke1 (dart:ui/hooks.dart:223:10)
E/flutter ( 2367): #34 _dispatchPointerDataPacket (dart:ui/hooks.dart:144:5)
E/flutter ( 2367):
我该如何解决这个问题？
特别说明
.g.dart 类（例如：user.g.dart）通过flutter packages pub run build_runner build 生成，如https://flutter.dev/docs/development/data-and-backend/json。在我在这里介绍的模型类中，我使用了named arguments。
更新 2
我应用了@diegoveloper 的第二个建议。下面是user.dart
import 'package:json_annotation/json_annotation.dart';
import './user_language.dart';
import './user_right.dart';
part 'user.g.dart';
@JsonSerializable()
class User
int iduser;
UserLanguage userLanguage;
UserRight userRights;
String name;
String address;
String phone;
String email;
int dob;
int deleteTimestamp;
int dateCreated;
int lastUpdated;
User(
this.iduser,
this.userLanguage,
this.userRights,
this.name,
this.address,
this.phone,
this.email,
this.dob,
this.deleteTimestamp,
this.dateCreated,
this.lastUpdated);
factory User.fromJson(Map<String, dynamic> json) => _$UserFromJson(json);
Map<String, dynamic> toJson(User instance) => <String, dynamic>
"iduser": instance.iduser,
"userLanguage": instance.userLanguage.toJson(),
"userRights": instance.userRights.toJson(),
"name": instance.name,
"address": instance.address,
"phone": instance.phone,
"email": instance.email,
"dob": instance.dob,
"deleteTimestamp": instance.deleteTimestamp,
"dateCreated": instance.dateCreated,
"lastUpdated": instance.lastUpdated
;
下面是flutter packages pub run build_runner build命令生成的代码。
user.g.dart
// GENERATED CODE - DO NOT MODIFY BY HAND
part of 'user.dart';
// **************************************************************************
// JsonSerializableGenerator
// **************************************************************************
User _$UserFromJson(Map<String, dynamic> json)
return User(
iduser: json['iduser'] as int,
userLanguage: json['userLanguage'] == null
? null
: UserLanguage.fromJson(json['userLanguage'] as Map<String, dynamic>),
userRights: json['userRights'] == null
? null
: UserRight.fromJson(json['userRights'] as Map<String, dynamic>),
name: json['name'] as String,
address: json['address'] as String,
phone: json['phone'] as String,
email: json['email'] as String,
dob: json['dob'] as int,
deleteTimestamp: json['deleteTimestamp'] as int,
dateCreated: json['dateCreated'] as int,
lastUpdated: json['lastUpdated'] as int);
Map<String, dynamic> _$UserToJson(User instance) => <String, dynamic>
'iduser': instance.iduser,
'userLanguage': instance.userLanguage,
'userRights': instance.userRights,
'name': instance.name,
'address': instance.address,
'phone': instance.phone,
'email': instance.email,
'dob': instance.dob,
'deleteTimestamp': instance.deleteTimestamp,
'dateCreated': instance.dateCreated,
'lastUpdated': instance.lastUpdated
;
然后我不得不修改我的Future 代码。请检查以下。现在您可以看到我必须将 User 对象传递给 toJSON 方法。
Future<String> createUser(
String url, User body) async
print("BODY: "+body.toJson(body).toString());
return http.post(url, body: convert.json.encode(body.toJson(body))).then((http.Response response)
final int statusCode = response.statusCode;
print("RESPONSE: "+response.body);
print("STATUS CODE: "+statusCode.toString());
if (statusCode < 200 || statusCode > 400 || response.body == null)
throw new Exception("Error while fetching data");
else
return response.body;
);
我收到以下错误
flutter (21372): [ERROR:flutter/lib/ui/ui_dart_state.cc(148)] Unhandled Exception: Exception: Error while fetching data
E/flutter (21372): #0 DataFetch.createUser.<anonymous closure>
E/flutter (21372): #1 _rootRunUnary (dart:async/zone.dart:1132:38)
E/flutter (21372): #2 _CustomZone.runUnary (dart:async/zone.dart:1029:19)
E/flutter (21372): #3 _FutureListener.handleValue (dart:async/future_impl.dart:126:18)
E/flutter (21372): #4 Future._propagateToListeners.handleValueCallback (dart:async/future_impl.dart:639:45)
E/flutter (21372): #5 Future._propagateToListeners (dart:async/future_impl.dart:668:32)
E/flutter (21372): #6 Future._complete (dart:async/future_impl.dart:473:7)
E/flutter (21372): #7 _SyncCompleter.complete (dart:async/future_impl.dart:51:12)
E/flutter (21372): #8 _AsyncAwaitCompleter.complete (dart:async/runtime/libasync_patch.dart:28:18)
E/flutter (21372): #9 _completeOnAsyncReturn (dart:async/runtime/libasync_patch.dart:294:13)
E/flutter (21372): #10 _withClient (package:http/http.dart)
E/flutter (21372): <asynchronous suspension>
E/flutter (21372): #11 post
E/flutter (21372): #12 DataFetch.createUser
E/flutter (21372): <asynchronous suspension>
E/flutter (21372): #13 RegisterFormState._createUser
E/flutter (21372): #14 RegisterFormState._buildRegisterButton.<anonymous closure>.<anonymous closure>
E/flutter (21372): #15 State.setState
E/flutter (21372): #16 RegisterFormState._buildRegisterButton.<anonymous closure>
E/flutter (21372): #17 _InkResponseState._handleTap
E/flutter (21372): #18 _InkResponseState.build.<anonymous closure>
E/flutter (21372): #19 GestureRecognizer.invokeCallback
E/flutter (21372): #20 TapGestureRecognizer._checkUp
E/flutter (21372): #21 TapGestureRecognizer.acceptGesture
E/flutter (21372): #22 GestureArenaManager.sweep
E/flutter (21372): #23 _WidgetsFlutterBinding&BindingBase&GestureBinding.handleEvent
E/flutter (21372): #24 _WidgetsFlutterBinding&BindingBase&GestureBinding.dispatchEvent
E/flutter (21372): #25 _WidgetsFlutterBinding&BindingBase&GestureBinding._handlePointerEvent
E/flutter (21372): #26 _WidgetsFlutterBinding&BindingBase&GestureBinding._flushPointerEventQueue
E/flutter (21372): #27 _WidgetsFlutterBinding&BindingBase&GestureBinding._handlePointerDataPacket
E/flutter (21372): #28 _rootRunUnary (dart:async/zone.dart:1136:13)
E/flutter (21372): #29 _CustomZone.runUnary (dart:async/zone.dart:1029:19)
E/flutter (21372): #30 _CustomZone.runUnaryGuarded (dart:async/zone.dart:931:7)
E/flutter (21372): #31 _invoke1 (dart:ui/hooks.dart:223:10)
E/flutter (21372): #32 _dispatchPointerDataPacket (dart:ui/hooks.dart:144:5)
E/flutter (21372):
打印下面给出的 response.body
<!doctype html><html lang="en"><head><title>HTTP Status 415 – Unsupported Media Type</title><style type="text/css">h1 font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;font-size:22px; h2 font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;font-size:16px; h3 font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;font-size:14px; body font-family:Tahoma,Arial,sans-serif;color:black;background-color:white; b font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76; p font-family:Tahoma,Arial,sans-serif;background:white;color:black;font-size:12px; a color:black; a.name color:black; .line height:1px;background-color:#525D76;border:none;</style></head><body><h1>HTTP Status 415 – Unsupported Media Type</h1><hr class="line" /><p><b>Type</b> Status Report</p><p><b>Message</b> Unsupported Media Type</p><p><b>Description</b> The origin server is refusing to service the request because the payload is in a format
【问题讨论】：
【参考方案1】：您必须在发送数据之前对body 进行编码。
改变这个：
return http.post(url, body: body.toJson())
到这里：
return http.post(url, body: json.encode(body.toJson()))
更新
根据你上次的错误，我想你忘了解析toJson userLanguage 和 userRights
Map<String, dynamic> _$UserToJson(User instance) => <String, dynamic>
'iduser': instance.iduser,
'userLanguage': instance.userLanguage.toJson(),
'userRights': instance.userRights.toJson(),
【讨论】：
感谢您的回复。我尝试了您的建议，然后开始出现另一个错误。请查看我帖子中的更新。 打印响应、状态码和正文，可能是url /data/headers 不正确 我已经更新了我的帖子，请检查。当我打印body.toJSON() 时，它显示某些内容显然不正确。这是因为我将named arguments 用于模型并使用flutter packages pub run build_runner build 构建something.g.dart 类吗？我这样做是因为那时我可以只填写模型类的必填字段，而不是在执行post 时填写所有字段。
对不起，我不明白。你指的是我的user.dart 班级吗？我可以看到我有Map<String, dynamic> toJson() => _$UserToJson(this);。您的建议是用您的代码替换它？
是的，因为你需要 userLanguage 和 userRights as json以上是关于Flutter - 无法发出 POST 请求的主要内容，如果未能解决你的问题，请参考以下文章
Flutter web Http post请求无法使用http包
如何在 Flutter/Dart 中使用 url 编码的标头和正文发出 HTTP POST 请求