今天用VUE编写项目时,涉及到两个异步请求在一个方法里面对同一个变量进行操作,之前自己都没意识到多个异步请求对同一变量进行操作的时候会导致数据错误,结果今天调试了半天,才想到了这个问题。也是怪自己还是一个新手,对于这种常识性的错误都不敏感。
于是自己查了一下相关资料,发现了promise的用法。刚开始的时候自己看了一下博客,看的也是一脸懵逼。因为promise的写法很多,很多也用到了新的ES6的写法。但是自己看了一下代码例子,总算是明白了一下,废话少讲,直接上代码吧!
可以看到上面的代码是一个相对简单的promise结构。因为我们用异步请求的时候,会遇到多个请求同时发生,这样不能保证它们的运行顺序,会导致数据出错,就像上面
的代码,尽管我取到了正确的数据,但是在页面渲染的时候,就是完全是错的。在上面的代码中,我们先new promise,在参数列表有两个参数,一个resolve一个rejects。通俗的
来讲,resolve相当于ajax中的success,rejects则就是catch。当然,这两个单词可以随便取,也可以在参数列表写上a,b。但是他们代表的意思是一模一样的。在后面我们可以看</