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

·  阅读 298
Flutter Dio源码分析(二)--HttpClient、Http、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仓库地址

前言

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

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改