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 相关文章推荐
语义化 H1 标签
Jan 14 Javascript
javascript cookie操作类的实现代码小结附使用方法
Jun 02 Javascript
jQuery boxy弹出层插件中文演示及使用讲解
Feb 24 Javascript
JavaScript中valueOf函数与toString方法深入理解
Dec 02 Javascript
JS嵌套函数调用上下文的问题解决
Mar 26 Javascript
node.js [superAgent] 请求使用示例
Mar 13 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
Feb 23 Javascript
Javascript中的async awai的用法
May 17 Javascript
element UI upload组件上传附件格式限制方法
Sep 04 Javascript
vue组件tabbar使用方法详解
Nov 06 Javascript
JavaScript装饰者模式原理与用法实例详解
Mar 09 Javascript
原生js实现点击按钮复制内容到剪切板
Nov 19 Javascript
基于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面向对象学习笔记之二 生成对象的设计模式
2012/10/06 PHP
setcookie中Cannot modify header information-headers already sent by错误的解决方法详解
2013/05/08 PHP
PHP实现支持SSL连接的SMTP邮件发送类
2015/03/05 PHP
PHP实现的简单路由和类自动加载功能
2018/03/13 PHP
JavaScript 原型继承
2011/12/26 Javascript
js变量以及其作用域详解
2020/07/18 Javascript
NodeJS的url截取模块url-extract的使用实例
2013/11/18 NodeJs
javascript作用域问题实例分析
2015/07/13 Javascript
node.js 动态执行脚本
2016/06/02 Javascript
Javascript中的arguments对象
2016/06/20 Javascript
轻松实现jquery选项卡切换效果
2016/10/10 Javascript
JS简单实现表格排序功能示例
2016/12/20 Javascript
JS三目运算(三元运算)方法详解
2017/03/01 Javascript
利用JS实现简单的瀑布流加载图片效果
2017/04/22 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
2017/08/30 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
2017/10/25 Javascript
解决Vue动态加载本地图片问题
2019/10/09 Javascript
vue 通过绑定事件获取当前行的id操作
2020/07/27 Javascript
[39:07]LGD vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
python解析xml文件实例分析
2015/05/27 Python
Python实现注册登录系统
2017/08/08 Python
matplotlib绘图实例演示标记路径
2018/01/23 Python
python在文本开头插入一行的实例
2018/05/02 Python
Sanic框架应用部署方法详解
2018/07/18 Python
示例详解Python3 or Python2 两者之间的差异
2018/08/23 Python
Python从入门到精通之环境搭建教程图解
2019/09/26 Python
通过celery异步处理一个查询任务的完整代码
2019/11/19 Python
真正了解CSS3背景下的@font face规则
2017/05/04 HTML / CSS
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
餐厅筹备计划书
2014/04/25 职场文书
差生评语大全
2014/05/04 职场文书
省级优秀班集体申报材料
2014/05/25 职场文书
五好家庭申报材料
2014/12/20 职场文书
党组织关系的介绍信模板
2019/06/21 职场文书
idea搭建可运行Servlet的Web项目
2021/06/26 Java/Android
Python使用Web框架Flask开发项目
2022/06/01 Python