Flutter 使用Dio请求返回数据不是Json字符串,而是Json对象

今天用使用Dio加载数据的时候出现一个异常,就是返回的数据是一个json对象,而不是json字符串,导致无法使用json解析。

错误返回如下:

{title: book, content: think in java}

正常数据应该是这样的:

{"title":"book","content":"think in java"}

经过一番查找后发现官网上有一段备注的:

在这里插入图片描述
说当响应头的content-type为"application/json"时,dio会自动将json转换成json对象,并且responseType默认是json类型接收

于是就在拦截器中打印请求头,如下:
在这里插入图片描述
发现请求头中啥都没有。或者是application/json(content-type是application/json的时候,我又把它设置为空了)

解决办法

没办法只能谷歌搜索dio will parse response string to json,没想到stackoverflow 也有人遇到同样的问题:
https://stackoverflow.com/questions/55666787/how-to-fix-type-errors-when-parsing-json-in-flutter

解决办法是:将responseType 设置为ResponseType.plain,默认使用json接收的。
在这里插入图片描述
这样就可以接收到正常的json字符串了。

总结

其实我这边用了两个接口来测试的,一个是人家的接口,不需要设置content-type和response-type也能获得正常的json字符串。

出现问题的数据则是我们公司的后台接口,所以这个问题具体原因还真不好说。但是使用okhttp确可以获得正常的数据。

所以我估计的是拿到的数据应该就是json数据,所以不需要再使用json类型来接收,使用plain就行了
在这里插入图片描述
可以看到,使用json来接收的话,它会把我们的数据再次装换一次,就成了不能解析的对象了。而使用plain只是重新编码了以下。

所以具体使用json还是其他类型,需要根据实际情况来决定。

  • 5
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
首先,在Flutter使用http插件请求json数据需要先在`pubspec.yaml`文件中添加依赖: ```yaml dependencies: http: ^0.12.2 ``` 然后在Dart文件中导入http插件: ```dart import 'package:http/http.dart' as http; ``` 接着,可以使用http插件中的`get()`方法来请求json数据,例如: ```dart Future<List<dynamic>> fetchData() async { final response = await http.get('https://jsonplaceholder.typicode.com/posts'); if (response.statusCode == 200) { return json.decode(response.body); } else { throw Exception('Failed to load data'); } } ``` 这个例子中,我们访问了一个在线的json数据接口,这个接口返回的是一个包含多个文章信息的json数组。在请求成功后,我们使用`json.decode()`方法将json字符串转换为List<dynamic>类型的数据,并返回给调用方。 最后,我们可以在Flutter使用ListView等组件展示这些数据,例如: ```dart class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter HTTP Demo', home: Scaffold( appBar: AppBar(title: Text('Flutter HTTP Demo')), body: FutureBuilder<List<dynamic>>( future: fetchData(), builder: (context, snapshot) { if (snapshot.hasData) { return ListView.builder( itemCount: snapshot.data.length, itemBuilder: (context, index) { return ListTile( title: Text(snapshot.data[index]['title']), subtitle: Text(snapshot.data[index]['body']), ); }, ); } else if (snapshot.hasError) { return Text("${snapshot.error}"); } return CircularProgressIndicator(); }, ), ), ); } } ``` 这个例子中,我们使用了FutureBuilder来异步构建ListView组件,当请求数据时,ListView的itemCount就是数据的长度,而每个item则显示了文章的标题和内容。如果请求失败,则显示异常信息。如果请求还在进行中,则显示一个圆形进度条。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值