RxJS的subscribe方法completed回调中如何获取next返回的value值？

结论 #

是，你应该将跳转逻辑移动到next回调中执行。

原因说明 #

Observable 订阅的三个回调有明确的作用边界：

• next 回调：Observable 正常发出新值时触发，入参就是接口返回的value，是你唯一能拿到响应结果的回调
• error 回调：请求出现异常时触发，触发后不会再执行next和complete回调
• complete 回调：Observable 流完全终止、没有更多值要发出时触发，该回调本身没有任何入参，也无法直接访问next回调内部的局部变量value，这就是你当前拿不到参数的原因

HTTP 请求属于单发 Observable，请求成功时只会触发一次next，之后立刻触发complete，所以将跳转逻辑放到next末尾完全符合你的业务要求。

正确代码示例 #

this.service.post(request).subscribe(
  (value: Response) => { 
    // 1. 先处理返回的value
    // Do something with value

    // 2. 处理完成后直接跳转，可正常携带value参数
    this.state = State.Completed;
    this.router.navigate(['done'], { state: { v: value } });
  },
  (error) => {
    this.state = State.Invalid;
    // 展示错误信息
  }
);

补充说明 #

如果你确实需要在complete回调中执行跳转，可以在订阅外层声明变量暂存value，但这种方案没有必要，不如直接把逻辑放到next中简洁合理：

let responseValue: Response;
this.service.post(request).subscribe(
  (value: Response) => { 
    responseValue = value;
    // Do something with value
  },
  (error) => {
    this.state = State.Invalid;
    // 展示错误信息
  },
  () => { 
    this.state = State.Completed;
    this.router.navigate(['done'], { state: { v: responseValue } });
  }
);

内容的提问来源于stack exchange，提问作者Miguel Moura