使用颤振在 UI 中进行 POST 调用后显示来自 json 响应的特定数据

Posted 2023-02-23

【中文标题】使用颤振在 UI 中进行 POST 调用后显示来自 json 响应的特定数据

【英文标题】：Display a particular data from a json response after a POST call in the UI using flutter

【发布时间】：2021-10-22 01:54:36

【问题描述】：

我正在调用一个 POST 请求 API，它接受输入，然后返回他/她的详细信息。所以我已经实现了大部分，我能够从 API 中检索数据并在终端中打印该响应数据。但我需要在 UI 中显示该数据。我添加了一个检查快照是否有数据，所以每次我执行显示数据时我都无法做到这一点，而且由于我正在处理 API 调用，它总是打印出问题。

我附上了我的代码 sn-ps，以便它们可以帮助您了解我哪里出错了。 另外，在我认为我犯错的地方，请参考我所做的所有 cmet。

API调用函数：

Future<PanCardVerify> panCardVerify(dynamic param) async 
var client = http.Client();
String? token = await storage.readSecureToken('key');
if (token == null) 
  throw Exception("No token stored in storage");

try 
  var response = await client
      .post(
          Uri.https("baseURL", "endpoint"),
          headers: <String, String>
            'Authorization': 'Token $token',
          ,
          body: param)
      .timeout(Duration(seconds: TIME_CONST))
      .catchError(handleError);

  if (response.statusCode == 200) 
    print('Response Body: $response.body');
    final data = await jsonDecode(response.body);
    return PanCardVerify.fromJson(data); //This is where I believe I am supposed to return to the snapshot
    );
   else if (response.statusCode == 400) 
    print("Invalid PAN Card Details");
    return param;
   else 
    print("Bad Input");
    return param;
  
 on SocketException 
  throw FetchDataException('message', 'url'); 
 on TimeoutException 
  throw ApiNotRespondingException("message", "url");

模型类：

import 'dart:convert';

PanCardVerify transactionFromJson(String str) =>
    PanCardVerify.fromJson(json.decode(str));

String transactionToJson(PanCardVerify data) => json.encode(data.toJson());

class PanCardVerify 
  PanCardVerify(
    required this.status,
    this.panData,
  );

  String status;
  PanData? panData;

  factory PanCardVerify.fromJson(Map<String, dynamic> json) => PanCardVerify(
        status: json["status"],
        panData: PanData.fromJson(json["pan_data"]),
      );

  Map<String, dynamic> toJson() => 
        "status": status,
        "pan_data": panData?.toJson(),
      ;


class PanData 
  PanData(
    required this.code,
    required this.timestamp,
    required this.transactionId,
    required this.data,
  );

  int code;
  int timestamp;
  String transactionId;
  Data data;

  factory PanData.fromJson(Map<String, dynamic> json) => PanData(
        code: json["code"],
        timestamp: json["timestamp"],
        transactionId: json["transaction_id"],
        data: Data.fromJson(json["data"]),
      );

  Map<String, dynamic> toJson() => 
        "code": code,
        "timestamp": timestamp,
        "transaction_id": transactionId,
        "data": data.toJson(),
      ;


class Data 
  Data(
    required this.entity,
    required this.pan,
    required this.fullName,
    required this.status,
    required this.category,
  );

  String entity;
  String pan;
  String fullName;
  String status;
  String category;

  factory Data.fromJson(Map<String, dynamic> json) => Data(
        entity: json["@entity"],
        pan: json["pan"],
        fullName: json["full_name"],
        status: json["status"],
        category: json["category"],
      );

  Map<String, dynamic> toJson() => 
        "@entity": entity,
        "pan": pan,
        "full_name": fullName,
        "status": status,
        "category": category,
      ;

异常控制器类：

class BaseController 
  void handleError(error) 
    hideLoading();
    if (error is BadRequestException) 
      var message = error.message;
      DialogHelper.showErroDialog(description: message);
      else if (error is SocketException) 
      print(error);
     else 
      print("Error in the else block");
    
  

我试图在其中显示 fullName 的小部件：

FutureBuilder<PanCardVerify>(
                  future: ApiService().panCardVerify(context),
                  builder: (context, snapshot) 
                    if (snapshot.hasData) 
                      PanData? data = snapshot.data!.panData;
                      return Flexible(
                        child: Text('$data!.data.fullName'),
                      );
                     else 
                      return Text("Something went wrong");
                    
                  ),

【问题讨论】：

嘿@RavindraS.Patil！！参考这些答案后，我对代码进行了一些更改。但是现在我在控制台中没有收到任何错误，而是 else 块正在执行，并且我收到的文本是“出了点问题”，并且 catch 块也正在执行，这就是我收到弹出窗口的原因。非常感谢和欢迎任何帮助。

这意味着您的快照是空的，这意味着 panCardVerify 根本没有获取数据。重新思考你使用的逻辑。

嘿@AshiqKhan 不，快照不能为空，因为我的终端中显示了 API 响应数据

嘿@RavindraS.Patil 请考虑上面编写的代码正在发出 POST 请求并获得响应，我需要在 UI 中显示该特定响应。请检查我随问题附上的代码。

是的，但是当您在 UI 中访问 panCardVerify 时，它没有数据。你需要检查一下。

【参考方案1】：

您需要创建 ApiService 对象，才能访问 panCardVerify。 只需在 ApiService 之后添加 () 即可。 像这样

FutureBuilder<PanCardVerify>(
              future: ApiService().panCardVerify(), 
              builder: (context, snapshot)
                
              
              )

【讨论】：

但现在它说，预期有 1 个位置参数，但找到了 0 个。尝试添加缺少的参数。这是我正在发出的 HTTP 发布请求，并希望显示响应数据中的名称。

【参考方案2】：

尝试在此处使用您的 fromJson 构造函数：

if (response.statusCode == 200) 
    print('Response Body: $response.body');
    final data = jsonDecode(response.body);
    return PanCardVerify.fromJson(data);     //// here
 
  

【讨论】：

嘿，我修改了代码，但没有任何反应。而是异常类控制器的 else 块仍在图片中，并且我还没有实现它的解决方案。

我稍微修改了代码。请看一下