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控制iframe滚动的代码
Apr 10 Javascript
设置下载不需要倒计时cookie(倒计时代码)
Nov 19 Javascript
js arguments.callee的应用代码
May 07 Javascript
离开页面时检测表单元素是否被修改,提示保存的js代码
Aug 25 Javascript
父元素与子iframe相互获取变量和元素对象的具体实现
Oct 15 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
Sep 09 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
Nov 05 Javascript
js实现搜索提示框效果
Sep 05 Javascript
vue打开子组件弹窗都刷新功能的实现
Sep 21 Javascript
Vue实现简单的留言板
Oct 23 Javascript
javascript实现点击产生随机图形
Jan 25 Javascript
jQuery实现鼠标拖动图片功能
Mar 04 jQuery
基于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往windows中添加用户
2006/12/06 PHP
php不用内置函数对数组排序的两个算法代码
2010/02/08 PHP
深入理解require与require_once与include以及include_once的区别
2013/06/05 PHP
discuz图片顺序混乱解决方案
2015/07/29 PHP
WordPress中转义HTML与过滤链接的相关PHP函数使用解析
2015/12/22 PHP
php防止sql注入的方法详解
2017/02/20 PHP
PHP设计模式之装饰器模式定义与用法详解
2018/04/02 PHP
jquery常用技巧及常用方法列表集合
2011/04/06 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
2014/08/22 Javascript
jQuery Real Person验证码插件防止表单自动提交
2015/11/06 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
2017/01/10 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
2017/03/04 Javascript
JavaScript实现反转字符串的方法详解
2017/04/27 Javascript
ES6正则表达式的一些新功能总结
2017/05/09 Javascript
js字符串与Unicode编码互相转换
2017/05/17 Javascript
Vue.js中该如何自己维护路由跳转记录
2019/05/19 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
2019/08/27 Javascript
vue结合el-upload实现腾讯云视频上传功能
2020/07/01 Javascript
JS异步宏队列微队列原理详解
2020/09/09 Javascript
Python多线程爬虫简单示例
2016/03/04 Python
python数据预处理之将类别数据转换为数值的方法
2017/07/05 Python
python2.7实现FTP文件下载功能
2018/04/15 Python
django-csrf使用和禁用方式
2020/03/13 Python
如何基于python实现不邻接植花
2020/05/01 Python
html5小技巧之通过document.head获取head元素
2014/06/04 HTML / CSS
html5 冒号分隔符对齐的实现
2019/07/31 HTML / CSS
HTML5 3D旋转相册的实现示例
2019/12/03 HTML / CSS
泰国汽车、火车和轮渡票预订网站:Bus Online Ticket
2017/09/09 全球购物
商场总经理岗位职责
2014/02/03 职场文书
六年级数学教学反思
2014/02/03 职场文书
运动会跳远加油稿
2014/02/20 职场文书
创先争优活动心得体会
2014/09/04 职场文书
数学考试作弊检讨书300字
2015/02/16 职场文书
运动会新闻报道稿
2015/07/22 职场文书
2016年党员创先争优承诺书
2016/03/25 职场文书
Java Dubbo框架知识点梳理
2021/06/26 Java/Android