Flutter一个页面同时请求多个接口的并发请求-Future.

• 我们在项目开发中的会遇到一个页面同时请求多个接口的情况,而且接口是同时发出的并发请求,正常接口请求一般都是通过dio进行封装过后的,如下:

//创建数据请求
 requestBannerListData(){
    DioUtils.postHttp("student/banner/getPublicList", onSuccess: (data){
      final bannerModel = bannerModelFromJson(jsonEncode(data));
      _bannerList.clear();
      _bannerList.addAll(bannerModel);
    }, onError: (int code, String error) {

    });  
  }

通常一个接口请求会如上所示.为了方便我们获取到数据直接使用,返回的数据通常也不是Future类型的,那么多个接口一起并发请求时该怎么处理呢,肯定不是一个接口一个接口顺序去调用,此时我们会用Future提供的一个方法,Future.await去请求数据,但要注意的是Future.await要求传入返回Future类型的数据,显然我们封装的接口不满足.改造后的代码如下

_getAllData() async{
    await Future.wait<dynamic>([requestBannerListData(),requestVideoListData()]).then((value){
      _isSuccessLoad = true;
      _bannerList.clear();
      _bannerList.addAll(value[0]);
      _videoList.clear();
      _videoList.addAll(value[1]);
      ProgressDialog.hideProgress(this.context);
      setState(() {
        // 重置刷新状态 
        _controller.resetLoadState();
      });
    }).catchError((error){
 
    });
  }

//创建数据请求
 requestBannerListData() async{
    var result;
    await Future(()=> DioUtils.postHttp("student/banner/getPublicList", onSuccess: (data){
      final bannerModel = bannerModelFromJson(jsonEncode(data));
      result = bannerModel;
    }, onError: (int code, String error) {

    }));
     return result;
  }

//创建数据请求
requestVideoListData() async{
    //ProgressDialog.showProgress(context);
    Map<String, dynamic> parma = {
      "sectionId": "3",
      "sortType": _sortId,
      "page": 1,
      "subjectId": _subjectId
    };
    var result;
   await Future(()=> DioUtils.postHttp("trs/getVideos", parameters: parma, onSuccess: (data) {
       final listmodel = videoListModelFromJson(jsonEncode(data));
       result = listmodel;
    }, onError: (int code, String error) {
      
    }));
   return result;
  }

如上就完成了多接口的并发请求,当两个接口都请求成功拿到数据之后,Future.await的value就是两个接口结果组成的数组,然后再进行数据的操作和页面的刷新

如果对您有帮助,请不吝点个赞,谢谢