Flutter 使用http、dio请求获取数据

文章已同步至掘金：https://juejin.cn/post/6844903949137379342
欢迎访问😃，有任何问题都可留言评论哦~

下面介绍两种Flutter中获取数据的方式

使用http获取数据
使用dio获取数据

方式一：http

Get请求数据

首先在目录下的pubspec.yaml文件中需要配置

在pubspec.yaml文件中的dependencies中来配置http，如下：

dependencies:
  http: ^0.12.0+1

配置好，并且保存后，他会自动下载所需要的包

注：千万要注意里面写的格式，不要随便加空格等等，也别乱动里面的代码和结构

然后我们在lib文件夹下，新建一个SelfHttpRequest.dart文件用来测试

首先需要导入所需要的包：

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

然后用stf快捷键生成我们的基本结构，来请求数据，如下：

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

class SelfHttpRequest extends StatefulWidget {
  @override
  _SelfHttpRequestState createState() => _SelfHttpRequestState();
}

class _SelfHttpRequestState extends State<SelfHttpRequest> {
  
  //定义一个数组，用来存放我们获取到的数据
  List _list = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("HTTP请求数据"),
      ),

      //定义一个按钮，当我们点击的时候，可以获取数据
      //当然你也可以把它放到initState里，当渲染页面的时候，直接调用
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {
          // print(666);
          HttpGetTest();
        },
      ),

      //渲染我们获取到的数据
      //我们最好用ListView.builder可以给我们进行动态的渲染  
      body: ListView.builder(
        itemCount: _list.length,
        itemBuilder: (BuildContext context,int i){
          return Text('${_list[i]["nm"]}');
        },
      ),
    );
  }

  //定义方法，用来请求数据，url为数据地址
  HttpGetTest() async {
    String url = 'http://m.maoyan.com/ajax/movieOnInfoList';

    //一定要是http.Response类型，然后调用get获取数据
    http.Response response = await http.get(url);

    //得到原始数据
    // print(response);

    // 用decode转成json对象
    Map<String, dynamic> responseData = json.decode(response.body); 
    // print(responseData["movieList"]);

    //如果想要改变数据的话，一定要用setState方法
    setState(() {
      this._list = responseData["movieList"];
    });
  }
}

几个需要注意的点：

渲染的时候要动态的进行渲染
请求数据是异步的，一定要加 async、await
得到数据后要指定数据的类型
要转换成json对象的格式
改变数据一定要用setState方法

Post请求数据

几乎和Get方式一样

不过，用Post时，你需要给你写的接口传递数据，然后接口会给你返回数据

紧跟上面的代码，在里面再定义一个方法，并添加一个按钮，当点击的时候，可以给接口传递数据，并得到接口给你返回的数据

(只贴部分代码，没必要全部贴上)

定义的按钮

floatingActionButton: FloatingActionButton(
    child: Icon(Icons.add),
    onPressed: () {
      HttpPostTest();
    },
),

实现的方法

//最好在方法前面加一个void用来处理方法没有返回值时的情况
void HttpPostTest() async {
    var url = '你的接口地址';
    
    //body里面是你给接口传递的数据，result是接口给你返回的数据 
    var result = await http.post(url,body:{'name':'Fan','age':'20'});
    
    //接收的结果里面默认有一个statusCode的状态码
    if(result.statusCode == 200){   //200表示成功
      //你可以在前面定义一个变量，并把结果赋给他，用来使用，最好使用decode转化成Map类型
      print(json.decode(result.body));  //打印出接口给你返回的数据，
    }else{
      //如果没有得到返回的结果，就打印出状态码
      print(result.statusCode);
    }
}

注：使用var定义的类型，会根据你的需要，自动的检测你所需要的类型，所以当你不知道你需要的是什么类型时，用var就对了，他是万能的

方式二：dio

几乎和方式一一样：

Get请求数据

在目录下的pubspec.yaml文件中需要配置：

dependencies:
  dio: ^2.2.2

保存后，自动下载所需要的包

然后我们在lib文件夹下，新建一个SelfDioRequest.dart文件用来测试：如下：

import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'dart:convert';

class SelfDioRequest extends StatefulWidget {
  @override
  _SelfDioRequestState createState() => _SelfDioRequestState();
}

class _SelfDioRequestState extends State<SelfDioRequest> {

  //用来接收传过来数据
  List _list = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("dio请求数据"),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {
          // print(666);
          dioGetTest();
        },
      ),

      //渲染数据
      body: ListView.builder(

          //数据的长度，有几个渲染几个，动态的进行渲染
          itemCount: _list.length,
          itemBuilder: (BuildContext context, int i) {
            return Text('${_list[i]["nm"]}');
          }),
    );
  }

  //定义一个方法接收数据，异步异步异步
  dioGetTest() async {
    //可以指定Response类型，也可以使用var
    Response response =
        await Dio().get('http://m.maoyan.com/ajax/movieOnInfoList');
    //得到数据并转换格式
    Map<String, dynamic> responseData = json.decode(response.toString());
    // print(responseData["movieList"]);
    
    setState(() {
      //movieList是获取到的数据中的键名
      this._list = responseData["movieList"];
    });
  }
}

有关注意的点，都写到代码的注释里了！

Post请求数据

和上面HTTP使用Post请求数据一样
你需要给你写的接口传递数据，然后接口会给你返回数据

再定义一个按钮，添加点击事件，点击后，可以给接口传递数据，并得到接口给你返回的数据

定义的按钮:

floatingActionButton: FloatingActionButton(
    child: Icon(Icons.add),
    onPressed: () {
      dioPostTest();
    },
),

实现的方法:

void _postDIO() async {
    var url =
        'https://movie.douban.com/j/search_subjects?type=movie&tag=%E7%83%AD%E9%97%A8&page_limit=50&page_start=0';

    //定义需要传给接口的数据
    Map jsonData = {
      "name":'Fan',
      "age":20,
    };
    //调用接口，传给接口数据，并接收接口返回的数据
    Response response = await Dio().post(url,data:jsonData);

    //打印出接口给我们返回的数据,使用 .data 自动的帮你转化成Map类型
    print(response.data);
  }

改进代码

感觉上面的代码太乱了，所以简单整理了一下，贴上全部的代码

HTTP方式

import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:http/http.dart' as http;

class HTTPDemo extends StatefulWidget {
  @override
  _HTTPDemoState createState() => _HTTPDemoState();
}

class _HTTPDemoState extends State<HTTPDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('HTTP'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('HTTP方式'),
            RaisedButton(
              child: Text("Get请求数据"),
              onPressed: _getHTTP,
            ),
            RaisedButton(
              child: Text("Post请求数据"),
              onPressed: _postHTTP,
            ),
          ],
        ),
      ),
    );
  }
  void _getHTTP() async {
    var url = 'https://movie.douban.com/j/search_subjects?type=movie&tag=%E7%83%AD%E9%97%A8&page_limit=50&page_start=0';
    var result = await http.get(url);
    // print(result);
    if(result.statusCode == 200){
      print(json.decode(result.body));
    }
  }
  void _postHTTP() async {
    var url = 'https://movie.douban.com/j/search_subjects?type=movie&tag=%E7%83%AD%E9%97%A8&page_limit=50&page_start=0';
    var result = await http.post(url,body:{'name':'Fan','age':'20'});
    if(result.statusCode == 200){
      print(json.decode(result.body));
    }else{
      print(result.statusCode);
    }
  }
}

Dio方式

import 'package:flutter/material.dart';
import 'package:dio/dio.dart';
import 'dart:convert';

class DioDemo extends StatefulWidget {
  @override
  _DioDemoState createState() => _DioDemoState();
}

class _DioDemoState extends State<DioDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('DIO'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('DIO方式'),
            RaisedButton(
              child: Text("Get请求数据"),
              onPressed: _getDIO,
            ),
            RaisedButton(
              child: Text("Post请求数据"),
              onPressed: _postDIO,
            ),
          ],
        ),
      ),
    );
  }

  void _getDIO() async {
    var url =
        'https://movie.douban.com/j/search_subjects?type=movie&tag=%E7%83%AD%E9%97%A8&page_limit=50&page_start=0';

    //可以指定Response，当然也可以使用var，请求数据是异步操作
    Response response = await Dio().get(url);

    print(response); //得到原数据  数据形式 {"xxx":[]}

    //使用Dio的话可以使用 .data 自动的帮你转化成Map类型(也就是对象)
    print(response.data); //数据形式  {xxx:[]}

    //可以用这种方法判断类型
    print(response.data is String); // false
    print(response.data is Map); // true
  }

  void _postDIO() async {
    var url =
        'https://movie.douban.com/j/search_subjects?type=movie&tag=%E7%83%AD%E9%97%A8&page_limit=50&page_start=0';

    //定义需要传给接口的数据
    Map jsonData = {
      "name":'Fan',
      "age":20,
    };
    //调用接口，传给接口数据，并接收接口返回的数据
    Response response = await Dio().post(url,data:jsonData);

    //打印出接口给我们返回的数据,使用 .data 自动的帮你转化成Map类型
    print(response.data);
  }
}

咖啡名单	https://blog.fanjunyang.zone/pay-coffee
Paypal	https://paypal.me/junyangfan
BTC (Bitcoin)	3PQAbWdvH1yMSUV1SDkwpjcNW1UaDWs3Jt
USDT (TRC20)	TNVHbWeDcXZ5vXHPt9svePPKs5zZLzX4PS

咖啡名单	https://blog.fanjunyang.zone/pay-coffee
Paypal	https://paypal.me/junyangfan
BTC (Bitcoin)	3PQAbWdvH1yMSUV1SDkwpjcNW1UaDWs3Jt
USDT (TRC20)	TNVHbWeDcXZ5vXHPt9svePPKs5zZLzX4PS

目录CONTENT

Flutter 使用http、dio请求获取数据

方式一：http

Get请求数据

Post请求数据

方式二：dio

Get请求数据

Post请求数据

改进代码

HTTP方式

Dio方式

@_@

评论区