Vue中使用Promise先后实现请求先后执行

2,516 阅读1分钟

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

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

优先执行到第一个接口为Promise:

其次执行到接口直接写好,后面直接在 mouted 周期中顺序执行:

preferentialObj为全局的对象,用来存储动态过滤器的字段,在第一个接口就有就进行赋值了:

然后在生命周期的 mouted进行Promise 执行请求的顺序

就完成了一个页面获取两个接口数据并且渲染