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

1、配置 http

pubspec.yaml

dependencies:
  http:  ^0.13.4
  flutter:
    sdk: flutter
  • http 库最新插件版本查看：https://pub.dev/packages/http
  • 不一定要用最新版本 http，要使用项目所能支持的版本

.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 = "";

  @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,
              )),
            ],
          ),
        ],
      ),
    );
  }

  //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;
  }

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

      //返回结果的汉字未用 utf8 编码，所以无需解码
      resultShow = '请求成功：${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);
    } 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);
    } 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);
    } 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);
    } else {
      //请求失败
      _failed(response);
    }
  }

处理请求结果

  //请求成功
  _success(http.Response response) {
    setState(() {
      resultShow = '请求成功：${_decodeUtf8(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;
  }

（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);
    } else {
      //请求失败
      _failed(response);
    }
  }

处理请求结果

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

      //返回结果的汉字未用 utf8 编码，所以无需解码
      resultShow = '请求成功：${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) {
    setState(() {
      //返回结果的汉字用了 utf8 编码，所以需要对结果进行 utf8 解码
      // resultShow = '请求成功：${_decodeUtf8(response.body)}';

      //返回结果的汉字未用 utf8 编码，所以无需解码
      resultShow = '请求成功：${response.body}';
    });
  }

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

3、补充

  • 快捷键 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();
  }
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/441876.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

vue 在线预览word

vue 在线预览word

1 mammoth 先找的是mammoth这个插件yarn add mammoth,版本是1,7.0 参考网上的示例使用如下&#xff1a; import mammoth from "mammoth"; const vHtml ref("") const readExcelFromRemoteFile (url) >{var xhr new XMLHttpRequest();xhr.open("…
阅读更多...
数据库大师之路：Oracle在线学习平台全指南！

数据库大师之路：Oracle在线学习平台全指南！

介绍数据库是由甲骨文公司开发的一款关系数据库管理系统&#xff08;RDBMS&#xff09;&#xff0c;在数据库领域具有领先地位&#xff0c;并且以其系统可移植性而闻名。以下是对Oracle数据库的详细介绍&#xff1a; 市场地位&#xff1a;Oracle数据库是目前世界上流行的关系数…
阅读更多...
2024年新算法||吸引-排斥优化算法(Attraction–Repulsion Algorithm)

2024年新算法||吸引-排斥优化算法(Attraction–Repulsion Algorithm)

本期介绍一种求解约束全局优化问题的元启发式搜索算法——吸引-排斥优化算法Attraction–Repulsion Optimization Algorithm,AROA。该算法模拟自然界中发生的吸引-排斥现象相关的平衡。该成果于2024年2月发表在中科院1区SCI期刊 Swarm and Evolutionary Computation&#xff08…
阅读更多...
Codesys.运动控制电子齿轮

Codesys.运动控制电子齿轮

文章目录 一. 电子齿轮概念应用 二. 电子齿轮耦合功能块 2.1. MC_GearIn 2.2. MC_GearInPos 2.3. MC_GearOut 三. 电子齿轮案例 3.1. 样例介绍 3.2. 引入虚轴 3.3. 程序框架 3.4. 程序编写 3.5. 程序监控 一. 电子齿轮概念应用 在很多应用场景中有多个牵引轴每个牵引…
阅读更多...
如何优雅地避免空指针异常（NullPointerException）

如何优雅地避免空指针异常（NullPointerException）

空指针异常是导致java程序运行中断最常见的原因&#xff0c;相信每个程序猿都碰见过&#xff0c;也就是NullPointException&#xff0c;我们通常简称为NPE&#xff0c;为了提高我们写的代码的健壮性&#xff0c;本文告诉大家如何优雅避免NPE。 出现空指针异常的情况 访问空对…
阅读更多...
几大开源免费的 JavaScript 富文本编辑器测评

几大开源免费的 JavaScript 富文本编辑器测评

MarkDown 编辑器用的时间长了&#xff0c;发现发现富文本编辑器用起来是真的舒服。 一直以来写博客都是用的 MarkDown 编辑器&#xff0c;MarkDown 文档简单方便&#xff0c;使用几个简单的符号就可以定义出样式统一的富文本内容。写博客的时间长了&#xff0c;小玖就越来越排…
阅读更多...
数据分析-Pandas数据画箱线图

数据分析-Pandas数据画箱线图

数据分析-Pandas数据画箱线图 数据分析和处理中&#xff0c;难免会遇到各种数据&#xff0c;那么数据呈现怎样的规律呢&#xff1f;不管金融数据&#xff0c;风控数据&#xff0c;营销数据等等&#xff0c;莫不如此。如何通过图示展示数据的规律&#xff1f; 数据表&#xff…
阅读更多...
程序运行的基本流程

程序运行的基本流程

操作系统&#xff08;应用程序&#xff09;&#xff1a; 装系统就是将操作系统安装到硬盘1中 计算机启动的基本过程&#xff1a; 总结&#xff1a; 程序一般保存在硬盘中&#xff0c;软件安装的过程就是将程序写入硬盘的过程程序在运行时会加载进入内存&#xff0c;然后由CPU…
阅读更多...
C#，数值计算，解微分方程的龙格-库塔二阶方法与源代码

C#，数值计算，解微分方程的龙格-库塔二阶方法与源代码

1 微分方程 含有导数或微分的方程称为微分方程&#xff0c;未知函数为一元函数的微分方程称为常微分方程。 微分方程的阶数 微分方程中导数或微分的最高阶数称为微分方程的阶数。 微分方程的解 使得微分方程成立的函数称为微分方程的解。 微分方程的特解 微分方程的不含任意…
阅读更多...
计算数据集的总体标准差pstdev()

计算数据集的总体标准差pstdev()

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 计算数据集的总体标准差 pstdev() [太阳]选择题 pstdev() 的作用是&#xff08;&#xff09; import statistics a [0, 0, 8, 8] print("【显示】a ",a) print("【执行】st…
阅读更多...
GPT-4 等大语言模型（LLM）如何彻底改变客户服务

GPT-4 等大语言模型（LLM）如何彻底改变客户服务

GPT-4革命&#xff1a;如何用AI技术重新定义SEO策略 在当今快节奏的数字时代&#xff0c;客户服务不再局限于传统的电话线或电子邮件支持。 得益于人工智能 (AI) 和自然语言模型 (NLM)&#xff08;例如 GPT-4&#xff09;的进步&#xff0c;客户服务正在经历革命性的转变。 在这…
阅读更多...
网络故障基本判断方法

网络故障基本判断方法

1&#xff09;电脑上使用winR键&#xff0c;打开运行窗口&#xff0c;输入CMD命令&#xff0c;点击回车键 2&#xff09;在弹出的CMD运行窗口中输入ipconfig命令 通过该命令可以查看本机的IP地址&#xff0c;子网掩码和网关等信息。确认电脑中所有网卡配置是否正确。 3&…
阅读更多...
UNIAPP微信小程序中使用Base64编解码原理分析和算法实现

UNIAPP微信小程序中使用Base64编解码原理分析和算法实现

为何要加上UNIAPP及微信小程序&#xff0c;可能是想让检索的翻围更广把。&#x1f607; Base64的JS原生编解码在uni的JS引擎中并不能直接使用&#xff0c;因此需要手写一个原生的Base64编解码器。正好项目中遇到此问题&#xff0c;需要通过URLLink进行小程序跳转并携带Base64参…
阅读更多...
MySQL 学习笔记（基础篇 Day3）

MySQL 学习笔记（基础篇 Day3）

「写在前面」 本文为黑马程序员 MySQL 教程的学习笔记。本着自己学习、分享他人的态度&#xff0c;分享学习笔记&#xff0c;希望能对大家有所帮助。推荐先按顺序阅读往期内容&#xff1a; 1. MySQL 学习笔记&#xff08;基础篇 Day1&#xff09; 2. MySQL 学习笔记&#xff08…
阅读更多...
SpringBoot 多平台文件配置

SpringBoot 多平台文件配置

目录 一 主配置文件和辅配置文件 二 具体使用 1. 通过直接修改 application.yml 中的属性值 2. 通过 maven 进行配置修改 当我们需要部署项目的时候, 肯定会遇到不同的部署环境下, 需要有不同的配置. 例如开发环境下和生产环境下的配置肯定就不会是完全相同的, 如数据库的…
阅读更多...
找不到本地组策略编辑器解决办法

找不到本地组策略编辑器解决办法

创建记事本写入以下命令 echo offpushd "%~dp0"dir /b %systemroot%\Windows\servicing\Packages\Microsoft-Windows-GroupPolicy-ClientExtensions-Package~3*.mum >gp.txtdir /b %systemroot%\servicing\Packages\Microsoft-Windows-GroupPolicy-ClientTools-…
阅读更多...
[java基础揉碎]方法的重写/覆盖

[java基础揉碎]方法的重写/覆盖

重写介绍 简单的说:方法覆盖(重写)就是子类有一个方法,和父类(也可能是爷爷,更上一级)的某个方法的名称、返回类型、参数一样&#xff0c;那么我们就说子类的这个方法 覆盖了父类的方法 重写重载对比
阅读更多...
【内推】新风口-大模型独角兽公司minimax

【内推】新风口-大模型独角兽公司minimax

先上内推链接&#xff1a; MiniMax社招内推码: AK3XEJ6 投递链接: https://vrfi1sk8a0.jobs.feishu.cn/s/iFY5WFgE 岗位&#xff1a;前端、后端、算法&#xff0c;基础架构都有&#xff0c;大量hc 公司介绍&#xff1a; 国内同时拥有文本、语音、视觉三种基础大模型能力的创业…
阅读更多...
软考高级：信息系统生命周期概念和例题

软考高级：信息系统生命周期概念和例题

作者&#xff1a;明明如月学长&#xff0c; CSDN 博客专家&#xff0c;大厂高级 Java 工程师&#xff0c;《性能优化方法论》作者、《解锁大厂思维&#xff1a;剖析《阿里巴巴Java开发手册》》、《再学经典&#xff1a;《Effective Java》独家解析》专栏作者。 热门文章推荐&am…
阅读更多...
【Neo4j系列】Neo4j之CQL语句和函数介绍

【Neo4j系列】Neo4j之CQL语句和函数介绍

本文将对Neo4j中的CQL语句和CQL函数进行详细介绍。 作者&#xff1a;后端小肥肠 目录 1. 前言 2. CQL语句 2.1. CQL简介 2.2. CREATE命令 2.3. MATCH命令 2.4. RETURN命令 2.5. MATCH和RETURN 2.6. CREATEMATCHRETURN命令 2.7. 关系基础 2.8. CREATE创建标签 2.9. WH…
阅读更多...
最新文章

Copyright @ 2022~2023