flutterhttp进行网络请求

一.flutter 网络请求的三种方式

1.HttpClient请求

实现步骤：

1).导入包

1.  
   import 'dart:convert';
2.  
   import 'dart:io';

2).创建HttpClient

var httpClient=HttpClient();

3). Http连接，并获取解析url

var request=await httpClient.getUrl(Uri.parse(url));

 这里可以附加参数，并通过HttpClientRequest设置请求header，eg:

1.  
   Uri uri = Uri(scheme: "https", host: "flutterchina.club", queryParameters: {
2.  
   "name":"jon",
3.  
   "pwd":"1234"
4.  
   });

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

此处也可设置 Get 请求、Post 请求、Put 请求、Delete 请求，eg :源码

1.  
   /**
2.  
   * Opens a HTTP connection using the GET method.
3.  
   *
4.  
   * The server is specified using [host] and [port], and the path
5.  
   * (including a possible query) is specified using
6.  
   * [path].
7.  
   *
8.  
   * See [open] for details.
9.  
   */
10.  
    Future<HttpClientRequest> get(String host, int port, String path);
11.  
     
12.  
    /**
13.  
    * Opens a HTTP connection using the GET method.
14.  
    *
15.  
    * The URL to use is specified in [url].
16.  
    *
17.  
    * See [openUrl] for details.
18.  
    */
19.  
    Future<HttpClientRequest> getUrl(Uri url);
20.  
     
21.  
    /**
22.  
    * Opens a HTTP connection using the POST method.
23.  
    *
24.  
    * The server is specified using [host] and [port], and the path
25.  
    * (including a possible query) is specified using
26.  
    * [path].
27.  
    *
28.  
    * See [open] for details.
29.  
    */
30.  
    Future<HttpClientRequest> post(String host, int port, String path);
31.  
     
32.  
    /**
33.  
    * Opens a HTTP connection using the POST method.
34.  
    *
35.  
    * The URL to use is specified in [url].
36.  
    *
37.  
    * See [openUrl] for details.
38.  
    */
39.  
    Future<HttpClientRequest> postUrl(Uri url);
40.  
     
41.  
    /**
42.  
    * Opens a HTTP connection using the PUT method.
43.  
    *
44.  
    * The server is specified using [host] and [port], and the path
45.  
    * (including a possible query) is specified using [path].
46.  
    *
47.  
    * See [open] for details.
48.  
    */
49.  
    Future<HttpClientRequest> put(String host, int port, String path);
50.  
     
51.  
    /**
52.  
    * Opens a HTTP connection using the PUT method.
53.  
    *
54.  
    * The URL to use is specified in [url].
55.  
    *
56.  
    * See [openUrl] for details.
57.  
    */
58.  
    Future<HttpClientRequest> putUrl(Uri url);
59.  
     
60.  
    /**
61.  
    * Opens a HTTP connection using the DELETE method.
62.  
    *
63.  
    * The server is specified using [host] and [port], and the path
64.  
    * (including a possible query) is specified using [path].
65.  
    *
66.  
    * See [open] for details.
67.  
    */
68.  
    Future<HttpClientRequest> delete(String host, int port, String path);
69.  
     
70.  
    /**
71.  
    * Opens a HTTP connection using the DELETE method.
72.  
    *
73.  
    * The URL to use is specified in [url].
74.  
    *
75.  
    * See [openUrl] for details.
76.  
    */
77.  
    Future<HttpClientRequest> deleteUrl(Uri url);

4).关闭请求, 等待响应

var response=await request.close();

5).解码响应的内容

1.  
   if(response.statusCode==HttpStatus.ok){
2.  
   var json=await response.transform(utf8.decoder).join();

2.http库请求

1).  pubspec.yaml 中添加依赖包

1.  
   dependencies:
2.  
   flutter:
3.  
   sdk: flutter
4.  
    
5.  
   http: '>=0.11.3 12'

2). 代码中导入包

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

3).get，post实现

1.  
   void getRequest() async {
2.  
   var client = http.Client();
3.  
   http.Response response = await client.get(url);
4.  
   _ipAddress = response.body;
5.  
   }
6.  
    
7.  
   void postRequest() async {
8.  
   var params = Map<String, String>();
9.  
   params["name"] = "jon";
10.  
    params["pwd"] = "1234";
11.  
     
12.  
    var client = http.Client();
13.  
    var response = await client.post(uri, body: params);
14.  
    _ipAddress = response.body;
15.  
    }

3.第三方库dio请求

1).参考dio4.0.4

二.HttpClient 实现demo展示

1.  
   class getIpPage extends StatefulWidget{
2.  
   @override
3.  
   State<StatefulWidget> createState()=> _getIpPageState();
4.  
   }
5.  
    
6.  
   class _getIpPageState extends State<getIpPage>{
7.  
   var _ipAddress="192.168.0.1";
8.  
    
9.  
   _getIpAddress() async{
10.  
    var url='https://httpbin.org/ip';
11.  
    var httpClient=HttpClient();
12.  
    String ipResult;
13.  
    try{
14.  
    var request=await httpClient.getUrl(Uri.parse(url));
15.  
    var response=await request.close();
16.  
    if(response.statusCode==HttpStatus.ok){
17.  
    var json=await response.transform(utf8.decoder).join();
18.  
    var data=jsonDecode(json);
19.  
    ipResult=data['origin'];
20.  
    }else{
21.  
    ipResult =
22.  
    'Error getting IP address,Http status is: ${response.statusCode}';
23.  
    }
24.  
     
25.  
    }catch(exception){
26.  
    ipResult = 'Exception,Failed getting IP address';
27.  
    }
28.  
     
29.  
    setState(() {
30.  
    _ipAddress=ipResult;
31.  
    });
32.  
    }
33.  
     
34.  
     
35.  
    @override
36.  
    Widget build(BuildContext context) {
37.  
    var stack = Stack(
38.  
    alignment: Alignment.center,
39.  
    children: [
40.  
    Container(
41.  
    decoration: const BoxDecoration(
42.  
    color: Colors.black45,
43.  
    ),
44.  
    child: new Column(
45.  
    mainAxisAlignment: MainAxisAlignment.center,
46.  
    children: [
47.  
    Text(
48.  
    'Current IP address is: $_ipAddress.',
49.  
    style: const TextStyle(
50.  
    fontSize: 12.0,
51.  
    fontWeight: FontWeight.bold,
52.  
    color: Colors.white,
53.  
    ),
54.  
    ),
55.  
    RaisedButton(
56.  
    onPressed: _getIpAddress,
57.  
    child: new Text('Get IP address'),
58.  
    ),
59.  
    ],
60.  
    )
61.  
    ),
62.  
    ],
63.  
    );
64.  
     
65.  
    return stack;
66.  
    }
67.  
     
68.  
    }

三.效果展示

这篇好文章是转载于：学新通技术网