Flutter Dio源码分析(一)--Dio介绍

文章系列

Flutter Dio源码分析(一)–Dio介绍

Flutter Dio源码分析(二)–HttpClient、Http、Dio对比

Flutter Dio源码分析(三)–深度剖析

Flutter Dio源码分析(四)–封装

视频系列

Flutter Dio源码分析(一)–Dio介绍视频教程

Flutter Dio源码分析(二)–HttpClient、Http、Dio对比视频教程

Flutter Dio源码分析(三)–深度剖析视频教程

Flutter Dio源码分析(四)–封装视频教程

源码仓库地址

github仓库地址

前言

Flutter中网络请求有三种实现方式

1. 系统自带的HttpClient

2. 网络请求第三方库Http

3. 网络请求第三方库Dio

   而Dio是目前比较流行的网络请求库，里面包含了很多如 Restful API 、拦截器 、自定义适配器实现无缝切换其他网络库 等操作。

目的

本文主要是对Dio网络请求库进行源码分析，最后会对Dio封装一个通用且使用方便的类。

本文中所用到的所有网络请求均为请求本地网络请求，目的是为了方便调试，由SpringBoot驱动。

Dio介绍

dio是一个强大的Dart Http请求库，支持Restful API、FormData、拦截器、请求取消、Cookie管理、文件上传/下载、超时、自定义适配器等。

关键词解释

1、Restful API

1.1 API

API（Application Programming Interface，应用程序接口）是一些预先定义的函数，或指软件系统不同组成部分衔接的约定。 目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

1.2 REST

REST即表述性状态传递（英文：Representational State Transfer，简称REST）。简单来说，就是用URI表示资源，用HTTP方法(GET, POST, PUT, DELETE)表征对这些资源的操作。

2、FromData

Dio支持发送FormData, 请求数据将会以 multipart/form-data方式编码, FormData中可以一个或多个包含文件。主要目的用于文件上传操作。

注意: 只有 post 方法支持发送 FormData.

3、拦截器

每个 Dio 实例都可以添加任意多个拦截器，他们组成一个队列，拦截器队列的执行顺序是FIFO先进先出原则。通过拦截器你可以在请求之前、响应之后和发生异常时(但还没有被 then 或 catchError处理)做一些统一的预处理操作。

4、请求取消

可以通过 cancel token 来取消发起的请求。

5、Cookie管理

CookieManager 拦截器可以帮助我们自动管理请求、响应 cookie。

6、文件上传/下载

Dio支持单文件和多文件的上传

7、超时

Dio可设定超时时间，当在约定时间内未响应，将报错。

8、自定义适配器

内置的适配器可无缝切换到别的请求库而不用改之前的代码。

如何使用

步骤一：添加依赖

dependencies:
  dio: ^4.0.0 

步骤二：发送请求

import 'package:dio/dio.dart';
void _sendDioGet() async {
  try {
    var response = await Dio().get('http://localhost:8080/getUserInfo');
    print(response);
  } catch (e) {
    print(e);
  }
}

完整示例代码

import 'package:dio/dio.dart';
import 'package:flutter/material.dart';

class DioExample extends StatelessWidget {

  void _getUserInfo() async {
    try {
      var response = await Dio().get('http://localhost:8080/getUserInfo');
      print(response);
    } catch (e) {
      print(e);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("DioExample"),
      ),
      body: Center(
        child: Column(
          children: [
            TextButton(
              onPressed: _getUserInfo,
              child: Text("发送get请求"),
            )
          ],
        ),
      ),
    );
  }
}