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 相关文章推荐
15个款优秀的 jQuery 图片特效插件推荐
Nov 21 Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
Feb 16 Javascript
完美解决AJAX跨域问题
Nov 01 Javascript
深入理解JavaScript中的传值与传引用
Dec 09 Javascript
js浮点数精确计算(加、减、乘、除)
Dec 26 Javascript
jQuery中:not选择器用法实例
Dec 30 Javascript
javascript中clipboardData对象用法详解
May 13 Javascript
Javascript数组Array基础介绍
Mar 13 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
Feb 22 Javascript
javascript闭包功能与用法实例分析
Apr 06 Javascript
Mobile Web开发基础之四--处理手机设备的横竖屏问题
Aug 11 Javascript
浅谈webpack4.x 入门(一篇足矣)
Sep 05 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开启gzip页面压缩实例代码
2010/03/11 PHP
php 获取百度的热词数据的代码
2012/02/18 PHP
ThinkPHP3.1之D方法实例详解
2014/06/20 PHP
php中隐形字符65279(utf-8的BOM头)问题
2014/08/16 PHP
PHP实现向关联数组指定的Key之前插入元素的方法
2017/06/06 PHP
php设计模式之适配器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
30个最佳jQuery Lightbox效果插件分享
2011/04/11 Javascript
jquery $.ajax相关用法分享
2012/03/16 Javascript
详解JavaScript函数绑定
2013/08/18 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
2014/03/22 Javascript
JavaScript插件化开发教程 (一)
2015/01/27 Javascript
jQuery子属性过滤选择器用法分析
2015/02/10 Javascript
js判断手机号运营商的方法
2015/10/23 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
2016/06/21 Javascript
Extjs 点击复选框在表格中增加相关信息行
2016/07/12 Javascript
微信小程序 页面跳转事件绑定的实例详解
2017/09/20 Javascript
JS实现的简单表单验证功能示例
2017/10/13 Javascript
angularjs实现猜大小功能
2017/10/23 Javascript
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
2018/09/04 Javascript
4个顶级JavaScript高级文本编辑器
2018/10/10 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
2020/04/08 Javascript
[03:48]DOTA2完美大师赛主赛事第二日精彩集锦
2017/11/24 DOTA
[52:27]2018DOTA2亚洲邀请赛 3.31 小组赛B组 paiN vs Secret
2018/04/01 DOTA
介绍Python的@property装饰器的用法
2015/04/28 Python
python 通过手机号识别出对应的微信性别(实例代码)
2019/12/22 Python
Python基础之列表常见操作经典实例详解
2020/02/26 Python
Python3.7在anaconda里面使用IDLE编译器的步骤详解
2020/04/29 Python
python爬虫爬取淘宝商品比价(附淘宝反爬虫机制解决小办法)
2020/12/03 Python
使用html5 canvas创建太空游戏的示例
2014/05/08 HTML / CSS
庆元旦演讲稿
2014/09/15 职场文书
2015年网络舆情工作总结
2015/07/24 职场文书
《家》读后感:万惜拯救,冷暖自知
2019/09/25 职场文书
DjangoRestFramework 使用 simpleJWT 登陆认证完整记录
2021/06/22 Python
Mysql超详细讲解死锁问题的理解
2022/04/01 MySQL
分析MySQL优化 index merge 后引起的死锁
2022/04/19 MySQL
处理canvas绘制图片模糊问题
2022/05/11 Javascript