三方库网站：https://pub.dev

1 http安装和导入

安装

在pubspec.yaml中添加：http: ^0.12.1
image.png

导入

在需要使用的地方 import头文件

  1. import 'package:http/http.dart' as http;

2 dio

文档： https://github.com/flutterchina/dio/blob/master/README-ZH.md

安装

  1. dependencies:
  2.   dio: ^4.0.4

导入

  1. import 'package:dio/dio.dart';

3 get 请求

http的get请求

  1. final response = await http
  2.         .get('http://rap2api.taobao.org/app/mock/283772/api/chat/list');

dio的get请求

  1. final dio = Dio();
  2. dio.get('http://rap2api.taobao.org/app/mock/283772/api/chat/list');

4 dio下载进度显示

  1. //savePath可以是一个字符串，也可以是个回调
  2. void download2(Dio dio, String url, String savePath) {
  3.   dio
  4.     .download(url, (header) {
  5.         return savePath;
  6.       }, onReceiveProgress: showDownloadProgress)
  7.       .whenComplete(() => print('完成'))
  8.       .catchError((e) => print(e));
  9. }
  11. void download1(Dio dio, String url, savePath) {
  12.   dio
  13.       .download(url, savePath, onReceiveProgress: showDownloadProgress)
  14.       .then((value) => print(value))
  15.       .whenComplete(() => print('结束了'))
  16.       .catchError((e) => print(e));
  17. }
  19. void showDownloadProgress(received, total) {
  20.   if (total != -1) {
  21.     print((received / total * 100).toStringAsFixed(0) + "%");
  22.   }
  23. }

5 定义数据模型 Chat

  1. class Chat {
  2.   final String name;
  3.   final String message;
  4.   final String imageUrl;
  6.   const Chat({this.name, this.message, this.imageUrl});
  8.   //map转模型-->工厂构造函数
  9.   factory Chat.fromJson(Map json) {
  10.     return Chat(
  11.       name: json['name'],
  12.       message: json['message'],
  13.       imageUrl: json['imageUrl'],
  14.     );
  15.   }
  16. }

6 关于Map和Json:

Map转Json : json.encode(map)=>返回json

Json转Map:json.decode(str)=>返回map

  1. import 'dart:convert';
  2. final chat = {
  3.      'name': '张三',
  4.      'message': '吃了吗?',
  5.    };
  7.     //Map转Json
  8.    final chatJson = json.encode(chat);
  9.    print(chatJson);
  11.     //Json转Map
  12.    final newChat = json.decode(chatJson);
  13.    print(newChat['name']);
  14.    print(newChat['message']);
  15.    print(newChat is Map);

7 完整写请求+UI刷新（FutureBuilder）

  1. import 'package:flutter/material.dart';
  2. import 'package:http/http.dart' as http;
  3. import '../const.dart';
  4. import 'dart:convert';
  6. class ChatPage extends StatefulWidget {
  7.   @override
  8.   _ChatPageState createState() => _ChatPageState();
  9. }
  11. class _ChatPageState extends State<ChatPage> {
  14.   bool _cancleConnect = false;
  16.   List<Chat> _datas = [];
  18.   @override
  19.   void initState() {
  20.     super.initState();
  22.   }
  24.   Future<List<Chat>> getDatas() async {
  25.     //不再是取消连接了!
  26.     _cancleConnect = false;
  27.     final response = await http
  28.         .get('http://rap2api.taobao.org/app/mock/283772/api/chat/list');
  29.     if (response.statusCode == 200) {
  30.       //获取相应数据,并转成Map类型!
  31.       final responseBody = json.decode(response.body);
  32.       //转模型数组 map中遍历的结果需要返回出去
  33.       List<Chat> chatList = responseBody['chat_list'].map<Chat>((item) {
  34.         return Chat.fromJson(item);
  35.       }).toList();
  36.       return chatList;
  37.     } else {
  38.       throw Exception('statusCode:${response.statusCode}');
  39.     }
  40.   }
  42.   @override
  43.   Widget build(BuildContext context) {
  44.     return Scaffold(
  45.       appBar: AppBar(
  46.         title: Text('微信'),
  47.         backgroundColor: WeChatThemeColor,
  48.       ),
  49.       body: FutureBuilder(
  50.         future: getDatas(),
  51.         builder: (BuildContext context, AsyncSnapshot snapshot) {
  52.           //正在加载
  53.           if (snapshot.connectionState == ConnectionState.waiting) {
  54.             return Center(
  55.               child: Text('Loading...'),
  56.             );
  57.           }
  58.           //加载完毕
  59.           return ListView(
  60.             children: snapshot.data.map<Widget>((item) {
  61.               return ListTile(
  62.                   title: Text(item.name),
  63.                   subtitle: Container(
  64.                     alignment: Alignment.bottomCenter,
  65.                     padding: EdgeInsets.only(right: 10),
  66.                     height: 25,
  67.                     child: Text(
  68.                       item.message,
  69.                       overflow: TextOverflow.ellipsis,
  70.                     ),
  71.                   ),
  72.                   leading: Container(
  73.                     width: 44,
  74.                     height: 44,
  75.                     decoration: BoxDecoration(
  76.                         borderRadius: BorderRadius.circular(6.0),
  77.                         image: DecorationImage(
  78.                             image: NetworkImage(item.imageUrl))),
  79.                   ));
  80.             }).toList(),
  81.           );
  82.         },
  83.       ),
  84.     );
  85.   }
  86. }
  88. class Chat {
  89.   final String name;
  90.   final String message;
  91.   final String imageUrl;
  93.   const Chat({this.name, this.message, this.imageUrl});
  95.   factory Chat.fromJson(Map json) {
  96.     return Chat(
  97.       name: json['name'],
  98.       message: json['message'],
  99.       imageUrl: json['imageUrl'],
  100.     );
  101.   }
  102. }

8 完整的请求+UI刷新（初始化时请求数据）

  1. _cancleConnect = false;
  3.   List<Chat> _datas = [];
  4.   @override
  5.   void initState() {
  6.     super.initState();
  7.     print('Chat的init来了!');
  8.     getDatas()
  9.         .then((List<Chat> datas) {
  10.       print('数据来了!');
  11.       if (!_cancleConnect) {//如果超时后数据的返回，将抛弃数据
  12.         print('更新数据');
  13.         setState(() {
  14.           _datas = datas;
  15.         });
  16.       }
  17.     })
  18.         .catchError((e) {
  19.       print('错误$e');
  20.     })
  21.         .whenComplete(() {
  22.       print('完毕!');
  23.     })
  24.         .timeout(Duration(seconds: 6))
  25.         .catchError((timeout) {
  26.       _cancleConnect = true;
  27.       print('超时输出:$timeout');
  28.     });
  29.   }
  31.   Future<List<Chat>> getDatas() async {
  32.     //不再是取消连接了!
  33.     _cancleConnect = false;
  34.     final response = await http
  35.         .get('http://rap2api.taobao.org/app/mock/283772/api/chat/list');
  36.     if (response.statusCode == 200) {
  37.       //获取相应数据,并转成Map类型!
  38.       final responseBody = json.decode(response.body);
  39.       //转模型数组 map中遍历的结果需要返回出去
  40.       List<Chat> chatList = responseBody['chat_list'].map<Chat>((item) {
  41.         return Chat.fromJson(item);
  42.       }).toList();
  43.       return chatList;
  44.     } else {
  45.       throw Exception('statusCode:${response.statusCode}');
  46.     }
  47.   }
  49.   @override
  50.   Widget build(BuildContext context) {
  51.     return Scaffold(
  52.       appBar: AppBar(
  53.         title: Text('微信'),
  54.         backgroundColor: WeChatThemeColor,
  56.       ),
  57.       body: Container(
  58.         child: _datas.length == 0
  59.             ? Center(
  60.           child: Text("Loading..."),
  61.         )
  62.             : ListView.builder(
  63.           itemCount: _datas.length,
  64.           itemBuilder: (BuildContext context, int index) {
  65.             return ListTile(
  66.                 title: Text(_datas[index].name),
  67.                 subtitle: Container(
  68.                   alignment: Alignment.bottomCenter,
  69.                   padding: EdgeInsets.only(right: 10),
  70.                   height: 25,
  71.                   child: Text(
  72.                     _datas[index].message,
  73.                     overflow: TextOverflow.ellipsis,
  74.                   ),
  75.                 ),
  76.                 leading: Container(
  77.                   width: 44,
  78.                   height: 44,
  79.                   decoration: BoxDecoration(
  80.                       borderRadius: BorderRadius.circular(6.0),
  81.                       image: DecorationImage(
  82.                           image: NetworkImage(_datas[index].imageUrl))),
  83.                 ));
  84.           },
  85.         ),
  86.       ),
  87.     );
  88.   }
  89. }
  92. class Chat {
  93.   final String name;
  94.   final String message;
  95.   final String imageUrl;
  97.   const Chat({this.name, this.message, this.imageUrl});
  99.   factory Chat.fromJson(Map json) {
  100.     return Chat(
  101.       name: json['name'],
  102.       message: json['message'],
  103.       imageUrl: json['imageUrl'],
  104.     );
  105.   }
  106. }

9 dio请求的封装

image.png

网络异常统一格式类hi_error.dart

  1. ///需要登录的异常
  2. class NeedLogin extends HiNetError {
  3.   NeedLogin({int code: 401, String message: '请先登录'}) : super(code, message);
  4. }
  6. ///需要授权的异常
  7. class NeedAuth extends HiNetError {
  8.   NeedAuth(String message, {int code: 403, dynamic data})
  9.       : super(code, message, data: data);
  10. }
  12. ///网络异常统一格式类
  13. class HiNetError implements Exception {
  14.   final int code;
  15.   final String message;
  16.   final dynamic data;
  18.   HiNetError(this.code, this.message, {this.data});
  19. }

网络请求抽象类 & 统一网络层返回格式hi_net_adapter.dart

  1. import 'dart:convert';
  3. import 'package:flutter_bilibli/http/request/base_request.dart';
  5. ///网络请求抽象类
  6. abstract class HiNetAdapter {
  7.   Future<HiNetResponse<T>> send<T>(BaseRequest request);
  8. }
  10. /// 统一网络层返回格式
  11. class HiNetResponse<T> {
  12.   HiNetResponse({
  13.     this.data,
  14.     this.request,
  15.     this.statusCode,
  16.     this.statusMessage,
  17.     this.extra,
  18.   });
  20.   /// Response body. may have been transformed, please refer to [ResponseType].
  21.   T data;
  23.   /// The corresponding request info.
  24.   BaseRequest request;
  26.   /// Http status code.
  27.   int statusCode;
  29.   /// Returns the reason phrase associated with the status code.
  30.   /// The reason phrase must be set before the body is written
  31.   /// to. Setting the reason phrase after writing to the body.
  32.   String statusMessage;
  34.   /// Custom field that you can retrieve it later in `then`.
  35.   dynamic extra;
  37.   /// We are more concerned about `data` field.
  38.   @override
  39.   String toString() {
  40.     if (data is Map) {
  41.       return json.encode(data);
  42.     }
  43.     return data.toString();
  44.   }
  45. }

dio适配器 dio_adapter.dart

  1. import 'package:dio/dio.dart';
  2. import 'package:flutter_bilibli/http/core/hi_error.dart';
  3. import 'package:flutter_bilibli/http/core/hi_net_adapter.dart';
  4. import 'package:flutter_bilibli/http/request/base_request.dart';
  6. ///Dio适配器
  7. class DioAdapter extends HiNetAdapter {
  8.   @override
  9.   Future<HiNetResponse<T>> send<T>(BaseRequest request) async {
  10.     var response, options = Options(headers: request.header);
  11.     var error;
  12.     try {
  13.       if (request.httpMethod() == HttpMethod.GET) {
  14.         response = await Dio().get(request.url(), options: options);
  15.       } else if (request.httpMethod() == HttpMethod.POST) {
  16.         response = await Dio()
  17.             .post(request.url(), data: request.params, options: options);
  18.       } else if (request.httpMethod() == HttpMethod.DELETE) {
  19.         response = await Dio()
  20.             .delete(request.url(), data: request.params, options: options);
  21.       }
  22.     } on DioError catch (e) {
  23.       error = e;
  24.       response = e.response;
  25.     }
  26.     if (error != null) {
  27.       ///抛出HiNetError
  28.       throw HiNetError(response?.statusCode ?? -1, error.toString(),
  29.           data: HiNetResponse(
  30.               data: response.data,
  31.               request: request,
  32.               statusCode: response.statusCode,
  33.               statusMessage: response.statusMessage,
  34.               extra: response));
  35.     }
  36.     return HiNetResponse(
  37.         data: response.data,
  38.         request: request,
  39.         statusCode: response.statusCode,
  40.         statusMessage: response.statusMessage,
  41.         extra: response);
  42.   }
  43. }

网络请求入口hi_net.dart

  1. import 'package:flutter_bilibli/http/core/dio_adapter.dart';
  3. import '../request/base_request.dart';
  4. import 'hi_error.dart';
  5. import 'hi_net_adapter.dart';
  7. ///1.支持网络库插拔设计，且不干扰业务层
  8. ///2.基于配置请求请求，简洁易用
  9. ///3.Adapter设计，扩展性强
  10. ///4.统一异常和返回处理
  11. class HiNet {
  12.   HiNet._();
  14.   static HiNet _instance;
  16.   static HiNet getInstance() {
  17.     if (_instance == null) {
  18.       _instance = HiNet._();
  19.     }
  20.     return _instance;
  21.   }
  23.   Future fire(BaseRequest request) async {
  24.     HiNetResponse response;
  25.     var error;
  26.     try {
  27.       response = await send(request);
  28.     } on HiNetError catch (e) {
  29.       error = e;
  30.       response = e.data;
  31.       printLog(e.message);
  32.     } catch (e) {
  33.       //其它异常
  34.       error = e;
  35.       printLog(e);
  36.     }
  37.     if (response == null) {
  38.       printLog(error);
  39.     }
  40.     var result = response.data;
  41.     printLog(result);
  42.     var status = response.statusCode;
  43.     switch (status) {
  44.       case 200:
  45.         return result;
  46.         break;
  47.       case 401:
  48.         throw NeedLogin();
  49.         break;
  50.       case 403:
  51.         throw NeedAuth(result.toString(), data: result);
  52.         break;
  53.       default:
  54.         throw HiNetError(status, result.toString(), data: result);
  55.         break;
  56.     }
  57.   }
  59.   Future<HiNetResponse<T>> send<T>(BaseRequest request) async {
  60.     ///使用Dio发送请求
  61.     HiNetAdapter adapter = DioAdapter();
  62.     return adapter.send(request);
  63.   }
  65.   void printLog(log) {
  66.     print('hi_net:' + log.toString());
  67.   }
  68. }

网络请求抽象类的封装base_request.dart

  1. import 'package:flutter_bilibli/http/dao/login_dao.dart';
  3. enum HttpMethod { GET, POST, DELETE }
  5. ///基础请求
  6. abstract class BaseRequest {
  7.   // curl -X GET "http://api.devio.org/uapi/test/test?requestPrams=11" -H "accept: */*"
  8.   // curl -X GET "https://api.devio.org/uapi/test/test/1
  9.   var pathParams;
  10.   var useHttps = true;
  12.   String authority() {
  13.     return "api.devio.org";
  14.   }
  16.   HttpMethod httpMethod();
  18.   String path();
  20.   String url() {
  21.     Uri uri;
  22.     var pathStr = path();
  23.     //拼接path参数
  24.     if (pathParams != null) {
  25.       if (path().endsWith("/")) {
  26.         pathStr = "${path()}$pathParams";
  27.       } else {
  28.         pathStr = "${path()}/$pathParams";
  29.       }
  30.     }
  31.     //http和https切换
  32.     if (useHttps) {
  33.       uri = Uri.https(authority(), pathStr, params);
  34.     } else {
  35.       uri = Uri.http(authority(), pathStr, params);
  36.     }
  37.     if (needLogin()) {
  38.       //给需要登录的接口携带登录令牌
  39.       addHeader(LoginDao.BOARDING_PASS, LoginDao.getBoardingPass());
  40.     }
  41.     print('url:${uri.toString()}');
  42.     return uri.toString();
  43.   }
  45.   bool needLogin();
  47.   Map<String, String> params = Map();
  49.   ///添加参数
  50.   BaseRequest add(String k, Object v) {
  51.     params[k] = v.toString();
  52.     return this;
  53.   }
  55.   Map<String, dynamic> header = {
  56.     'course-flag': 'fa',
  57.     //访问令牌，在课程公告获取
  58.     "auth-token": "MjAyMC0wNi0yMyAwMzoyNTowMQ==fa",
  59.   };
  61.   ///添加header
  62.   BaseRequest addHeader(String k, Object v) {
  63.     header[k] = v.toString();
  64.     return this;
  65.   }
  66. }

登录请求参数类login_request.dart

  1. import 'package:flutter_bilibli/http/request/base_request.dart';
  3. class LoginRequest extends BaseRequest {
  4.   @override
  5.   HttpMethod httpMethod() {
  6.     return HttpMethod.POST;
  7.   }
  9.   @override
  10.   bool needLogin() {
  11.     return false;
  12.   }
  14.   @override
  15.   String path() {
  16.     return "/uapi/user/login";
  17.   }
  18. }

注册请求参数类registration_request.dart

  1. import 'package:flutter_bilibli/http/request/base_request.dart';
  3. class RegistrationRequest extends BaseRequest {
  4.   @override
  5.   HttpMethod httpMethod() {
  6.     return HttpMethod.POST;
  7.   }
  9.   @override
  10.   bool needLogin() {
  11.     return false;
  12.   }
  14.   @override
  15.   String path() {
  16.     return '/uapi/user/registration';
  17.   }
  18. }

登录和注册请求数据接口的封装login_dao.dart

  1. import 'package:flutter_bilibli/db/hi_cache.dart';
  2. import 'package:flutter_bilibli/http/core/hi_net.dart';
  3. import 'package:flutter_bilibli/http/request/base_request.dart';
  4. import 'package:flutter_bilibli/http/request/login_request.dart';
  5. import 'package:flutter_bilibli/http/request/registration_request.dart';
  7. class LoginDao {
  8.   static const BOARDING_PASS = "boarding-pass";
  10.   static login(String userName, String password) {
  11.     return _send(userName, password);
  12.   }
  14.   static registration(
  15.       String userName, String password, String imoocId, String orderId) {
  16.     return _send(userName, password, imoocId: imoocId, orderId: orderId);
  17.   }
  19.   static _send(String userName, String password, {imoocId, orderId}) async {
  20.     BaseRequest request;
  21.     if (imoocId != null && orderId != null) {
  22.       request = RegistrationRequest();
  23.     } else {
  24.       request = LoginRequest();
  25.     }
  26.     request
  27.         .add("userName", userName)
  28.         .add("password", password)
  29.         .add("imoocId", imoocId)
  30.         .add("orderId", orderId);
  31.     var result = await HiNet.getInstance().fire(request);
  32.     print(result);
  33.     if (result['code'] == 0 && result['data'] != null) {
  34.       //保存登录令牌
  35.       HiCache.getInstance().setString(BOARDING_PASS, result['data']);
  36.     }
  37.     return result;
  38.   }
  40.   static getBoardingPass() {
  41.     return HiCache.getInstance().get(BOARDING_PASS);
  42.   }
  43. }

10 错误DioError:CERTIFICATE_VERIFY_FAILED

  1. void main() {
  2.   HttpOverrides.global = new MyHttpOverrides();
  3.   runApp(MyApp());
  4. }
  5. class MyHttpOverrides extends HttpOverrides{
  6.   @override
  7.   HttpClient createHttpClient(SecurityContext context){
  8.     return super.createHttpClient(context)
  9.       ..badCertificateCallback = (X509Certificate cert, String host, int port)=> true;
  10.   }
  11. }