使用Symbol区分连续的axios的ajax异步请求

每日鸡汤：每个你想要学习的瞬间都是未来的自己向你求救

前置知识：Symbol具有唯一性，哪怕是传入相同的字符，也不相同

console.log(Symbol('foo') === Symbol('foo'));
// Expected output: false

其实这就跟我们常用的uuid一样，uuid也是有唯一性的，只不过是一串数字，有的时候用uuid倒是可以，但是 Symbol 是 es6 原生的功能，能用它当然比再安装一个新的 npm 包好多了。

应用场景：

点击一个按钮，会发送一个请求，快速连续点击这个按钮，取最后点击的请求的返回结果。

这个时候，我们就需要取消前面所有的请求，只留最后一个，但是如果前面的某个请求A没来得及取消，还是返回了，最后一个请求B也正在响应；此时我们想要最后的结果，肯定是最后一个请求B的返回，由于请求是异步的，如果不能区分两个请求那么肯定会出错。

话不多说，看代码，下面代码是vue2项目的部分，这个代码没有取消 axios 请求的部分，等我们以后再补充，本篇文章重点看一下Symbol的应用。

export default {
	data() {
		return {
			list: [], // 全局最终返回的结果
			requestSymbol: null, // 全局的请求的Symbol，也是最新的
		}
	},
	methods: {
		getResult() {
			// 创建Symbol，局部变量
			let curSymbol = Symbol(new Date())
			// 赋值给this上的变量
			this.requestSymbol = curSymbol
			axios
				.get('xxxx')
				.then(res => {
					// 返回之后，取最新的this上面的Symbol

					// 假设这个返回的请求是A
					// 此时如果新请求B已经发起了，那么一定更新了 this.requestSymbol
					// 此时A的curSymbol 和 this.requestSymbol一定不想等
					const { requestSymbol } = this
					// 是同一个Symbol说明A后面没有新的请求，此时才能赋值给最终的结果 this.list
					if (requestSymbol === curSymbol) {
						this.list = res
					}
				})
				.catch(err => {
					console.log(err)
				})
		},
	},
}

如果有不对的地方，烦请指正！