Angular请求防抖处理第一次请求失效问题


Posted in Javascript onMay 17, 2019

问题:

根据项目中的需求,需要设计一个下拉框,在输入时根据内容提供实时的建议,在此我们使用了如下组件,

<p-autoComplete [(ngModel)]="text" [suggestions]="results" 
(completeMethod)="search($event)">
</p-autoComplete>

因为我们需要根据输入内容实时的查询后台返回结果,如果每次更改都要传给后台的话,太耗费资源,而且对用户也不友好,为此我们采用了angular的请求防抖做处理,代码如下。

packages$: Observable<NpmPackageInfo[]>;
private searchText$ = new Subject<string>();

search(packageName: string) {
 this.searchText$.next(packageName);
}
ngOnInit() {
 this.packages$ = this.searchText$.pipe(
 debounceTime(500),
 distinctUntilChanged(),
 switchMap(packageName =>
  this.searchService.search(packageName, this.withRefresh))
 );
}

作用如下:

debounceTime(500) - 等待,直到用户停止输入(这个例子中是停止 1/2 秒)。

distinctUntilChanged() - 等待,直到搜索内容发生了变化。

switchMap() - 把搜索请求发送给服务。

但当我们使用的时候发现在初始化第一次请求的时,并不会调用service的方法,错误代码如下:

private searchText$ = new Subject<string>();
packages$: Observable<InstrumentAlias[]>;
ngOnInit() {
// 创建可观察着对象
this.packages$ = this.searchText$.pipe(
   debounceTime(500),
   distinctUntilChanged(),
   switchMap(packageName =>
    this.instrumentAliasService.queryInstrumentAliasByName(packageName))
  );
}
this.searchText$.next(this.queryName);
this.packages$.subscribe((instrumentAliases: Array<InstrumentAlias>) => {
 this.filteredinstrumentAlias = instrumentAliases;
}, () => {
 console.log('get instrumentAliases error');
});

searchText$ 是一个序列,包含用户输入到搜索框中的所有值。 它定义成了 RxJS 的 Subject 对象,这表示它是一个多播 Observable,同时还可以自行调用 next(value) 来产生值,在上面错误的代码中,因为我们先调用的时next方法,这是虽然产生了值,但是还没有进行订阅,所以第一次的值并不会向后台发起请求,而之后因为我们已经订阅了这个东西,所以第一次请求之后的请求都有效果。

结果方法:

在初始化的时候就进行订阅,这样在之后的查找我们只需要使用next传值即可,我们已订阅的对象就会自动触发后台请求。

总结:

写功能的时候只是简单的对代码进行复制粘贴,并没有真正的理解angular的观察者的设计机制,通过这个错误加深了对angular观察者的理解。

以上所述是小编给大家介绍的Angular请求防抖处理第一次请求失效问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jquery 取子节点及当前节点属性值
Jul 25 Javascript
jQuery数据缓存用法分析
Feb 20 Javascript
AngularJS 2.0入门权威指南
Oct 08 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
Dec 08 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
Sep 20 Javascript
使用vue + less 实现简单换肤功能的示例
Feb 21 Javascript
vue实现点击当前标签高亮效果【推荐】
Jun 22 Javascript
vue slots 组件的组合/分发实例
Sep 06 Javascript
一文读懂ES7中的javascript修饰器
May 06 Javascript
koa+mongoose实现简单增删改查接口的示例代码
May 13 Javascript
js实现简单掷骰子效果
Oct 24 Javascript
JavaScript实现页面动态验证码的实现示例
Mar 23 Javascript
vue cli 3.0 搭建项目的图文教程
May 17 #Javascript
小程序云开发如何实现图片上传及发表文字
May 17 #Javascript
tsconfig.json配置详解
May 17 #Javascript
小程序云函数调用API接口的方法
May 17 #Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
May 17 #Javascript
微信小程序云开发之使用云函数
May 17 #Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 #jQuery
You might like
虹吸壶煮咖啡26个注意事项
2021/03/03 冲泡冲煮
什么情况下可以不写PHP的闭合标签“?&gt;”
2014/08/28 PHP
php实现三级级联下拉框
2016/04/17 PHP
关于Curl在Swoole协程中的解决方案详析
2019/09/12 PHP
javascript 函数速查表
2010/02/07 Javascript
ExtJS4 Grid改变单元格背景颜色及Column render学习
2013/02/06 Javascript
通过遮罩层实现浮层DIV登录的js代码
2014/02/07 Javascript
用javascript将数据导入Excel示例代码
2014/09/10 Javascript
初始Nodejs
2014/11/08 NodeJs
EasyUI中datagrid在ie下reload失败解决方案
2015/03/09 Javascript
JavaScript中实现Map的示例代码
2015/09/09 Javascript
JavaScript电子时钟倒计时第二款
2016/01/10 Javascript
js关于getImageData跨域问题的解决方法
2016/10/14 Javascript
详解Vue使用 vue-cli 搭建项目
2017/04/20 Javascript
zTree树形插件异步加载方法详解
2017/06/14 Javascript
underscore之Chaining_动力节点Java学院整理
2017/07/10 Javascript
Vue项目查看当前使用的elementUI版本的方法
2018/09/27 Javascript
使用Jenkins部署React项目的方法步骤
2019/03/11 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
2019/04/22 Javascript
Vue Echarts实现可视化世界地图代码实例
2019/05/07 Javascript
8 个有用的JS技巧(推荐)
2019/07/03 Javascript
vue 项目引入echarts 添加点击事件操作
2020/09/09 Javascript
[00:47]TI7不朽珍藏III——沙王不朽展示
2017/07/15 DOTA
[01:20:37]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
python 算法 排序实现快速排序
2012/06/05 Python
Python中操作文件之write()方法的使用教程
2015/05/25 Python
Python基于回溯法子集树模板解决野人与传教士问题示例
2017/09/11 Python
Python实现的序列化和反序列化二叉树算法示例
2019/03/02 Python
python 如何将数据写入本地txt文本文件的实现方法
2019/09/11 Python
python使用opencv在Windows下调用摄像头实现解析
2019/11/26 Python
手工制作的豪华英式沙发和沙发床:Willow & Hall
2019/05/03 全球购物
求职自我推荐信
2014/06/25 职场文书
我爱幼儿园演讲稿
2014/09/11 职场文书
甜品店创业计划书
2014/09/21 职场文书
利用Python第三方库实现预测NBA比赛结果
2021/06/21 Python
html form表单基础入门案例讲解
2021/07/21 HTML / CSS