前端踩坑小结:多个异步请求在同一个函数里面执行时的同步问题之promise的用法。

今天用VUE编写项目时，涉及到两个异步请求在一个方法里面对同一个变量进行操作，之前自己都没意识到多个异步请求对同一变量进行操作的时候会导致数据错误，结果今天调试了半天，才想到了这个问题。也是怪自己还是一个新手，对于这种常识性的错误都不敏感。

于是自己查了一下相关资料，发现了promise的用法。刚开始的时候自己看了一下博客，看的也是一脸懵逼。因为promise的写法很多，很多也用到了新的ES6的写法。但是自己看了一下代码例子，总算是明白了一下，废话少讲，直接上代码吧！



可以看到上面的代码是一个相对简单的promise结构。因为我们用异步请求的时候，会遇到多个请求同时发生，这样不能保证它们的运行顺序，会导致数据出错，就像上面

的代码，尽管我取到了正确的数据，但是在页面渲染的时候，就是完全是错的。在上面的代码中，我们先new promise，在参数列表有两个参数，一个resolve一个rejects。通俗的

来讲，resolve相当于ajax中的success，rejects则就是catch。当然，这两个单词可以随便取，也可以在参数列表写上a,b。但是他们代表的意思是一模一样的。在后面我们可以看

到一行代码“resolve()”，这就相当于return。在promise里面的代码块会最先执行，然后resolve()，接着会运行then里面的方法。在then里面也有参数，()=> {/代码块/}，因为我在上面

代码中resolve()的括号中并没有写参数，所以可以看成它返回的是一个空的结果集，所以我在then后面有（）来接受，因为是空结果集，所以我用（）来接收。当然你也可以返回想

要的结果，打个比方，我把代码改成下面这样



9384

我让resolve返回了一个值，然后在then里面打印出来。



可以看到，res被打印出来就是返回的值1。



没有用promise之前，上面的语句顺序就是乱的，因为我用promise控制了异步请求的执行顺序，所以现在的顺序是正常的。

最后推荐一个链接，讲promise讲的特别详细。我也是刚刚才看了一下promise，自己学的也不深，在这里也不敢误人子弟，所以还有很多更多的内容还没有写出来，如果

上面有什么明显的错误也请大家指出来的同时多多原谅。同时因为自己讲的不深，大家可以继续在网上找找资源，很多博客上面讲的也是特别详细的。
https://zhuanlan.zhihu.com/p/25198178