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

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}');
    }
  }