在 angular app 中,当我们要写一个搜索相关的功能时,我们可能要考虑节流,另外一个我们需要考虑的就是,当我们结束输入的时候,由于一些原因,接口还未返回数据,这时候我们又输入了新的内容,然后又会发送一个请求,那这时候就会产生一个问题,如果后一个接口,先返回数据,就会造成我们搜索到的结果是错误的。这时候我们就需要用到 rxjs 中的 map 相关的操作符。
switchMap
switchMap 的特点简单说就是,如果前一个请求订阅未返回数据,发起第二次请求的时候,就会取消掉前一个请求的订阅
当我们输入 1234 并把网速调到 slow 3g 时,然后再输入 5,这时候前一次请求就会被 canceled 掉,这样我们就会节约 api 请求,也可以防止返回数据顺序不对,造成页面渲染的结果与预期不符。
只要我们可以把操作变成一个 Observable, 这样 api 请求就可以减少许多额外的。
完整 demo
- 本文链接: https:https://whyour.cn/post/rxjs-map-operator.html
- 最后更新于:
- 版权声明: 本博客所有文章除特别声明外,均采用 署名 4.0 国际(CC BY 4.0) 许可协议。转载请注明出处!
angular 如何添加多环境变量的配置文件
angular 如何代理后端 API 调用