Flutter学习9 - http 中 get/post 请求示例

已于 2024-03-11 21:02:55 修改
阅读量1k 收藏 5
点赞数 6
分类专栏： Flutter Learning 文章标签： flutter 学习 http
于 2024-03-05 09:53:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41733225/article/details/136460794
版权

1、配置 http

pubspec.yaml

dependencies:
  http:  ^0.13.4
  flutter:
    sdk: flutter

.dart

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

2、示例

（1）工具使用 - postman

  • 可以使用 postman 插件中的示例来测试 get/post 请求

在这里插入图片描述

（2）代码实现示例

  • 点击按钮，发起 Get/Post 请求，并将请求结果展示到界面上
    在这里插入图片描述

http_page.dart

import 'dart:convert';
import 'dart:typed_data';

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

class HttpDemo extends StatefulWidget {
  const HttpDemo({super.key});

  @override
  State<HttpDemo> createState() => _HttpDemoState();
}

class _HttpDemoState extends State<HttpDemo> {
  //展示请求结果
  var resultShow = "";

  //请求结果解析
  var resultDecodeShow = "";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Http 的 post 请求"),
      ),
      body: Column(
        children: [
          Center(
            child: _httpGetButton(),
          ),
          //post 请求按钮 - form
          Center(
            child: _httpPostFormButton(),
          ),
          //post 请求按钮 - json
          Center(
            child: _httpPostJsonButton(),
          ),
          Row(
            children: [
              Expanded(
                  child: Text(
                '请求结果：\n $resultShow',
                textAlign: TextAlign.left,
              )),
            ],
          ),
          Row(
            children: [
              Expanded(
                  child: Text(
                '请求结果（解析）：\n $resultDecodeShow',
                textAlign: TextAlign.left,
              )),
            ],
          ),
        ],
      ),
    );
  }

  //get 按钮
  _httpGetButton() {
    return ElevatedButton(onPressed: _doGet, child: const Text('发起 Get 请求'));
  }

  //post 按钮 - form
  _httpPostFormButton() {
    return ElevatedButton(
        onPressed: _doFormPost, child: const Text('发起 post 请求 - form'));
  }

  //post 按钮 - json
  _httpPostJsonButton() {
    return ElevatedButton(
        onPressed: _doJsonPost, child: const Text('发起 post 请求 - json'));
  }

  // utf8 解码
  _decodeUtf8(String responseBody) {
    var bytes = Uint8List.fromList(responseBody.codeUnits);
    String decodeString = utf8.decode(bytes);
    var decodeMap = json.decode(decodeString);
    return decodeMap;
  }

  //解析结果 json 数据
  String _decodeResult(String jsonString) {
    var map = jsonDecode(jsonString);
    var decodeString = "";
    map.forEach((key, value) {
      decodeString += "key: $key ------ value: $value\n";
    });
    return decodeString;
  }

  //请求成功
  _success(http.Response response, bool isNeedUtf8) {
    setState(() {
      if (isNeedUtf8) {
        //返回结果的汉字用了 utf8 编码，所以需要对结果进行 utf8 解码
        resultShow = '请求成功：${_decodeUtf8(response.body)}';
      } else {
        //返回结果的汉字未用 utf8 编码，所以无需解码
        resultShow = '请求成功：${response.body}';
      }
      resultDecodeShow = _decodeResult(response.body);
    });
  }

  //请求失败
  _failed(http.Response response) {
    setState(() {
      resultShow =
          "请求失败：errorCode: ${response.statusCode}   errorMessage: ${response.body}";
    });
  }

  //发送 Get 请求
  _doGet() async {
    var url =
        Uri.parse('https://cx.shouji.360.cn/phonearea.php?number=17688888888');
    var response = await http.get(url);
    if (response.statusCode == 200) {
      //请求成功
      _success(response, true);
    } else {
      //请求失败
      _failed(response);
    }
  }

  //发送 Post 请求 - form
  _doFormPost() async {
    var url = Uri.parse('http://api.crap.cn/visitor/example/post.do');
    var params = {
      'param': '测试22',
      'email': 'crap.cn@gmail.com',
      '555': '我'
    }; //如果传 Map 类型，必须是 Map<String, String>，否则会解析报错
    var response =
        await http.post(url, body: params); //默认是 form 类型，所以无需设置 content - type
    if (response.statusCode == 200) {
      //请求成功
      _success(response, false);
    } else {
      //请求失败
      _failed(response);
    }
  }

  //发送 Post 请求 - json
  _doJsonPost() async {
    var url = Uri.parse('http://api.crap.cn/visitor/example/json.do');
    var params = {
      "id": "8989-dddvdg",
      "name": "文章标题-JSON格式参数演示",
      "brief": "快速入门json参数",
      "category": "分类"
    };
    var json = jsonEncode(params);
    var response = await http.post(url, body: json, headers: {
      'content-type': 'application/json'
    }); //设置content-type为application/json
    if (response.statusCode == 200) {
      //请求成功
      _success(response, false);
    } else {
      //请求失败
      _failed(response);
    }
  }
}

main.dart

import 'package:flutter/material.dart';

import 'http_page.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Leon Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HttpDemo(),
    );
  }
}

（3）get 请求补充

在这里插入图片描述

  • 通过以上示例可知，get 请求的 url 为：https://cx.shouji.360.cn/phonearea.php?number=17688888888
  • 因为返回结果的汉字用了 utf8 编码，所以需要对结果进行 utf8 解码

在这里插入图片描述

发起请求

  //发送 Get 请求
  _doGet() async {
    var url =
        Uri.parse('https://cx.shouji.360.cn/phonearea.php?number=17688888888');
    var response = await http.get(url);
    if (response.statusCode == 200) {
      //请求成功
      _success(response, true);
    } else {
      //请求失败
      _failed(response);
    }
  }

处理请求结果

  //请求成功
  _success(http.Response response, bool isNeedUtf8) {
    setState(() {
      if (isNeedUtf8) {
        //返回结果的汉字用了 utf8 编码，所以需要对结果进行 utf8 解码
        resultShow = '请求成功：${_decodeUtf8(response.body)}';
      } else {
        //返回结果的汉字未用 utf8 编码，所以无需解码
        resultShow = '请求成功：${response.body}';
      }
      resultDecodeShow = _decodeResult(response.body);
    });
  }

  //请求失败
  _failed(http.Response response) {
    setState(() {
      resultShow =
          "请求失败：errorCode: ${response.statusCode}   errorMessage: ${response.body}";
    });
  }

uf8 解码

  // utf8 解码
  _decodeUtf8(String responseBody) {
    var bytes = Uint8List.fromList(responseBody.codeUnits);
    String decodeString = utf8.decode(bytes);
    var decodeMap = json.decode(decodeString);
    return decodeMap;
  }

json解码

  //解析结果 json 数据
  String _decodeResult(String jsonString) {
    var map = jsonDecode(jsonString);
    var decodeString = "";
    map.forEach((key, value) {
      decodeString += "key: $key ------ value: $value\n";
    });
    return decodeString;
  }

（4）post 请求补充 - form

在这里插入图片描述

  • url：http://api.crap.cn/visitor/example/post.do
  • form：{ ‘param’: ‘测试22’, ‘email’: ‘crap.cn@gmail.com’, ‘555’: ‘我’ }

在这里插入图片描述

发起请求

  //发送 Post 请求 - form
  _doFormPost() async {
    var url = Uri.parse('http://api.crap.cn/visitor/example/post.do');
    var params = {
      'param': '测试22',
      'email': 'crap.cn@gmail.com',
      '555': '我'
    }; //如果传 Map 类型，必须是 Map<String, String>，否则会解析报错
    var response =
        await http.post(url, body: params); //默认是 form 类型，所以无需设置 content - type
    if (response.statusCode == 200) {
      //请求成功
      _success(response, false);
    } else {
      //请求失败
      _failed(response);
    }
  }

处理请求结果

  //请求成功
  _success(http.Response response, bool isNeedUtf8) {
    setState(() {
      if (isNeedUtf8) {
        //返回结果的汉字用了 utf8 编码，所以需要对结果进行 utf8 解码
        resultShow = '请求成功：${_decodeUtf8(response.body)}';
      } else {
        //返回结果的汉字未用 utf8 编码，所以无需解码
        resultShow = '请求成功：${response.body}';
      }
      resultDecodeShow = _decodeResult(response.body);
    });
  }

  //请求失败
  _failed(http.Response response) {
    setState(() {
      resultShow =
          "请求失败：errorCode: ${response.statusCode}   errorMessage: ${response.body}";
    });
  }
  • 返回结果的汉字未用 utf8 编码，所以无需解码

（5）post 请求补充 - json

在这里插入图片描述

  • url：http://api.crap.cn/visitor/example/json.do
  • json：{ “id”:“8989-dddvdg”, “name”:“文章标题-JSON格式参数演示”, “brief”:“快速入门json参数”, “category”:“分类” }

在这里插入图片描述

发起请求

  //发送 Post 请求 - json
  _doJsonPost() async {
    var url = Uri.parse('http://api.crap.cn/visitor/example/json.do');
    var params = {
      "id": "8989-dddvdg",
      "name": "文章标题-JSON格式参数演示",
      "brief": "快速入门json参数",
      "category": "分类"
    };
    var json = jsonEncode(params);
    var response = await http.post(url, body: json, headers: {
      'content-type': 'application/json'
    }); //设置content-type为application/json
    if (response.statusCode == 200) {
      //请求成功
      _success(response);
    } else {
      //请求失败
      _failed(response);
    }
  }

处理请求结果

   //请求成功
  _success(http.Response response, bool isNeedUtf8) {
    setState(() {
      if (isNeedUtf8) {
        //返回结果的汉字用了 utf8 编码，所以需要对结果进行 utf8 解码
        resultShow = '请求成功：${_decodeUtf8(response.body)}';
      } else {
        //返回结果的汉字未用 utf8 编码，所以无需解码
        resultShow = '请求成功：${response.body}';
      }
      resultDecodeShow = _decodeResult(response.body);
    });
  }
 

  //请求失败
  _failed(http.Response response) {
    setState(() {
      resultShow =
          "请求失败：errorCode: ${response.statusCode}   errorMessage: ${response.body}";
    });
  }

3、补充

（1）快捷键

  • 快捷键 stf 创建有状态 widget
//输入字母 stf
class  extends StatefulWidget {
  const ({super.key});

  @override
  State<> createState() => _State();
}

class _State extends State<> {
  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}
  • 给类命名，并导入包
import 'package:flutter/cupertino.dart';

class HttpGetDemo  extends StatefulWidget {
  const HttpGetDemo({super.key});

  @override
  State<HttpGetDemo> createState() => _State();
}

class _State extends State<HttpGetDemo> {
  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

（2）解析 json 数据

引入

import 'dart:convert';

jsonDecode 将 json 字符串转换为 map

  //解析结果 json 数据
  String _decodeResult(String jsonString) {
    var map = jsonDecode(jsonString);
    var decodeString = "";
    map.forEach((key, value) {
      decodeString += "$key   $value\n";
    });
    return decodeString;
  }
KillerNoBlood
关注
  • 6
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
在Flutter中处理网络请求
奇妙的Bug之旅
05-22 44
通过以上步骤，我们已经成功地在Flutter中处理了网络请求。这个例子展示了如何使用http库发送GET请求，解析响应，并处理错误。希望这个实例能够帮助你理解在Flutter中处理网络请求的方法。
如何在Flutter中进行网络请求？
最新发布
w708955424的博客
03-28 1097
最后，我们使用Retrofit的builder构建请求实例，并调用接口方法发起请求。不过，需要注意的是，HttpClient类提供的是较为底层的网络请求功能，对于一般的开发者来说，可能需要花费一些时间去熟悉其使用方式。同时，dio还提供了丰富的配置选项，如请求头设置、超时时间设置、错误处理等，使得我们可以更加灵活地控制网络请求的行为。虽然使用HttpClient可以实现网络请求，但由于其使用相对繁琐，且缺乏一些高级功能（如请求头设置、错误处理等），因此在实际开发中，我们通常会选择使用更为便捷的第三方库。
flutter中网络请求dio使用分析
02-28
本课程讲述在 flutter 跨平台开发中，网络请求构架 dio 的基本使用，有如下内容分析 flutter 中 dio get、post、put 请求 flutter 异步请求方式使用与封装接口回调dio 设置网络代理 dio 设置拦截器dio 配制请求headerdio 下载文件dio 上传文件dio 超时时间设置flutter 网络请求公共方法封装
Flutter中的http网络请求，值得一看
m0_61072747的博客
03-28 1348
本篇介绍Flutter中网络请求相关api的使用，Flutter在Flutter engine中提供了一个sky_engine开发工具包，其包含了一个_http的库，该库中有封装的http请求相关的各种操作类。本文我们将介绍_http相关操作类的使用和基于_http封装的三方dio网络库的使用。
flutter getx 简单使用教程
shelutai的博客
06-13 2764
所以Flutter使用GetX真的很不错为什么说什么GetX好用呢？ 1、依赖注入 GetX是通过依赖注入的方式，存储相应的XxxGetxController；已经脱离了InheritedWidget那一套玩法，自己手动去管理这些实例，使用场景被大大拓展 2、跨页面交互 这绝对是GetX的一个优点！对于复杂的生产环境，跨页面交互的场景，实在太常见了，GetX的跨页面交互，实现的也较为优雅 3、路由管理 GetX内部实现了路由管理，而且用起来，非常简单。 （bloc没实现路由管理，fluro的路由管理使用非常
Flutter之get/post网络请求数据并渲染页面
一花一世界 一叶一菩提
03-16 6241
1、Flutter Json与Map类型转换 import 'dart:convetr' json.encode();//Map转Json json.decode();//Json转Map 2、Utf8解决乱码 Utf8Decoder decode = new Utf8Decoder(); decode.convert(response.bodyBytes) 3、Http组件 h...
flutter for web.(一)HTTP post请求的几种实现方式以及Dio包中BaseOptions和FormData的使用。
qq_24296235的博客
09-12 2717
首先记得后端需要进行跨域配置，尤其是debug的时候。 一、简单实现 1.html包，HttpRequest类。 var req = html.HttpRequest(); req.setRequestHeaders(String key,String value)//设置自定义header req.open('post', 'url'); req.onLoadEnd.listen((event) { //此处为收到响应时触发的代码块，可直接从外部传入回调方法————Functio
Flutter 实战开发-网络请求demo
09-19
本篇内容将深入探讨Flutter中的网络请求，以及如何通过实际示例来实现一个简单的网络请求Demo。 首先，Flutter提供了`http`包用于处理HTTP网络请求。要使用此包，你需要在`pubspec.yaml`文件中添加依赖： ```yaml ...
Flutter-Http-Request-Example
04-13
在Flutter中进行HTTP请求，你可以使用`http`包提供的`get`或`post`方法。本例主要涉及`get`请求，用于从服务器获取数据。下面是一个基本的`get`请求示例： ```dart import 'package:http/http.dart' as http; ...
Flutter+getX+getConnect-示例
05-09
通过这个示例项目，开发者可以学习到如何结合使用Flutter、GetX和getConnect来构建一个功能完整的应用，包括状态管理、业务逻辑分离以及网络通信。这对于提升Flutter开发技能和理解现代移动应用架构是非常有价值的。
Flutter实现网络请求的方法示例
08-26
总的来说，Flutter中实现网络请求主要依靠Dio库，它可以方便地发送GET、POST等请求，同时处理各种网络异常。而json_serializable则提供了JSON数据的自动序列化和反序列化功能，大大减少了手动编写相关代码的工作量。...
Flutter中ListView 的使用示例
08-27
下面是 Flutter 中 ListView 的使用示例，通过这个示例，我们可以了解如何使用 ListView 显示 JSON 数据，并实现网络请求和加载菊花的功能。 知识点一：Material 库 在 Flutter 中，Material 库是一个基本的 UI ...
Flutter中的http网络请求
AndroidAlvin的博客
12-10 883
阿里P7移动互联网架构师进阶视频（每日更新中）免费学习请点击：https://space.bilibili.com/474380680 本篇介绍Flutter中网络请求相关api的使用，Flutter在Flutter engine中提供了一个sky_engine开发工具包，其包含了一个_http的库，该库中有封装的http请求相关的各种操作类。本文我们将介绍_http相关操作类的使...
Flutter开发之——网络请求-http，不可思议
m0_54804603的博客
04-11 1665
前言 当你开始开始去跳槽面试的时候，明明只是一份15K的工作，却问你会不会热修复，懂不懂性能优化，火箭造得让你猝及不防，结果就是凉凉；现如今市场，热修复、性能优化、NDK、APP开发、架构、源码等可以说是现在高级Android开发求职的必备技能。 早期的鸟儿有虫吃，现如今做开发的门槛越来越高。 但是，术业有专攻，总有一些技术牛逼的程序员可以吊打、碾压面试官！ 本人经常隔段时间就偷偷投点简历，请假出去面试几次，目的不是想跳槽，主要是为了看看市场上的技术流行趋势，顺便检验一下自己的水平，当然，如果面到了心仪的.
flutter get中文文档------记录和查找
qq_42772570的博客
01-09 4507
get文档-------------地址 状态管理 响应式状态管理器 状态管理 目前，Flutter有几种状态管理器。但是，它们中的大多数都涉及到使用ChangeNotifier来更新widget，这对于中大型应用的性能来说是一个糟糕的方法。你可以在Flutter官方文档中查到，ChangeNotifier应该使用1个或最多2个监听器，这使得它实际上无法用于任何中等或大型应用。 其他的状态管理器也不错，但有其细微的差别。 BLoC非常安全和高效，但是对于初学者来说非常复杂，这使得人们无法使用Flutter进
Flutter开发(二十)：Flutter网络请求Http
wuqingsen1的博客
11-02 1102
1.Http 的 get 请求 2.Http 的 post 请求 3.将 response 转换成 Dart 中的 object 4.请求结果展示 首先将 http 插件导入，添加依赖： http: ^0.12.0+1 导入包： import 'package:http/http.dart' as http; 1.Http 的 get 请求 Future<http.Response> fetchPost(){ return http.get('http
Flutter 网络请求
xiangxiongfly
12-09 1919
网络请求 HttpClient http Dio
Flutter进阶第1篇： http get请求数据、post提交数据、以及渲染动态数据
qq_27494201的博客
12-17 3140
效果图： 导入： http: ^0.12.0+2库 Http_Back.dart import 'package:flutter/material.dart'; import 'package:http/http.dart' as http; import 'dart:convert'; class HttpDemo extends StatefulWidget { HttpDemo({...
Flutter 网络请求Json 两种解析（官方+插件）及动态解析
jia635的专栏
12-24 2643
import 'package:flutter/material.dart'; import 'package:http/http.dart' as http; class FutureBuilderScreen extends StatefulWidget { FutureBuilderScreen({Key key}) : super(key: key); @override _FutureBuilderScreenState createState() => _FutureBu.
flutter 中怎么进行http请求
05-31
在Flutter中进行HTTP请求可以使用Dart中的http库，该库提供了方便的API来进行HTTP请求。以下是一个简单的示例： 1. 首先，在pubspec.yaml文件中添加http依赖： ```yaml dependencies: flutter: sdk: flutter ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

KillerNoBlood

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值