Flutter 实战开发-网络请求

flutter中常见的网络请求有三种分别是

1，Dart 原生的网络请求 HttpClient、

2，第三方网络请求 http

3，以及 Flutter 中的 Dio。

本文主要比较细致的讲解上述网络请求框架，以及对于charles抓包问题的处理。
本文demo

演示效果

一、HttpClient

HttpClient位于dart:io包中，属于dart语言自带网络请求

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

1.1、创建一个HttpClient

Dart定义变量的方式，这里可以使用var、HttpClient、final都行

// 1.创建HttpClient对象
final httpClient = HttpClient();
// final HttpClient httpClient = new HttpClient();

1.2、构建请求的uri(请求参数)

在这步我们可以设置http或者https、host、请求参数queryParameters等，具体参考Uri源码，如下

factory Uri(
    {String? scheme,
    String? userInfo,
    String? host,
    int? port,
    String? path,
    Iterable? pathSegments,
    String? query,
    Map*/ >? queryParameters,
    String? fragment}) = _Uri;

当然我们也可以直接写死请求链接

// 2.构建请求的uri
final uri = Uri.parse("http://www.tianqiapi.com/api/?version=v1&appid=97799796&appsecret=mN3u09pY");

上述方式等价于

final Uri uri=Uri(scheme: "http", host: "www.tianqiapi.com",path:'/api/' , queryParameters: {
  "version":"v1",
  "appid":"97799796",
  "appsecret":"mN3u09pY",
});

1.3、设置网络请求代理

没有抓包需求的可以不看这步。

Flutter 应用的网络请求是不走手机的系统代理的，如有charles、fiddler抓包需求，需要设置代理如下：

// 3.设置debug代理
httpClient.findProxy = (uri) {
  // 用1个开关设置是否开启代理
  return AppConstant.isDebug ?  "PROXY localhost:8888" : 'DIRECT';
};

1.4、构建请求

1.4.1、设置请求方式

在这步我们可以设置请求方式

// 4.构建请求(同时您也可以配置请求headers、 body。)
final request = await httpClient.getUrl(uri);

post、delete如下，更多可以点进去参照源码

final request = await httpClient.postUrl(uri);
final request = await httpClient.deleteUrl(uri);

1.4.2、设置headers

request.headers.add("user-agent", "test");
request.headers.add("Authorization", "LKSJDLFJSDLKJSLKklsdj");

charles抓包验证如下

1.4.3、设置cookies

request.cookies.add(Cookie("name", "value"));

charles抓包验证如下

1.5、发送请求

// 5.发送请求，必须
final response = await request.close();

1.6、解码响应的内容

注意这里需要utf8转码，否则显示乱码

if (response.statusCode == HttpStatus.ok) {
  // 6.解码响应的内容.
  var temp = await response.transform(utf8.decoder).join();
  var result = json.decode(temp);
  setState(() {
    this.result = result.toString();
  });
}

1.7、全部代码

void requestNetwork() async {
  // 1.创建HttpClient对象
  final httpClient = HttpClient();
  // final HttpClient httpClient = new HttpClient();

  // 2.构建请求的uri
  final uri = Uri.parse("http://www.tianqiapi.com/api/?version=v1&appid=97799796&appsecret=mN3u09pY");
  // final Uri uri=Uri(scheme: "http", host: "www.tianqiapi.com",path:'/api/' , queryParameters: {
  //   "version":"v1",
  //   "appid":"97799796",
  //   "appsecret":"mN3u09pY",
  // });

  // 3.设置debug代理
  httpClient.findProxy = (uri) {
    // 用1个开关设置是否开启代理
    return AppConstant.isDebug ?  "PROXY localhost:8888" : 'DIRECT';
  };

  // 4.构建请求(同时您也可以配置请求headers、 body。)
  final request = await httpClient.getUrl(uri);
  // final request = await httpClient.postUrl(uri);
  // final request = await httpClient.deleteUrl(uri);

  // request.cookies.add(Cookie("name", "value"));
  // request.headers.add("user-agent", "test");
  // request.headers.add("Authorization", "LKSJDLFJSDLKJSLKklsdj");

  // 5.发送请求，必须
  final response = await request.close();
  setState(() {
    this.statusCode = response.statusCode.toString();
  });
  if (response.statusCode == HttpStatus.ok) {
    // 6.解码响应的内容.
    var temp = await response.transform(utf8.decoder).join();
    var result = json.decode(temp);
    setState(() {
      this.result = result.toString();
    });
  }
}

二、http

添加依赖与导包

pubspec.yaml的dependencies添加

http : 0.13.3

导包

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

2.1、创建Client

// 1.创建Client
final client = http.Client();d

2.2、构建请求的uri(请求参数)

请求参数参考上面的1.2步骤

// 2.构建uri
final url = Uri.parse("http://www.tianqiapi.com/api/?version=v1&appid=97799796&appsecret=mN3u09pY");

2.3、发送请求

更改这里的get，切换请求方式

// 3.发送请求
final response = await client.get(url);

2.4、获取结果

if (response.statusCode == HttpStatus.ok) {
  var temp = response.body;
  var result = json.decode(temp);
  setState(() {
    this.result = result.toString();
  });
}

2.5、全部代码

void requestNetwork() async {
  // 1.创建Client
  final client = http.Client();

  // 2.构建uri
  final url = Uri.parse("http://www.tianqiapi.com/api/?version=v1&appid=97799796&appsecret=mN3u09pY");

  // 3.发送请求
  final response = await client.get(url);

  // 4.获取结果
  setState(() {
    this.statusCode = response.statusCode.toString();
  });
  if (response.statusCode == HttpStatus.ok) {
    var temp = response.body;
    var result = json.decode(temp);
    setState(() {
      this.result = result.toString();
    });
  }
}

三、Dio

添加依赖与导包

pubspec.yaml的dependencies添加

dio : 4.0.0

导包

import 'package:dio/dio.dart';

3.1、创建Dio请求对象

final dio = Dio();

3.2、构建请求的uri(请求参数)

请求参数参考上面的1.2步骤

// 2.构建uri
final url = Uri.parse("http://www.tianqiapi.com/api/?version=v1&appid=97799796&appsecret=mN3u09pY");

3.3、设置网络请求代理

// 3.设置debug代理
(dio.httpClientAdapter as DefaultHttpClientAdapter).onHttpClientCreate = (client) {
  client.findProxy = (Uri) {
    // 用1个开关设置是否开启代理
    return AppConstant.isDebug ?  "PROXY localhost:8888" : 'DIRECT';
  };
};

3.4、发送请求

更改这里的getUri，切换请求方式

// 4.发送网络请求
final response = await dio.getUri(uri);

3.5、获取结果

response.data.toString()

3.6、全部代码

void requestNetwork() async {
  // 1.创建Dio请求对象
  final dio = Dio();

  // 2.构建uri
  final uri = Uri.parse("http://www.tianqiapi.com/api/?version=v1&appid=97799796&appsecret=mN3u09pY");

  // 3.发送网络请求
  final response = await dio.getUri(uri);

  // 4.打印请求结果
  setState(() {
    this.statusCode = response.statusCode.toString();
  });
  if (response.statusCode == HttpStatus.ok) {
    setState(() {
      this.result = response.data.toString();
    });
  }
}