【笔记】Flutter发送请求

发表于 更新于 阅读次数：

前言

Flutter发送请求学习笔记

准备工作

添加依赖

1
flutter pub add http

定义处理响应的实体类

  • 根据预期的响应内容映射为响应的实体类
lib/models/user.dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class User {
  final String username;
  final String password;

  const User({
    required this.username,
    required this.password,
  });

  factory User.fromJson(Map<String, dynamic> json) {
    return User(
      username: json['username'],
      password: json['password'],
    );
  }
}

发送请求

发送GET请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
import 'dart:async';
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:mobile/models/user.dart';

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

  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {

  // 1. 定义用来处理响应的future对象
  Future<User>? _futureUser;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("文本内容"),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () {
                  // 2. 每当按钮被点击，就发送请求，并更新future对象中的数据
                  setState(() {
                    _futureUser = getAccount();
                  });
                },
                child: const Text("登录"),
              ),
              Container(
                // 3. 根据future对象中的数据渲染Container，如果没有响应就返回空，如果有响应就返回响应数据
                child: (_futureUser == null) ? null : buildFutureBuilder(),
              )
            ],
          ),
        ),
      ),
    );
  }

  // 3. 根据future对象中的数据渲染Container
  FutureBuilder<User> buildFutureBuilder() {
    return FutureBuilder<User>(
      future: _futureUser,
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          // 3.1. 通过future对象拿到实体对象的属性值
          return Text("${snapshot.data!.username}\n${snapshot.data!.password}");
        } else if (snapshot.hasError) {
          // 3.2. 通过future对象获取实体对象失败
          return Text('${snapshot.error}');
        }
        return const CircularProgressIndicator();
      },
    );
  }
}

// 2. 发送请求
Future<User> getAccount() async {
  final response = await http.get(
    // 2.1. 发送请求的URL路径
    Uri.parse('http://192.168.0.23:8080/api'),
  );
  // 2.2. 接收到响应，根据不同的响应状态码处理数据
  if (response.statusCode == 200) {
    // 2.3. 如果获取响应数据成功，将JSON格式字符串转换为实体对象
    return User.fromJson(jsonDecode(response.body));
  }
  // 2.4. 如果获取响应数据失败，抛出异常
  throw Exception('请求失败');
}

发送POST请求

1
2
3
4
5
6
7
8
9
Future<User> getAccount() async {
  final response = await http.post(
    Uri.parse('http://192.168.0.23:8080/api'),
  );
  if (response.statusCode == 200) {
    return User.fromJson(jsonDecode(response.body));
  }
  throw Exception('请求失败');
}

在请求体传递参数

1
2
3
4
5
6
7
8
9
10
11
12
13
Future<User> getAccount() async {
  final response = await http.post(
    Uri.parse('http://192.168.0.23:8080/api'),
    // 在请求体传递参数
    body: jsonEncode(<String, String>{
      "key": "value",
    }),
  );
  if (response.statusCode == 200) {
    return User.fromJson(jsonDecode(response.body));
  }
  throw Exception('请求失败');
}

设置请求头

1
2
3
4
5
6
7
8
9
10
11
12
13
Future<User> getAccount() async {
  final response = await http.post(
    Uri.parse('http://192.168.0.23:8080/api'),
    // 设置请求头
    headers: <String, String>{
      'Content-Type': 'application/json; charset=UTF-8',
    },
  );
  if (response.statusCode == 200) {
    return User.fromJson(jsonDecode(response.body));
  }
  throw Exception('请求失败');
}

完成

参考文献

Flutter官方文档