React input输入框异步校验的处理方式

前言

在日常工作中，我们经常接触到表单验证相关的功能。有些简单的校验（比如输入要求为手机号、邮箱、密码的字符组合等）可以直接由前端进行判断，但是有些复杂多变的判断（比如校验用户名是否存在、特殊行政区提示等）就必须发起请求由后端来验证，然后前端根据后端返回的结果进行提示等处理（这里称该校验的方式为异步校验）。

处理方式1：防抖

异步校验（选择框）存在以下一个问题：

• 我先选择a
• 然后再选择b
• b的请求先回来不需要提示
• a的请求后回来需要提示

这样的话，提示就出错了（最后选择的是b，b是不需要提示的，而异步请求的结果是a的结果后回来，所以最终还是显示了提示）。

这里有一种方法，可以采用防抖技术，简单来说就是当n秒内请求函数只会执行一次，如果n秒内事件再次被触发，则重新计算时间，取消原来的请求。具体可以看：帮你彻底搞懂防抖和节流（附带在React使用的一个例子）

处理方式2：采用标记

采用防抖并不是完美的，因为防抖有个时间间隔N，如果网络的请求速度非常慢的话（大大超过N），那么在大于N的时间段内改变选择框的值的话，那还是会发起多次的请求，而我们并不能保证多次请求返回结果的顺序就是我们发起请求的顺序，这样还是可能会出错。
第二种方法可以采用标记的方式：

1. 在页面的实例上添加一个ID属性。
2. 在处理输入变化的函数内（onChange()）也定义一个变量id，每次发起请求的时候，同时改变id和ID。
3. 在请求的回调中对比id和ID的值，如果它们不相等的话，则将请求结果抛弃，只取它们值相等的结果，这样就能保证结果是最新发起请求返回回来的了（因为每次发起请求时，id和ID同时更新，实例上的ID是能代表最新一次发出的请求，而回调中的id存的则是每次发出请求时的所生成的）。

伪代码如下：

class Demo extends React.Component {
	ID
	...
	onChange = (e) => {
		let id = this.ID = Math.random()
		api().then( res => {
			if(this.ID !== id) {
				return null
			}
			// 正常处理
		})
	}
}