Flutter Dio源码分析--HttpClientHttpDio对比

Posted 2021-09-03 Jimi

文章系列

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仓库地址

前言

在前文中我们对Dio进行了基本介绍，也写了一个简单的示例，今天我们继续来讲一下Flutter 网络请求的三种请求方式的对比，以达到更好理解Dio网络请求库的目的。

系统自带网络请求HttpClient

步骤一：创建一个HttpClient

HttpClient httpClient = HttpClient();

步骤二：打开http连接,设置请求头

HttpClientRequest request = await httpClient.getUrl(Uri.parse("http://localhost:8080/getUserInfo"));

步骤三：通过HttpClientRequest可以设置请求header

request.headers.add("token", "123456");

步骤四：等待连接服务器

HttpClientResponse response = await request.close();

步骤五：读取响应内容

// 响应流数据以utf8编码格式返回
String responseBody = await response.transform(utf8.decoder).join();

步骤六：请求结束,关闭httpClient

httpClient.close();

完整示例代码

import \'dart:convert\';
import \'dart:io\';

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

class HttpClientExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    void _getUserInfo() async {
      try {
        // 1. 创建httpClient
        HttpClient httpClient = HttpClient();
        // 2. 打开http连接,设置请求头
        HttpClientRequest request = await httpClient.getUrl(Uri.parse("http://localhost:8080/getUserInfo"));
        // 3. 通过HttpClientRequest可以设置请求header
        request.headers.add("token", "123456");
        // 4. 等待连接服务器
        HttpClientResponse response = await request.close();
        // 5. 读取响应内容
        String responseBody = await response.transform(utf8.decoder).join();
        // 6. 请求结束,关闭httpClient
        httpClient.close();

        print(responseBody);
      } catch (e) {
        print(e);
      }
    }

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

第三方网络请求库Http

步骤一：添加依赖

dependencies:
  http: ^0.13.3 #latest version

步骤二：导入库

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

步骤三：发送请求

var response = await http.post(Uri.parse("http://localhost:8080/getUserInfo"));

完整实例代码

import \'dart:convert\';
import \'dart:io\';

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

class HttpClientExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    void _getUserInfo() async {
      try {
        // 1. 创建httpClient
        HttpClient httpClient = HttpClient();
        // 2. 打开http连接,设置请求头
        HttpClientRequest request = await httpClient.getUrl(Uri.parse("http://localhost:8080/getUserInfo"));
        // 3. 通过HttpClientRequest可以设置请求header
        request.headers.add("token", "123456");
        // 4. 等待连接服务器
        HttpClientResponse response = await request.close();
        // 5. 读取响应内容
        String responseBody = await response.transform(utf8.decoder).join();
        // 6. 请求结束,关闭httpClient
        httpClient.close();

        print(responseBody);
      } catch (e) {
        print(e);
      }
    }

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

第三方网络请求库Dio

步骤一：添加依赖

dependencies:
  dio: ^4.0.0 #latest version

步骤二：导入库

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

步骤三：发送请求

var response = await Dio().get(\'http://localhost:8080/getUserInfo\');

完整示例代码

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请求"),
            )
          ],
        ),
      ),
    );
  }
}

总结

原生HttpClient发起网络请求非常的复杂，很多东西还需自己手动处理。如果涉及到上传、下载、断点续传 等那肯定非常繁琐，不建议使用。再来说一下Dio 和 http 两个第三方组件，他们封装的功能都差不多，反而 Dio 更强大易用，而且从gitbub的Star来说，Dio10000 star，而http才691 star，该数据由2021年08月24日统计。