如何基于路由参数定义RxJS订阅？vue-rx请求异常求助

嘿，先别急着怀疑vue-rx的bug哦！我之前用RxJS结合vue-rx开发时也碰到过类似的问题，大概率是咱们在处理路由参数的Observable流时没踩对节奏，而非框架本身的问题。结合你的描述，我给你梳理几个常见的坑和对应的解决方法：

1. 没有把路由参数转化为持续发射的Observable流 #

你可能是直接在组件初始化时取了一次this.$route.params的值，而没有监听它的变化——这样参数更新时，你的AJAX请求自然不会跟着变，alert也只会弹一次。

在vue-rx里，正确的做法是用$watchAsObservable把路由参数的变化转化为Observable流，这样每次参数更新都会发射新值：

const routeParam$ = this.$watchAsObservable('$route.params.yourParam')
  .pipe(pluck('newValue')) // 只提取参数的新值

2. 用错了操作符导致请求没有正确切换 #

如果你的代码里用了map来发起AJAX请求，而不是switchMap，就可能出现旧请求还没完成、新参数已经到来的情况，最终导致请求用的是旧参数。

switchMap的作用是：每当有新的参数值发射时，会取消之前的AJAX请求订阅，重新发起新的请求，完美适配路由参数变化的场景。示例代码如下：

import { switchMap, pluck } from 'rxjs/operators'

export default {
  name: 'YourTargetComponent',
  subscriptions() {
    // 监听路由参数变化的流
    const routeParam$ = this.$watchAsObservable('$route.params.targetParam')
      .pipe(pluck('newValue'))

    // 基于参数流发起AJAX请求
    return {
      apiData$: routeParam$.pipe(
        switchMap(currentParam => {
          alert(`当前参数：${currentParam}`) // 现在每次参数变化都会触发alert
          // 根据参数发起对应AJAX请求
          return this.$http.get(`/your-api-path?param=${currentParam}`)
        })
      )
    }
  }
}

3. 手动订阅的生命周期没处理好 #

如果你是在created或mounted钩子手动订阅Observable，却没有在组件销毁时取消订阅，或者订阅时用了take(1)这类限制只发射一次的操作符，也会导致alert只弹一次、请求不更新的问题。

vue-rx提供的subscriptions选项会自动帮你管理订阅的生命周期（组件销毁时自动取消订阅），比手动订阅更可靠，建议优先使用这个方式。

最后再检查下这些点： #

• 确认路由参数确实在变化时，你的Observable流能接收到新值
• 用switchMap替代map来处理AJAX请求的切换
• 避免在初始化时只取一次参数值，要让参数成为持续发射的流

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