【vue】使用Promise方法保证按顺序执行

使用Promise方法可以叠加.then方法，来保证执行顺序。

queryTasksNum(){// TODO: 如果和queryImg都放在mounted里，会比后者执行得早// 查询未标记数量、已标记数量、已复核数量let that = this;var cntIm0 = 0;var cntIm1 = 0;var cntIm3 = 0;// TODO：如果是同步发送可能会出现问题function getNumIm0(){return new Promise(function(resolve){axios({method:'post',url:'/labelapi/queryTask',data: {"query_status": Number(localStorage.getItem('ms_userrole')) - 1},// headers:{"Content-Type":"multipart/form-data;"}}).then(function (response) {console.log('queryimg:', response.data)cntIm0 = response.data.assignnum;resolve(cntIm0);}).catch(function (error) {console.log(error);});});}function getNumIm1(){return new Promise(function(resolve){axios({method:'post',url:'/labelapi/queryTask',data: {"query_status": Number(localStorage.getItem('ms_userrole')),// 此处每页返回6个图},// headers:{"Content-Type":"multipart/form-data;"}}).then(function (response) {console.log('queryimg:', response.data)cntIm1 = response.data.assignnum;resolve(cntIm1);}).catch(function (error) {console.log(error);});});}function getNumIm3(){return new Promise(function(resolve){axios({method:'post',url:'/labelapi/queryTask',data: {"query_status": Number(localStorage.getItem('ms_userrole')) + 2,// 此处每页返回6个图},// headers:{"Content-Type":"multipart/form-data;"}}).then(function (response) {console.log('queryimg:', response.data)cntIm3 = response.data.assignnum;resolve(cntIm3);}).catch(function (error) {console.log(error);});});}getNumIm0().then(function(data){console.log('cntIm0', data);return getNumIm1();}).then(function(data){console.log('cntIm1', data);return getNumIm3();}).then(function(data){console.log('cntIm3', data);// TODO：最好还是放在外边，想办法确保异步顺序// cntIm2 is error// var cntIm2 = that.imageList.length;var cntIm2 = that.imglength;console.log('queryTasksNum', cntIm0, cntIm1, cntIm2, cntIm3);that.completed=cntIm1 + cntIm2 + cntIm3;that.totalMission=cntIm0 + cntIm1 + cntIm2 + cntIm3;that.followed=cntIm2 + cntIm3;that.totalFollow=cntIm1 + cntIm2 + cntIm3;that.missionCompleted = ((cntIm1 + cntIm2 + cntIm3) / (cntIm0 + cntIm1 + cntIm2 + cntIm3) * 100).toFixed(2);if(isNaN(that.missionCompleted)){that.missionCompleted = 100;}that.followUpCompleted = ((cntIm2 + cntIm3) / (cntIm1 + cntIm2 + cntIm3) * 100).toFixed(2);if(isNaN(that.followUpCompleted)){that.followUpCompleted = 100;}});},

【vue】使用Promise方法保证按顺序执行相关推荐

Rabbitmq如何保证消息顺序执行
https://www.cnblogs.com/-wenli/p/13047059.html
Vue父组件方法和子组件方法执行优先顺序
首先,我遇到了一个两个分离的前端项目,该父类组件调用子类组件时,不论是写在mounted还是created中,明明两个方法应该按照顺序执行,和我想的完全不一样,子组件的方法优先执行,父类的方法永远在子 ...
动态加载js如何保证顺序执行？
我们知道,可以使用创建script标签的方法来动态加载js文件. 但随之带来问题,如果创建多个script标签来加载多个js文件,这些文件是异步并行加载的,默认添加了async属性,最后执行顺序不能保 ...
js设置ajax执行顺序,ajax同步处理(使得JS按顺序执行)
在项目中碰到一个问题: 图一: 图二: 函数1代码:这里是因为有ajax请求,默认的是异步的 //点击分页页码,请求后台返回对应页码的数据 function getdata(fewPage,flag, ...
vue 请求时方法执行顺序问题，异步请求无法同时处理多个接口，使用同步顺序执行：async/await使用
vue 请求时方法执行顺序问题,异步请求无法同时处理多个接口,使用同步顺序执行:async/await使用异步解决方案:async/await 多个await,同步拿到数据再处理多个接口处理拿到数 ...
Promise相关内容（三）——异步获取服务器数据：promise方式解决回调地狱的问题。通过多个.then使代码可读性更高实现异步任务的串行执行，保证按顺序发送请求获取数据
Promise相关内容(三)--异步获取服务器数据:promise方式解决回调地狱的问题.通过多个.then使代码可读性更高 & 实现异步任务的串行执行,保证按顺序发送请求获取数据第一种形式 ...
jmeter 线程执行顺序_面试官让我说出8种线程顺序执行的方法！我懵了
https://www.cnblogs.com/wenjunwei/p/10573289.html 一.前言本文使用了8种方法实现在多线程中让线程按顺序运行的方法,涉及到多线程中许多常用的方法,不止 ...
ES6 Promise 并行执行和顺序执行
1.Promise.all 并行执行promise getA和getB并行执行,然后输出结果.如果有一个错误,就抛出错误 /*** 每一个promise都必须返回resolve结果才正确* 每一个pr ...
[转载] --- 让线程按顺序执行8种方法
看到一篇比较用心的总结,涉及到很多知识点,转来保存,而且我把里面的每个方法都试了一遍,亲测没问题此次转载,还新增了一些说明和结构我的总结: 其实,让线程按顺序执行,其实就是一个让多线程强行串行化的 ...

【vue】使用Promise方法保证按顺序执行

【vue】使用Promise方法保证按顺序执行

【vue】使用Promise方法保证按顺序执行相关推荐

最新文章

热门文章