初学rxjs不懂的地方

Question

在学rxjs时看到这样一段代码：

// 代码1
this.route.paramMap.pipe(
    switchMap((routeParam: Params) => {
        this.orderId = routeParam.get('id');
        return this.orderDetailSer.loadData(this.orderId)
    })
).subscribe((detail: OrderDetail) => {
    this.orderInfo = detail;
});

// 代码2
this.route.paramMap.subscribe(
    (routeParam: Params) => {
        this.orderId = routeParam.get('id');
        this.orderDetailSer.loadData(this.orderId)
            .subscribe((detail: OrderDetail) => {
                this.orderInfo = detail;
            })
    }
);

代码1和2都做了同样的事，这里为什么要用switchMap()，或者说用switchMap()有什么好处？

Answer 1

两个代码不完全等价，如果this.orderDetailSer.loadData还没完成，route就发出另一个参数的话，代码1中的this.orderDetailSer.loadData装载的数据就会被忽略，不会调用this.orderInfo = detail

而代码2则this.orderDetailSer.loadData装载的数据就不会被忽略，完成后都会调用一次this.orderInfo = detail

显然代码1更完美，已经没用的this.orderDetailSer.loadData装载的结果会被忽略。

Answer 2

这里路由参数变化后调用了 loadData 函数，这个函数是异步的，也就意味着你不能保证每次路由参数 id 发生变化后，都是按照顺序返回 loadData 的值，于是你需要取消订阅旧的数据流，总是订阅最新的数据流， switchMap 就是干这个的