vue等两个接口都返回结果再执行下一步的实例


Posted in Javascript onSeptember 08, 2020

next 只能?用一次,??可以用 Promise.all 解?Q,等待????步操作都返回?果後再 next:

beforeRouteEnter (to, from, next) {
 // Promise.all ??鹊?到M?鹊 Promise 都 resolve 後才??^?跑(then)
 Promise.all([
  main._base({
   methodName: 'QueryProductInfo',
   productId: to.params.id
  }),
  main._base({
   methodName: 'QueryProductReview',
   type: '0',
   index: '0',
   count: '2',
   productId: to.params.id
  })
 ])
 .then( result => next( vm => {
  // ?绦薪Y果??凑丈厦骓?序放在 result ?到M?龋?? result[0],代表第一??函?档 resolve ?果
  vm.product = result[0].data.product
  vm.shop = result[0].data.shop

  vm.evalData = result[1].data
 }))
}

补充知识:vue 中多接口请求时 按顺序执行接口使用await async

我就废话不多说了,大家还是直接看代码吧~

async getSelectOrg () {
  console.log('----1')
  return axiosPost('/api/uum/org/orglist', {
   accessToken: localStorage.token,
   option: true}).then(response => {
   this.options_grade = []
   if (response.data.data.length > 1) {
    this.options_grade.push({
     value: '-1',
     label: '全部'
    })
    this.formInline.organization = '-1'
   } else if (response.data.data.length === 1) {
    this.formInline.organization = response.data.data[0].orgCode
   }
   for (let i = 0; i < response.data.data.length; i++) {
    let tmp = {}
    tmp.value = response.data.data[i].orgCode
    tmp.label = response.data.data[i].orgName
    this.options_grade.push(tmp)
   }
   console.log('----2')
  }).catch(err => {
   console.log(err)
  })
 },
 async getSelect () {
  await this.getSelectOrg()
  console.log('----3')
  this.searchInfo()
 }
},
mounted () {
 let that = this
 window.onresize = function () { // 定义窗口大小变更通知事件
  // _this.screenWidth = document.documentElement.clientWidth // 窗口宽度
  that.clientHeight = document.documentElement.clientHeight // 窗口高度
 }
 this.getSelect()
},

以上这篇vue等两个接口都返回结果再执行下一步的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 语言的递归编程
May 18 Javascript
TinyMCE 新增本地图片上传功能
Nov 05 Javascript
JS去除字符串两端空格的简单实例
Dec 27 Javascript
Javascript基础知识(三)BOM,DOM总结
Sep 29 Javascript
Javascript 运动中Offset的bug解决方案
Dec 24 Javascript
JavaScript中document.forms[0]与getElementByName区别
Jan 21 Javascript
基于JS实现无缝滚动思路及代码分享
Jun 07 Javascript
webpack2.0搭建前端项目的教程详解
Apr 05 Javascript
javascript简单链式调用案例分析
May 10 Javascript
微信小程序模板template简单用法示例
Dec 04 Javascript
策略模式实现 Vue 动态表单验证的方法
Sep 16 Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
Nov 19 Vue.js
基于postman获取动态数据过程详解
Sep 08 #Javascript
解决vue请求接口第一次成功,第二次失败问题
Sep 08 #Javascript
如何区分vue中的v-show 与 v-if
Sep 08 #Javascript
谈谈JavaScript中的函数
Sep 08 #Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
Sep 08 #Javascript
浅析JavaScript 函数柯里化
Sep 08 #Javascript
Vue.js使用axios动态获取response里的data数据操作
Sep 08 #Javascript
You might like
PHP实现多服务器session共享之NFS共享的方法
2007/03/16 PHP
微信扫描二维码登录网站代码示例
2013/12/30 PHP
php递归实现无限分类的方法
2015/07/28 PHP
ThinkPHP3.2.1图片验证码实现方法
2016/08/19 PHP
php实现的简单中文验证码功能示例
2017/01/03 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
JavaScript与C# Windows应用程序交互方法
2007/06/29 Javascript
javaScript同意等待代码实现心得
2011/01/01 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
2016/05/27 Javascript
js select下拉联动 更具级联性!
2020/04/17 Javascript
遍历json获得数据的几种方法小结
2017/01/21 Javascript
JS实现列表页面隔行变色效果
2017/03/25 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
2017/10/18 Javascript
深入浅析js原型链和vue构造函数
2018/10/25 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
2018/11/05 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
2019/09/17 Javascript
JavaScript类的继承多种实现方法
2020/05/30 Javascript
JavaScript 防盗链的原理以及破解方法
2020/12/29 Javascript
Python引用模块和查找模块路径
2016/03/17 Python
在PyCharm下打包*.py程序成.exe的方法
2018/11/29 Python
Python 中Django验证码功能的实现代码
2019/06/20 Python
Windows系统Python直接调用C++ DLL的方法
2019/08/01 Python
节日快乐! Python画一棵圣诞树送给你
2019/12/24 Python
Python StringIO如何在内存中读写str
2020/01/07 Python
Python基于yield遍历多个可迭代对象
2020/03/12 Python
Scrapy-Redis之RedisSpider与RedisCrawlSpider详解
2020/11/18 Python
requests在python中发送请求的实例讲解
2021/02/17 Python
HTML5 Canvas锯齿图代码实例
2014/04/10 HTML / CSS
HTML5 canvas基本绘图之填充样式实现
2016/06/27 HTML / CSS
意大利在线购买隐形眼镜网站:VisionDirect.it
2019/03/18 全球购物
外国语学院毕业生自荐信
2013/10/28 职场文书
大学军训通讯稿
2014/01/13 职场文书
自我推荐信范文
2014/05/09 职场文书
华山导游词
2015/02/03 职场文书
清洁工个人总结
2015/03/04 职场文书
求职推荐信范文
2015/03/27 职场文书