在前端开发中，我们经常需要处理异步输入框的情况，而在 Angular 框架中，处理异步输入框的方式又比较繁琐。为了解决这个问题，有一个非常实用的 npm 包：@ng-reactive/async-input。本文介绍如何使用这个 npm 包，让开发异步输入框变得更加容易。
基本概念
首先，我们需要了解一些基本概念：
- 异步输入框：指用户在输入框中输入文字时，我们需要异步向服务器发送请求进行搜索的输入框。
- FormControl：是 Angular 中的表单控件，用于对表单元素进行管理。Input 组件通常使用 FormControl 进行双向绑定。
- AsyncValidatorFn：是 Angular 中一个异步验证器接口，我们可以使用它来处理异步输入框的验证。
安装
使用 npm 进行安装：
npm install @ng-reactive/async-input
基本用法
使用 @ng-reactive/async-input 包，我们只需要关注 Input 组件的输入和输出：
- 输入参数：Input 组件需要绑定到一个 FormControl 上，并且需要传入一个 AsyncValidatorFn。
- 输出参数：通过 AsyncValidatorFn 处理异步验证后，触发 FormControl 的状态变化，我们可以通过订阅 FormControl 的 valueChanges 事件，获取到 FormControl 的最新值。
下面是一个基本的示例代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------ ---------- - ---- -----------------
------ - --------------------- ---------------- - ---- ---------------------------
------------
--------- -----------
--------- -
------ ----------- ---------------------------
---- ----------------------------- ----------------- - ---- --------
------ ---------------- -------
--
--
------ ----- ------------ -
---------- - --- --------------- -
--------------------
------------------------------------------
---
------- --------------- ---------------- - ------- -- -
-- --------- ------- ---
--
-在上面的示例代码中，我们首先在模版文件中创建了一个输入框，将它绑定到 asyncInput 这个 FormControl 上。接着，在 FormControl 的构造函数中，我们传入了一个异步验证器 createAsyncValidator(this.asyncValidator)。其中 asyncValidator 是一个函数，用于发送异步请求，并返回 Promise 对象。
最后，我们可以通过订阅 FormControl 的 valueChanges 事件获取到最新的值。
深度应用
除了基本用法之外，@ng-reactive/async-input 包还有很多高级用法。例如，多个异步请求的处理。
如果我们一个输入框需要发送多个异步请求，如何实现呢？其实，只需要依次遍历所有异步请求，每一个请求返回后，将结果合并到结果集中，直到所有请求结束。下面是一个示例代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------ ---------- - ---- -----------------
------ - --------------------- ---------------- - ---- ---------------------------
------------
--------- -----------
--------- -
------ ----------- ---------------------------
---- ----------------------------- ----------------- - ---- --------
------ ---------------- -------
--
--
------ ----- ------------ -
---------- - --- --------------- -
--------------------
------------------------------------------
---
------- --------------- ---------------- - ----- ------- -- -
----- ---- - ------ ----- ------
----- ------- - ---
--- ------ --- -- ----- -
----- ------ - ----- -----------
---------------------
-
-- -----
--
-在上面的示例代码中，我们使用了 async/await 关键字，将异步处理更加简洁。同时，引入了 urls 和 results 两个变量作为多个请求的输入输出容器。我们使用 for 循环遍历 urls，对每个 url 执行 fetch 请求，并将结果推入 results 中。
最后，我们可以根据实际需求处理整个 results 的结果集，然后返回验证结果即可。
结论
通过使用 @ng-reactive/async-input 包，我们可以非常方便地处理异步输入框的验证。无论是基本用法还是高级用法，@ng-reactive/async-input 都能够解决我们的问题，并且提供了更加简洁的代码和更加流畅的开发体验。如果你在处理异步输入框的时候遇到了困难，一定不要错过这个实用的 npm 包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067381890c4f727758422d