Flutter_学习记录_网络请求的简单了解

embedded/2025/2/21 10:43:46/

在 Flutter 中,可以使用 http 包来发送请求。以下是一个完整的案例,展示如何通过 GET 请求获取数据并处理响应。

1. 添加依赖

首先,在 pubspec.yaml 文件中添加 http 包的依赖:
在这里插入图片描述
然后运行 flutter pub get 来安装依赖。

2. 完整代码示例

以下是一个完整的 GET 请求示例,从一个公开 API 获取数据并显示结果:

import 'dart:convert';import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:async';class HttpDemo extends StatelessWidget {const HttpDemo({super.key});Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("HttpDemo"),),body: HttpDemoHome(),);}
}class HttpDemoHome extends StatefulWidget {const HttpDemoHome({super.key});State<HttpDemoHome> createState() => _HttpDemoHomeState();
}class _HttpDemoHomeState extends State<HttpDemoHome> {// 发起网络请求的方法Future<List<Post>> fetchPost() async {final url = Uri.parse('https://resources.ninghao.net/demo/posts.json');final response = await http.get(url);if (response.statusCode == 200) {final responseBody = json.decode(response.body);// 字典数组转模型数组List<Post> posts = responseBody["posts"].map<Post>((item) => Post.fromJson(item)).toList();return posts;} else {throw Exception("Fail to fetch post");}}Widget build(BuildContext context) {// FutureBuilder 构建页面return FutureBuilder(future: fetchPost(), builder: (BuildContext context, AsyncSnapshot<List<Post>> snapshot) {if (snapshot.connectionState == ConnectionState.waiting) {return Center(child: Text("Loading"),);}final data =  snapshot.data;if (data != null) {return ListView(children: data.map((post) {return ListTile(title: Text(post.title),subtitle: Text(post.author),leading: CircleAvatar(backgroundImage: NetworkImage(post.imageUrl),),);}).toList(),);} else {return Center(child: Text("暂无数据"));}});}
}// 新建数据模型 Post
class Post {final int id;final String title;final String description;final String author;final String imageUrl;Post({required this.id, required this.title, required this.description, required this.author, required this.imageUrl});// 字典转模型的方法Post.fromJson(Map json) : id = json["id"],title = json["title"],description = json["description"],author = json["author"],imageUrl = json["imageUrl"];// 模型转字典的方法Map toJson() => {"title": title,"description": description};
}

效果图如下:
在这里插入图片描述

3. 代码说明

(1) 发送异步 GET 请求

final url = Uri.parse('https://resources.ninghao.net/demo/posts.json');
final response = await http.get(url);
  • 使用 http.get 方法发送 GET 请求。
  • await 关键字确保等待请求完成后再继续执行。

(2) 检查响应状态码

if (response.statusCode == 200) {// 解析数据
} else {// 处理错误
}
  • 如果状态码为 200,表示请求成功。
  • 如果状态码不是 200,则打印错误信息。

(3) 解析 JSON 数据

final responseBody = json.decode(response.body);
// 字典数组转模型数组
List<Post> posts = responseBody["posts"].map<Post>((item) => Post.fromJson(item)).toList();

(4) 构建页面
FutureBuilder组件来设置页面,属性futher就是设置请求的方法, builder就是设置构建页面的方法。


http://www.ppmy.cn/embedded/163572.html

相关文章

【deepseek与chatGPT辩论】辩论题: “人工智能是否应当具备自主决策能力?”

探讨辩论题 这个提案涉及创建一个精确的辩论题目&#xff0c;旨在测试deepseek的应答能力。 创建辩论题目 提议设计一个辩论题目以测试deepseek的应答能力。希望这个题目具有挑战性并能够测量其回应质量。 好的&#xff0c;来一道适合深度学习的辩论题&#xff1a; 辩论题&…

mysql系列8—Innodb的undolog

背景 本文涉及的内容较为底层&#xff0c;做了解即可&#xff0c;是以前学习《高性能mysql》和《mysql是怎样运行的》的笔记整理所得。 undolog设计的初始目的是保证事务的原子性。mysql的修改操作发生后&#xff0c;如果所在的事务未被提交&#xff0c;如mysql服务或者操作系统…

开源在线考试系统开源在线考试系统:支持数学公式的前后端分离解决方案

开源在线考试系统&#xff1a;支持数学公式的前后端分离解决方案 项目介绍项目概述&#xff1a;技术栈&#xff1a;版本要求主要功能&#xff1a;特色亮点 项目仓库地址演示地址GiteeGitHub 系统效果展示教师端系统部分功能截图学生端系统部分功能截图 结语 项目介绍 项目概述…

在Windows和Linux平台上使用c++获取文件当前路径

.h #include <iostream> #include <string> #ifdef _WIN32 #include <windows.h> // 包含Windows API定义 #else #include <limits.h> // 为了PATH_MAX #include <unistd.h> // 为了getcwd #endif // _WIN32 using namespace std; #ifdef _WIN…

校招后台开发:JAVA和GO选哪一个?

有同学过来咨询说&#xff1a;“大拿老师我之前有过go语言的实习&#xff0c;但是我在校招里面发现go语言的校招岗位不是很多&#xff0c;我是投java的岗位还是投go的岗位&#xff1f; 这个问题呢这两年来也有很多同学问过&#xff0c;下面我们来详细说说应该怎么选&#xff1…

Spark 性能优化(四):Cache

在 Spark 中&#xff0c;缓存是一种将计算结果存储在内存中的方式&#xff0c;目的是加速后续操作。当你执行迭代算法或查询时&#xff0c;如果多次重复使用相同的数据集&#xff0c;缓存可以避免每次都重新计算相同的转换操作。通过缓存&#xff0c;Spark 可以将数据存储在内存…

02 redis安装

文章目录 redis安装redis启动前端启动后端启动&#xff08;守护进程启动&#xff09; redis安装 第一步&#xff1a;安装 C 语言需要的 GCC 环境 yum install -y gcc-c yum install -y wget第二步&#xff1a;下载并解压缩 Redis 源码压缩包 wget http://download.redis.io/…

Django ModelForm使用(初学)

1.目的是根据员工表字段&#xff0c;实现一个新增员工的数据填写页面 2.在views.py文件中按下面的格式写 定义 ModelForm 类&#xff1a;UserModelForm &#xff08;自己命名的类名&#xff09;使用时需要导入包 定义视图函数&#xff1a;user_model_form_add&#xff08;在函…