Flutter网络请求的所有姿势

前言

编写一个 App,最离不开的就是网络请求了。在Android 原生中,网络请求库一直在更新,网络请求库甚多:HttpUrlConnection、HttpClient、Volley、Okhttp、Retrofit...
Flutter 才出来没多久,普及率也不是很高,网络请求大致分为三种方式:

  • Dart 原生的网络请求 HttpClient
  • http
  • Flutter中文网发布的 dio

本文分别介绍这三种网络请求方式的 GETPOST

一、原生方式

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();
    }
  }
  • asyncawait 表示异步

  • 需要引入的包:

import 'dart:convert';
import 'dart:io';
  • pubspec.yaml 文件不需要修改

Dart 语言出来的时间比较晚,吸收了前辈语言们的经验,Java 的原生网络请求代码可是一大截,Dart 语言的简简单单的几行,非常现代化。

1.2 post 请求

原生的网络请求虽然有 post 方法,但是对 post 请求支持不是很友好,在网上找了很久也没找到案例,最后在 stackoverflow 上找到一篇文章:
https://stackoverflow.com/questions/21491543/how-to-do-post-in-dart-command-line-httpclient
还是用其他的网络请求方式-_-||

二、库 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;
    });
  }
  • 导包:
import 'package:http/http.dart' as http;
  • pubspec.yaml 以前要添加依赖,现在不要了,如果需要如下:
http: '>=0.11.3+12'
2.2 post 请求
  void postNet_2() async {
    var params = Map();
    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'}))

返回的数据死活说账号密码错误,后面发现是表单提交。。。-_-||
httppost 源码中有这个一个注释:

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,它会自动转换成表单提交。
我在 dio 中使用这个 Map 却死活说账号密码错误, 最后发现 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
  • 导包:
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();
  }

对比 diohttp 两个库,发现他们其实使用方式差不多,http 还不要加依赖,那我为什么要用dio 呢?
dio 的官方 Github 上 copy 它的介绍来回答这个问题:

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

非常明了吧,dio 其实就相当于现在 Android 流行的 Okhttp + Retrofit
所以我们为了省事,还是用 dio 吧。

  • 本文 Github 地址如下:
    https://github.com/ldlywt/flutter_demo
  • 本文 post 请求的接口调试来自鸿洋大神的
    http://wanandroid.com/blog/show/2

你可能感兴趣的:(Flutter网络请求的所有姿势)