dart - FutureBuilder Flutter 中未处理的异常

Question

我尝试在 flutter 中使用 FutureBuilder 小部件从网络获取一些数据。为此，我使用以下代码:

Future<List<Product>> getWishList() async {
http.Response response = await http.post(
  MY_URL,
  headers: {
    HttpHeaders.acceptHeader: 'application/json',
    HttpHeaders.contentTypeHeader: 'application/json; charset=utf-8'
  },
);
if (response.statusCode == 200) {
  List<Product> ret = List();
  Map<String, dynamic> result;
  try {
    result = json.decode(response.body);
    for (var i = 0; i < result['data'].length; i++) {
        ret.add(Product.fromJson(result['data'][i]));
    }
    return ret;
  } catch (e) {
    return throw Exception("Json parse error");
  }
} else {
  return throw Exception("network connection failed");
}
}

和:

FutureBuilder(
            future: getWishList(),
            builder: (BuildContext context, AsyncSnapshot snapshot) {
              if(snapshot.connectionState == ConnectionState.done){
                  if(snapshot.hasError){
                    controller.forward(from: 0.0);
                    return Material(
                      child: Container(
                        margin: const EdgeInsets.only(top: 36.0),
                        width: double.infinity,
                        child: FadeTransition(
                          opacity: animation,
                          child: PButton(
                            onPressed: (){
                              setState(() {
                                getWishList();
                              });
                            },
                            child: Column(
                              children: <Widget>[
                                Icon(Icons.perm_scan_wifi,color: Colors.black,size: 76.0,),
                                SizedBox(height:24.0),
                                Text("Try again",style: TextStyle(fontSize: 16.0,color: const Color(0XFF222222)),),

                              ],
                            ),
                          ),
                        ),
                      ),
                    );
                  }else{
                    return new ListView(
                        children: <Widget>[
                          GestureDetector(
                              onTap:(){
                                setState(() {
                                  getWishList();
                                });
                              },
                              child: new Text("Every thing ok"))
                        ]);
                  }
              }else{
                return Center(
                  child: Container(
                      margin: const EdgeInsets.only(top: 36.0),
                      child: CircularProgressIndicator()),
                );
              }
            })

现在，如果 HTTP 响应在第一次返回错误，一切正常，但点击 Try again，如果再次出现错误，则此消息显示在控制台上:

[VERBOSE-2:shell.cc(184)] Dart Error: Unhandled exception: Exception: network connection failed _WishListState.getWishList (package:parchino/screen/screen_wish_list.dart:127:14) _WishListState.build... (package:parchino/screen/screen_wish_list.dart:65:33) State.setState (package:flutter/src/widgets/framework.dart:1130:30) _WishListState.build.. (package:parchino/screen/screen_wish_list.dart:64:31) GestureRecognizer.invokeCallback (package:flutter/src/gestures/recognizer.dart:102:24) TapGestureRecognizer._checkUp (package:flutter/src/gestures/tap.dart:242:9) TapGestureRecognizer.handlePrimaryPointer (package:flutter/src/gestures/tap.dart:175:7) PrimaryPointerGestureRecognizer.handleEvent (package:flutter/src/gestures/recognizer.dart:315:9) PointerRouter._dispatch (package:flutter/src/gestures/pointer_router.dart<…>

Answer 1

当您调用 setState 时，您将小部件标记为 Dirty 并基本上告诉框架重建它，但只有在调用 getWishList 之后( 中的那个)设置状态)。由于它是一种 async 方法，因此它可以快速启动并重建小部件。

通过重建小部件，您重建了试图评估其 future 的 FutureBuilder。由于 future 是一个函数，它调用它并对 getWishList 进行新调用。

这使得对同一个方法的两次调用因此非常快速地对一个 http 服务器进行了两次调用。这些调用可能存在冲突，并引发错误。

您不应直接在 FutureBuilder 中调用 Future，而应使用 previously-obtained Future 代替。

Future<List<Product>> myFuture;

@override
void initState() {
  myFuture = getWishList();
  super.initState();
}

Future<List<Product>> getWishList() async {
 //Do your stuff
}

然后在您的构建中，将 myFuture 设置为 FutureBuilder 的 future ，并在您的 setState 中设置 myFuture 再次:

FutureBuilder(
  future: myFuture,
  builder: (BuildContext context, AsyncSnapshot snapshot) {
      //...
      setState(() {
        myFuture = getWishList();
      });
      //...
  }
);

这将使 setState 在 myFuture 中设置一个新的 future ，并要求小部件重建自身。当 FutureBuilder 重建时，它会评估 myFuture 而不是再次调用 http。