Flutter应用无法从Reqres API获取数据求助

核心错误点 #

1. GET请求错误携带请求体：Reqres的用户列表接口是公开GET接口，不需要传递LoginRequest请求体，但你的profile_repository.dart中调用Dio.get时额外传了data参数，导致请求格式错误。
2. Repository方法参数冗余：getAllUserData方法强制要求传入LoginRequest，但该接口根本不需要此参数，属于多余依赖。
3. UI未使用获取到的数据：home_page.dart的列表仅显示固定文本"nama"，没有绑定从API获取的用户数据。

修复后的代码 #

1. profile_repository.dart #

import 'package:autoduck_state2/domain/core/user/model/user_response.dart';
import 'package:dartz/dartz.dart';
import 'package:dio/dio.dart';

class ProfileRepository {
  Dio _dio = Dio();

  Future<Either<String, UserResponse>> getAllUserData() async {
    Response _response;

    try {
      // 移除多余的data参数，GET请求无需传递请求体
      _response = await _dio.get("https://reqres.in/api/users?page=2");
      UserResponse _userResponse = UserResponse.fromJson(_response.data);
      return right(_userResponse);
    } on DioException catch (e) {
      print("DioException: ${e.response?.statusCode}, ${e.response?.statusMessage}");
      String errorMessage = "请求失败";

      switch (e.type) {
        case DioExceptionType.connectionTimeout:
          errorMessage = "连接超时";
          break;
        case DioExceptionType.sendTimeout:
          errorMessage = "发送超时";
          break;
        case DioExceptionType.receiveTimeout:
          errorMessage = "接收超时";
          break;
        case DioExceptionType.badCertificate:
          errorMessage = "证书错误";
          break;
        case DioExceptionType.badResponse:
          errorMessage = e.response?.data['error'] ?? "服务器返回错误";
          break;
        case DioExceptionType.cancel:
          errorMessage = "请求已取消";
          break;
        case DioExceptionType.connectionError:
          errorMessage = "网络连接错误";
          break;
        case DioExceptionType.unknown:
          errorMessage = "未知错误";
          break;
      }
      return left(errorMessage);
    }
  }
}

2. home_page.dart #

import 'package:autoduck_state2/application/profile/bloc/profileb_bloc.dart';
import 'package:autoduck_state2/domain/auth/model/login_response.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

class HomePage extends StatefulWidget {
  HomePage({Key? key, required this.loginResponse}) : super(key: key);

  final LoginResponse loginResponse;

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => ProfilebBloc()..add(ProfilebEvent.getAllUserData()),
      child: BlocConsumer<ProfilebBloc, ProfilebState>(
        listener: (context, state) {
          state.maybeMap(
            orElse: () {},
            isLoading: (value) {
              print("Is loading");
            },
            isSuccess: (value) {
              print(value.userResponse.toJson());
            },
            isError: (value) {
              print("Error: ${value.errorMessage}");
            },
          );
        },
        builder: (context, state) {
          return state.maybeMap(
            orElse: () => homePageError(),
            isLoading: (e) => homePageLoading(),
            isSuccess: (value) => homePageScaffold(value.userResponse),
            isError: (value) => homePageError(errorMessage: value.errorMessage),
          );
        },
      ),
    );
  }

  Scaffold homePageError({String errorMessage = "Something error"}) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(errorMessage),
            const SizedBox(height: 16),
            IconButton(
              onPressed: () {
                context.read<ProfilebBloc>().add(ProfilebEvent.getAllUserData());
              },
              icon: const Icon(Icons.replay),
            ),
          ],
        ),
      ),
    );
  }

  Scaffold homePageLoading() => const Scaffold(
        body: Center(
          child: CircularProgressIndicator(),
        ),
      );

  // 接收UserResponse参数，渲染真实用户数据
  Scaffold homePageScaffold(UserResponse userResponse) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.loginResponse.token ?? "No Token")),
      body: userResponse.data == null || userResponse.data!.isEmpty
          ? const Center(child: Text("暂无用户数据"))
          : ListView.builder(
              itemCount: userResponse.data!.length,
              itemBuilder: (context, index) {
                final user = userResponse.data![index];
                return ListTile(
                  leading: CircleAvatar(
                    backgroundImage: NetworkImage(user.avatar ?? ""),
                  ),
                  title: Text("${user.firstName} ${user.lastName}"),
                  subtitle: Text(user.email ?? ""),
                );
              },
            ),
    );
  }
}

3. 配套Bloc修改（profileb_bloc.dart） #

需要同步修改Bloc的事件和逻辑，移除对LoginRequest的依赖：

// 示例Bloc代码，根据你的实际结构调整
import 'package:bloc/bloc.dart';
import 'package:autoduck_state2/domain/core/user/model/user_response.dart';
import 'package:autoduck_state2/domain/core/user/repository/profile_repository.dart';
import 'package:freezed_annotation/freezed_annotation.dart';

part 'profileb_event.dart';
part 'profileb_state.dart';
part 'profileb_bloc.freezed.dart';

class ProfilebBloc extends Bloc<ProfilebEvent, ProfilebState> {
  final ProfileRepository _profileRepository;

  ProfilebBloc() : super(const ProfilebState.initial()) {
    on<_GetAllUserData>(_onGetAllUserData);
  }

  Future<void> _onGetAllUserData(
    _GetAllUserData event,
    Emitter<ProfilebState> emit,
  ) async {
    emit(const ProfilebState.isLoading());
    final result = await _profileRepository.getAllUserData();
    result.fold(
      (error) => emit(ProfilebState.isError(errorMessage: error)),
      (userResponse) => emit(ProfilebState.isSuccess(userResponse: userResponse)),
    );
  }
}

// profileb_event.dart
part of 'profileb_bloc.dart';

@freezed
class ProfilebEvent with _$ProfilebEvent {
  const factory ProfilebEvent.getAllUserData() = _GetAllUserData;
}

// profileb_state.dart
part of 'profileb_bloc.dart';

@freezed
class ProfilebState with _$ProfilebState {
  const factory ProfilebState.initial() = _Initial;
  const factory ProfilebState.isLoading() = _IsLoading;
  const factory ProfilebState.isSuccess({required UserResponse userResponse}) = _IsSuccess;
  const factory ProfilebState.isError({required String errorMessage}) = _IsError;
}

修复说明 #

1. 移除了Repository中GET请求的冗余参数和错误的请求体传递，符合RESTful规范
2. UI层绑定了真实的用户数据，显示用户头像、姓名和邮箱
3. 完善了错误状态的提示和重试功能
4. Bloc层同步移除了不必要的参数依赖，逻辑更清晰

内容的提问来源于stack exchange，提问作者Guxxwan