Flutter網(wǎng)絡(luò)請求的所有姿勢

前言

編寫一個 App绪杏，最離不開的就是網(wǎng)絡(luò)請求了轮锥。在Android 原生中，網(wǎng)絡(luò)請求庫一直在更新毡琉，網(wǎng)絡(luò)請求庫甚多：HttpUrlConnection铁瞒、HttpClient、Volley桅滋、Okhttp慧耍、Retrofit...
Flutter 才出來沒多久，普及率也不是很高丐谋，網(wǎng)絡(luò)請求大致分為三種方式：

Dart 原生的網(wǎng)絡(luò)請求 HttpClient
庫 http
Flutter中文網(wǎng)發(fā)布的 dio

本文分別介紹這三種網(wǎng)絡(luò)請求方式的 GET 和 POST芍碧。

一、原生方式

1.1 get 請求

先上代碼：

  void getNet_1() async {
    var client = new HttpClient();
    var request = await client.getUrl(Uri.parse(url_1));
    var response = await request.close();
    if (response.statusCode == HttpStatus.ok) {
      _content = await response.transform(Utf8Decoder()).join();
    }
  }

async 和 await 表示異步
需要引入的包：

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

pubspec.yaml 文件不需要修改

Dart 語言出來的時間比較晚笋鄙，吸收了前輩語言們的經(jīng)驗师枣，Java 的原生網(wǎng)絡(luò)請求代碼可是一大截，Dart 語言的簡簡單單的幾行萧落，非臣溃現(xiàn)代化。

1.2 post 請求

原生的網(wǎng)絡(luò)請求雖然有 post 方法找岖，但是對 post 請求支持不是很友好陨倡，在網(wǎng)上找了很久也沒找到案例，最后在 stackoverflow 上找到一篇文章：
https://stackoverflow.com/questions/21491543/how-to-do-post-in-dart-command-line-httpclient
還是用其他的網(wǎng)絡(luò)請求方式-_-||

二许布、庫 http

2.1 get 請求

代碼如下：

  void getNet_2() async {
    var client = http.Client();
    http.Response response = await client.get(url_2);
    _content = response.body;
  }

代碼量比原生的簡潔很多兴革，然而還可以更簡潔

  void getNet_2_easy() {
    http.Client()
        .get(url_2)
        .then((http.Response response) {
              _content = response.body;
    });
  }

導(dǎo)包：

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

pubspec.yaml 以前要添加依賴，現(xiàn)在不要了,如果需要如下：

http: '>=0.11.3+12'

2.2 post 請求

  void postNet_2() async {
    var params = Map<String, String>();
    params["username"] = "hellonews";
    params["password"] = "123456";

    var client = http.Client();
    var response = await client.post(url_post, body: params);
    _content = response.body;
  }

這代碼量跟 Java 相比蜜唾，簡直不要太爽杂曲。
最開始這里我遇到一個坑，我是這么寫的：

http.post(url, body: JSON.encode({'username': 'hellonews','password':'123456'}))

返回的數(shù)據(jù)死活說賬號密碼錯誤袁余，后面發(fā)現(xiàn)是表單提交擎勘。。颖榜。-_-||
http 的 post 源碼中有這個一個注釋：

If [body] is a Map, it's encoded as form fields using [encoding]. The
content-type of the request will be set to
"application/x-www-form-urlencoded";

意思大概是：如果你 post 上來的 body 是一個 Map棚饵，它會自動轉(zhuǎn)換成表單提交煤裙。
我在 dio 中使用這個 Map 卻死活說賬號密碼錯誤，最后發(fā)現(xiàn) dio 表單使用另一種方式噪漾。

三硼砰、庫 dio

3.1 get 請求

代碼如下：

  void getNet_3() async {
    Dio dio = new Dio();
    var response = await dio.get(url_3);
    _content = response.data.toString();
  }

pubspec.yaml 要添加依賴：

dependencies:
  ······
  dio: ^1.0.9

導(dǎo)包：

import 'package:dio/dio.dart';

3.2 post 請求

  void postNet_3() async {
    FormData formData = new FormData.from({
      "username": "hellonews",
      "password": 123456,
    });
    var dio = new Dio();
    var response = await dio.post(url_post, data: formData);
    _content = response.data.toString();
  }

對比 dio 和 http 兩個庫，發(fā)現(xiàn)他們其實使用方式差不多欣硼，http 還不要加依賴题翰，那我為什么要用dio 呢？
從 dio 的官方 Github 上 copy 它的介紹來回答這個問題：

dio是一個強大的Dart Http請求庫分别，支持Restful API遍愿、FormData存淫、攔截器耘斩、請求取消、Cookie管理桅咆、文件上傳/下載括授、超時等...

非常明了吧，dio 其實就相當于現(xiàn)在 Android 流行的 Okhttp + Retrofit岩饼。
所以我們?yōu)榱耸∈录孕椋€是用 dio 吧。

完

本文 Github 地址如下：
https://github.com/ldlywt/flutter_demo
本文 post 請求的接口調(diào)試來自鴻洋大神的
http://wanandroid.com/blog/show/2

最后編輯于：2018.11.22 10:26:03

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者