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 日期处理之时区问题
Oct 08 Javascript
jquery实现非叠加式的搜索框提示效果
Jan 07 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
Aug 11 Javascript
js简单实现Select互换数据的方法
Aug 17 Javascript
JS截取与分割字符串常用技巧总结
Nov 10 Javascript
js判断移动端是否安装某款app的多种方法
Dec 18 Javascript
原生JS实现圆环拖拽效果
Apr 07 Javascript
Bootstrap多级菜单的实现代码
May 23 Javascript
React学习笔记之列表渲染示例详解
Aug 22 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
Mar 04 Javascript
微信小程序如何再次获取用户授权的方法
May 10 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
Sep 16 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
windows下升级PHP到5.3.3的过程及注意事项
2010/10/12 PHP
linux下为php添加curl扩展的方法
2011/07/29 PHP
php计算两个整数的最大公约数常用算法小结
2015/03/05 PHP
PHP会话操作之cookie用法分析
2016/09/28 PHP
JavaScript 编程引入命名空间的方法
2007/06/29 Javascript
JS解决ie6下png透明的方法实例
2013/08/02 Javascript
javascript与cookie 的问题详解
2013/11/11 Javascript
jquery实现图片翻页效果
2013/12/23 Javascript
js判断横竖屏及禁止浏览器滑动条示例
2014/04/29 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
2014/11/20 Javascript
实例讲解js验证表单项是否为空的方法
2016/01/09 Javascript
js实现点击每个li节点,都弹出其文本值及修改
2016/12/15 Javascript
Js apply方法详解
2017/02/16 Javascript
php 修改密码实现代码
2017/05/24 Javascript
bootstrap switch开关组件使用方法详解
2017/08/22 Javascript
Bootstrap实现可折叠分组侧边导航菜单
2018/03/07 Javascript
nodejs环境使用Typeorm连接查询Oracle数据
2019/12/05 NodeJs
Vue中import from的来源及省略后缀与加载文件夹问题
2020/02/09 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
2020/09/22 Javascript
node.js 基于 STMP 协议和 EWS 协议发送邮件
2021/02/14 Javascript
python友情链接检查方法
2015/07/08 Python
Python Numpy计算各类距离的方法
2019/07/05 Python
Django--权限Permissions的例子
2019/08/28 Python
Python opencv相机标定实现原理及步骤详解
2020/04/09 Python
Python常用数据分析模块原理解析
2020/07/20 Python
利用Python发送邮件或发带附件的邮件
2020/11/12 Python
HTML5 localStorage使用总结
2017/02/22 HTML / CSS
土木工程毕业生自荐信
2013/09/21 职场文书
社区网格化管理实施方案
2014/03/21 职场文书
四年级评语大全
2014/04/21 职场文书
心灵捕手观后感
2015/06/02 职场文书
反邪教观后感
2015/06/11 职场文书
监护人证明
2015/06/19 职场文书
python中print格式化输出的问题
2021/04/16 Python
python 标准库原理与用法详解之os.path篇
2021/10/24 Python
Kubernetes部署实例并配置Deployment、网络映射、副本集
2022/04/01 Servers