Flutter回调地狱及多个请求依赖处理

仅记录flutter重要笔记

1. 多个请求依赖, 仅用于多个异步操作都完成后, 执行其它操作, 关键语法: Future.wait[], "wait"传入异步操作的数组, 只有都返回结果了, 才会调用.then()方法

Future.wait([
  // 2秒后返回结果  
  Future.delayed(new Duration(seconds: 2), () {
    return "hello";
  }),
  // 4秒后返回结果  
  Future.delayed(new Duration(seconds: 4), () {
    return " world";
  })
]).then((results){
  print(results[0]+results[1]);
}).catchError((e){
  print(e);
});

执行结果: 4秒后打印

2. 回调地狱(Callback Hell)

a请求依赖b请求的结果, b请求依赖c请求的结果, 大概就是 c -> b -> a

正常做法大概是这样的:

//先分别定义各个异步任务
Future login(String userName, String pwd){
    ...
    //用户登录
};
Future getUserInfo(String id){
    ...
    //获取用户信息 
};
Future saveUserInfo(String userInfo){
    ...
    // 保存用户信息 
}; 


//再进行调用
login("alice","******").then((id){
 //登录成功后通过，id获取用户信息    
 getUserInfo(id).then((userInfo){
    //获取用户信息后保存 
    saveUserInfo(userInfo).then((){
       //保存用户信息，接下来执行其它操作
        ...
    });
  });
})

这种写代码的方式简直不能忍

关键方法, Future.then(), 这个方法返回的还是一个 Future, 可以很好的链式调用, 所以优雅些是这样的

login("alice","******").then((id){
    return getUserInfo(id);
}).then((userInfo){
    return saveUserInfo(userInfo);
}).then((e){
   //执行接下来的操作 
}).catchError((e){
  //错误处理  
  print(e);
});

• • 但是 , 似乎还是有问题, 还有一层嵌套呢, 咋搞?

关键方法: 可以使用 async/await 来消除 callback hell
async用来表示函数是异步的，定义的函数会返回一个Future对象，可以使用then()方法添加回调函数。
await 后面是一个Future，表示等待该异步任务完成，异步完成后才会往下走；await必须出现在 async 函数内部。

所以再优雅些这样的

task() async {
   try{
    String id = await login("alice","******");
    String userInfo = await getUserInfo(id);
    await saveUserInfo(userInfo);
    //执行接下来的操作   
   } catch(e){
    //错误处理   
    print(e);   
   }  
}

** 以上示例引用原地址 ** 强烈推荐