目 录CONTENT

文章目录

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

俊阳IT知识库
2023-02-18 / 0 评论 / 0 点赞 / 419 阅读 / 2,099 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2023-03-14,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。
广告

文章已同步至掘金: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);
  }
}

@_@

0

评论区