AngularJS中如何使用then链式请求？处理依赖型服务调用

嘿，我明白你的需求了——现在你的两个请求是并行触发的，第二个完全不等第一个的结果，这肯定不是你想要的。要实现“第一个成功后再跑第二个”的效果，咱们可以利用AngularJS Promise的链式特性来搞定，下面给你两种常见场景的解决方案：

场景1：第二个请求需要用到第一个的返回值 #

比如如果getInviteLink得用第一个请求拿到的leagueCode当参数，那代码可以这么写：

InviteFriendsCodeService.getLeagueCode()
  .then((resp) => {
    // 先处理第一个请求的结果，把邀请码存起来
    ctrl.invitationCode = resp.data.data.leagues[0].code;
    // 返回第二个请求的Promise，这样链式的下一个then会等它完成
    return InviteFriendsCodeService.getInviteLink(ctrl.invitationCode); // 假设需要传这个码当参数
  })
  .then((resp) => {
    // 现在第一个请求已经成功，处理第二个请求的结果
    ctrl.recruitCode = resp.data.data.code;
    ctrl.invitationLink = `${window.location.origin}/register?code=${ctrl.recruitCode}`;
  })
  .catch((error) => {
    // 别忘了加catch，任何一个请求失败都会走到这里，方便排查问题
    console.error('请求出错啦:', error);
  });

场景2：只是要保证顺序，不需要传参 #

如果第二个请求不需要第一个的结果，只是单纯要等第一个跑完再执行，写法类似，只是不用传参：

InviteFriendsCodeService.getLeagueCode()
  .then((resp) => {
    ctrl.invitationCode = resp.data.data.leagues[0].code;
    // 返回第二个请求的Promise，链式等待
    return InviteFriendsCodeService.getInviteLink();
  })
  .then((resp) => {
    ctrl.recruitCode = resp.data.data.code;
    ctrl.invitationLink = `${window.location.origin}/register?code=${ctrl.recruitCode}`;
  })
  .catch((error) => {
    console.error('请求失败:', error);
  });

为啥这么写可行？ #

AngularJS里的$http（你的Service应该是基于它封装的）返回的是Promise对象，then方法会生成一个新的Promise。当你在第一个then里返回第二个请求的Promise时，后面的then会自动等待这个Promise完成后再执行，完美实现顺序依赖。

另外一定要加catch哦，不然某个请求失败了你都不知道哪里出问题啦～

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