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

next 只能調用一次，這邊可以用 Promise.all 解決，等待兩個異步操作都返回結果後再 next:

beforeRouteEnter (to, from, next) {
 // Promise.all 會等到數組內的 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 => {
  // 執行結果會按照上面順序放在 result 數組內，所以 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等两个接口都返回结果再执行下一步的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue mounted 调用两次的完美解决办法

    在开发中发现其中一个页面moutned调用了两次,而其他页面正常,表示很懵逼,然后查找原因,终于找到了,其实归根到底是要知道mounted的调用机制问题: 情况:在这个页面中出现了mounted 加载了两次的情况: 方法:排除法 首先把 this.$store.commit() 方法注释掉,发现就好了,只加载一次 初步判断是commit  方法导致的 二  验证判断是否正确,不使用commit 方法,该用直接改变变量状态的方法,发现又加载了两次: 再次判断,不是由于commit引起的 三   猜

  • VUE UPLOAD 通过ACTION返回上传结果操作

    通过Upload 的action方法 返回不了结果,可以通过on-success方法中获取返回结果 <Upload accept=".xls, .xlsx" :action="uploadUrl" :on-success="onSuccess" :on-error="handleError" :before-upload="beforeUpload" style="float:right&q

  • 解决vue请求接口第一次成功,第二次失败问题

    使用vue去请求接口发现问题来了: 我请求只能请求一次,然后在按按钮去请求的时候发现 502(这个是接口定义的)502就是传了空的值过来 这个是其中一种情况,还有别的情况 你看了 大可试试我这样的办法 然后发现我前端代码没有问题,接口代码也没有问题 data() { return { form: { old_password: '', new_password: '', confirm_password: '' } } }, 就是把值在重新赋值回去就可以解决了 this.$http.post('

  • 详解vue配置后台接口方式

    详解vue配置后台接口方式

    在vueAdmin项目中有两种方式配置后端接口的方式,在此做下记录 第一种(代理方式) 在工程目录下 > config > index.js - 修改为如下配置 proxyTable: { '/api': { target: 'http://127.0.0.1:8000', pathRewrite: { '^/api': '' } } }, 在工程目录下 > src > api > user.js - 接口写法 import axios from 'axios' export

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

    next 只能調用一次,這邊可以用 Promise.all 解決,等待兩個異步操作都返回結果後再 next: beforeRouteEnter (to, from, next) { // Promise.all 會等到數組內的 Promise 都 resolve 後才會繼續跑(then) Promise.all([ main._base({ methodName: 'QueryProductInfo', productId: to.params.id }), main._base({ metho

  • vue项目接口管理,所有接口都在apis文件夹中统一管理操作

    在vue开发中,会涉及到很多接口的处理,当项目足够大时,就需要定义规范统一的接口,如何定义呢? 方法可能不只一种,本文使用axios+async/await进行接口的统一管理 本文使用vue-cli生成的项目举例 使用接口管理之前 在项目的某个具体组件中调接口,把调用接口的方法直接写在mounted中,或在是methods中 比如: xxx.vue <template> <div id="areaTree"> <!-- 标题 --> <div

  • Vue+axios实现统一接口管理的方法

    通过axios请求接口已经很简单了,但最近在做一个vue项目,想着把axios请求再封装一下,这样api就可以只在一处配置成方法,在使用的时候直接调用这个方法. 但咱们不用每个接口都定义成一个啰嗦的axios请求方法,既然是想简单点,就尽量只在一处完成简单的配置. 1.配置api接口 将同一模块的接口放在一个文件下,比如我在src的services下定义了一个global.js作为全局服务的配置,在它里面配置的api可以作为这个服务的方法. 比如: name字段将作为之后被调用的方法名,但这个只

  • vue 调用 RESTful风格接口操作

    首先是简单的java接口代码 写了四个让前端请求的接口,以下为代码 @GetMapping("/v1/user/{username}/{password}") public Result login2(@PathVariable("username") String username, @PathVariable("password") String password){ return Result.succResult(200,username

  • 如何在Vue项目中添加接口监听遮罩

    一.业务背景 使用遮罩层来屏蔽用户的非正常操作,是前端经常使用的方式.但是在一些项目中,并没有对遮罩层进行统一管理,这就会造成如下的问题: (1)所有的业务组件都要引入遮罩层组件,也就是每个.vue业务组件,都在template中引入了Mask组件.组件在项目的各个角落都存在,不利于管理,代码极度冗余. (2)Mask组件都分散到业务的各个角落,所以控制是否显示遮罩层的变量也散在业务组件中.比如使用maskShow来控制是否展示遮罩层时,一个较为复杂的项目中会产生200+的maskShow变量.

  • vue中对接Graphql接口的实现示例

    vue中对接Graphql接口的实现示例

    说明: 本文是本人正在搞nestjs+graphql+serverless训练营中对Graphql讲解的基础知识点,可能有点前后没对接上,文中提到的Graphql授权也是下小节介绍的 一.对原来的Express返回Graphql项目修改 本章节使用的代码是express返回Graphql的代码,在使用前要先对代码进行基本的配置,比如处理跨域问题(Graphql本质也是发送一个http请求,既然是这样在vue项目中自然存在跨域的问题,需要先处理) 1.安装跨域的包,并且配置中间件 npm inst

  • Vue实现两种路由权限控制方式

    目录 方式一:路由元信息(meta) 方式二:动态生成路由表(addRoutes) 路由权限控制常用于后台管理系统中,对不同业务人员能够访问的页面进行一个权限的限制. 对于无权限的页面可以跳转404页面或者提示无权限. 方式一:路由元信息(meta) 把所有页面都放在路由表中,只需要在访问的时候判断一下角色权限即可. vue-router 在构建路由时提供了元信息 meta 配置接口,我们可以在元信息中添加路由对应的权限,然后在路由守卫中检查相关权限,控制其路由跳转. 在 meta 属性里,将能

  • laravel 错误处理,接口错误返回json代码

    Laravel 默认已经为我们配置好了错误和异常处理,我们在 App\Exceptions\Handler 类中触发异常并将响应返回给用户. 所有异常都由类App\Exceptions\Handler处理,该类包含两个方法:report和render report方法只是将异常传递给异常被记录的基类,我们这里主要是针对 render 的修改: 先看代码: public function render($request, Exception $exception) { if($request->i

  • 如何在Vue中抽离接口配置文件

    Vue中抽离接口配置文件的问题及解决方法 问题背景 在通常开发中,我们经常把接口配置文件写在src目录里, 虽然有了一些方便,但也引发出一个新的问题,就是每次接都要重新编译. 解决方法 如果是cli2在static文件夹下创建XXX.js文件 如果是cli3在public文件夹下创建XXX.js文件 这两个文件夹下的内容将会原封不动地打包都dist里 在XXX.js下代码,定义全局变量,这样我们便能在任何地方使用 window.$4002API = { URL:'http://baidu.com

  • Feign接口方法返回值设置方式

    Feign接口方法返回值设置方式

    一.介绍 随着微服务的广泛应用,越来越多的企业都会使用微服务进行项目开发,在各个服务之间需要通过feign来进行通信,所以在feign调用接口中方法会接受其他服务接口不同类型返回值. 二.返回值设置 1.依据被调用服务接口设置相同返回类型 介绍:微服务A接口getUser 返回List<User>类型,微服务B通过feign调用方法也返回相同的结果类型. 特点:返回类型一一对应,在调用时不需要进行转化直接拿来就可以用. 缺点:扩展性不好,维护性不加. 解释:在目前springboot开发中,接

随机推荐