Flutter Dio原始碼分析(二)--HttpClient、Http、Dio對比

Jimi發表於2021-08-30
Flutter原始碼HTTPclient

文章系列

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日統計。

相關文章