分别用http.dart和Dio.dart请求网络数据实现一个列表

Walden_tinghou

已于 2022-02-17 13:37:13 修改

阅读量2.1k

点赞数

分类专栏： flutter 文章标签：网络 http 网络协议

于 2022-02-17 12:43:30 首次发布

本文链接：https://blog.csdn.net/sunnyboy9/article/details/122980805

版权

flutter 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何使用Dio和http库在Flutter中进行网络请求，分别展示了http.get方法和Dio的用法，包括创建网络数据、解析响应、转换模型以及错误处理。内容涵盖了从获取数据到将数据转换为Chat模型的完整过程。

摘要由CSDN通过智能技术生成

1.首先准备数据,可以点击此链接创建后台模拟网络数据http://rap2.taobao.org
如下图所示，我创建了一个列表数据
在这里插入图片描述
2.http实现，代码为

 Future<List<Chat>> getDatas() async {
    //不再是取消连接了!
    _cancleConnect = false;
    final response = await http
        .get(Uri.parse('http://rap2api.taobao.org/app/mock/298265/api/chat/list'));
    if (response.statusCode == 200) {
      print(response.body);
      //获取相应数据,并转成Map类型!
      final responseBody = json.decode(response.body);
      //转模型数组 map中遍历的结果需要返回出去
      List<Chat> chatList = responseBody['chat_list'].map<Chat>((item) {
        return Chat.fromJson(item);
      }).toList();
      return chatList;
    } else {
      throw Exception('statusCode:${response.statusCode}');
    }
  }

运行后看效果并打印网络数据：
在这里插入图片描述
3.Dio.dart来实现，首先将我们的网络请求封装到一个工具类里

import 'package:dio/dio.dart';

class HttpManager {
  static final Dio dio = Dio();
 static Future<Response> get(url,
      {String method = 'get',
        Map<String, String>? headers,
        Map<String, dynamic> ?queryParameters,
        int? timeout}) {
    //1.创建配置,什么方式请求
    final options = Options(method: method, receiveTimeout: timeout);
    //2.发网络请求
    return dio.request(
      url,
      queryParameters: queryParameters,
      options: options,
    );
  }

接着就可以使用了，注意Dio.dart请求的数据格式是字典类型类型，http请求的数据格式是json类型，所以这里可以直接使用，无需将数据再转成字典类型

 Future<List<Chat>> getDatas() async {
    //不再是取消连接了!
    _cancleConnect = false;
    final response = await HttpManager.get(
        'http://rap2api.taobao.org/app/mock/298265/api/chat/list',
        timeout: 100);

    if (response.statusCode == 200) {
      print('获得网络数据:${response.data}');
      //转模型数组 map中遍历的结果需要返回出去
      List<Chat> chatList = response.data['chat_list'].map<Chat>((item) {
        return Chat.fromJson(item);
      }).toList();
      return chatList;
    } else {
      throw Exception('statusCode:${response.statusCode}');
    }
  }