【笔记】Flutter 发送请求

Flutter 发送请求学习笔记

• 一个 HTTP 服务端，通过访问 http://127.0.0.1:8080/api 将返回 JSON 格式字符串 {username: "", password: ""}

flutter pub add http

定义处理响应的实体类

• 根据预期的响应内容映射为响应的实体类

lib/models/user.dart

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 请求

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 请求

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('请求失败');
}

在请求体传递参数

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('请求失败');
}

设置请求头

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 官方文档