`

vue promise then多级嵌套

    博客分类:
  • Vue
 
阅读更多
和上一篇类似的需求,

目前我有一个需求是: 通过getFormNames得到了一个大集合A,在循环遍历A集合的每一条数据A1,A2。。。。以此类推,拿到A1作为参数,又会获得一个新集合,最终是把返回的结果拼装改造下返回一个新的response


function getForms(){
getFormNames().then(formNames => {
console.log('查询form')
return getFormDetails(formNames)
}).then(returnObj => {
console.log('查询form 明细')
return getChildForms(returnObj)
}).then(returnObj => {
console.log('查询子form')
console.log(returnObj)
return returnObj
})
}

function getFormNames(){
return new Promise((resolve, reject) => {
  setTimeout(resolve(['form1','form2']),2000)
  })
}

function getFormDetails(formNames){
return new Promise((resolve, reject) => {
let returnObj = { formConfig: formNames}
const promises = []
formNames.forEach((formName,index) => {
let promise = new Promise((resolve, reject) => {
setTimeout(resolve({fields:{a:1,b:2,c:3}}),2000)
})
promises.push(promise)
})
Promise.all(promises).then(formDetails => {
  const forms = []
  formDetails.forEach((formDetail) => {
  forms.push(formDetail)
  })
  returnObj.forms = forms
  resolve(returnObj)
})
})
}

function getChildForms(returnObj){
return new Promise((resolve, reject) => {
const promises = []
returnObj.forms.forEach((form,index) => {
let promise = new Promise((resolve, reject) => {
setTimeout(resolve({childFields:{a:1,b:2,c:3}}),2000)
})
promises.push(promise)
})
Promise.all(promises).then(childForms => {
  childForms.forEach((childForm,index) => {
  returnObj.forms[index].childFields = childForm
  })
  resolve(returnObj)
  })
  })
}

getForms();



这种写法结构比较清晰些  可以拷贝出去直接用作js运行
也可以直接下载附件
分享到:
评论

相关推荐

    多级嵌套选项卡_多级嵌套舌签Tabs

    在网页设计中,多级嵌套选项卡是一种常见的交互元素,用于组织大量信息并提供用户友好的导航体验。本文将详细解析"多级嵌套选项卡_多级嵌套舌签Tabs"的设计与实现,以及如何确保其在不同浏览器中的兼容性和可重用性...

    vue 多级嵌套示范

    在“vue 多级嵌套示范”中,我们探讨的是如何在Vue应用中处理多层嵌套的组件,这对于构建复杂且层次丰富的用户界面至关重要。在实际项目中,这种嵌套可能出现在表格、树形结构或自定义表单组件等场景。 动态表单...

    深入Vue-Router路由嵌套理解

    接着我继续追问…(省略)…大致明白了情况,原来这位朋友没有理解Vue-Router嵌套的原理,下面整理了一下我对Vue-Router路由嵌套的理解 Vue-Router嵌套路由 首先假设项目中有两个路由Profile和Posts,按写法把他们...

    vue-for循环嵌套操作示例

    在本篇文档中,我们主要学习了Vue.js框架中关于for循环嵌套操作的知识点。Vue.js是一套构建用户界面的渐进式JavaScript框架,其核心库只关注视图层,易于上手,同时也能够与其它库或已有项目整合。在文档中,我们...

    vue动态路由实现多级嵌套面包屑的思路与方法

    在Vue.js应用中,动态路由和面包屑导航是常见的需求,尤其在构建多级嵌套的Web应用时。本文将详细介绍如何使用Vue Router实现动态路由并构建多级嵌套的面包屑导航。首先,让我们理解动态路由的概念。动态路由允许...

    在vue中实现嵌套页面(iframe)

    在Vue.js中实现嵌套页面通常涉及到使用`iframe`元素来加载外部网页或者内部组件。`iframe`允许我们在一个Vue应用中嵌入另一个独立的HTML文档,这对于展示第三方内容、实现某些特定功能或者处理复杂交互场景时非常...

    vue 原生 tree 多级树

    vue 原生 tree 多级树

    vuemethodspromise使vue方法支持promise

    `vue-methods-promise` 的核心理念是将传统的 Vue 方法转换为返回一个 Promise 对象,这样我们就可以利用 Promise 的链式调用来组织异步代码,使其更易于理解和管理。这个库通过简单的装饰器或插件机制,将 Vue 的 ...

    vue2.0使用v-for循环制作多级嵌套菜单栏

    使用v-for循环生成一个多级嵌套菜单栏,只要你学会了这个方法,几乎所有的菜单栏都可以实现了。 方法 <div class=level-one v-if=obj.level v-for=obj><a>{{obj.title}} ...

    Vue三层嵌套路由的示例代码

    Vue 三层嵌套路由的示例代码 本篇文章主要介绍了 Vue 三层嵌套路由的示例代码,通过这个示例代码,我们可以学习如何在 Vue 中实现三层嵌套路由。下面,我们将逐步讲解这个示例代码的各个部分。 首先,我们需要了解...

    vue多级复杂列表展开/折叠及全选/分组全选实现

    在学习和实现Vue多级复杂列表的展开/折叠及全选/分组全选功能时,我们需要关注一些关键技术和实现方法。首先,我们要了解如何构建数据结构,这是展示列表的基础。然后,我们需要掌握如何通过数据驱动的方式初始化...

    Vue单文件组件嵌套的方法及示例

    ### Vue单文件组件嵌套的方法及示例 #### 一、引言 随着前端技术的发展,Vue.js 成为了构建用户界面的一种流行选择。Vue 的一大特色是它的单文件组件(Single File Component,简称 SFC)。单文件组件允许开发者将...

    vue-router:嵌套路由的使用方法

    我们已经学习过了Vue模板的另外定义形式,使用<template></template>。 <!-- 模板抽离出来 --> 首页 新闻 然后js里定义路由组件的时候: // 1. 定义(路由)组件。 const Home = { template: ...

    Vue Promise包装器组件-JavaScript开发

    vue-prom Vue Promise包装器组件关于此组件的目标是简化基于Promise状态(待定/已实现,已拒绝)的呈现逻辑。 该组件跟踪Promise的状态和propo vue-prom Vue Promise包装器组件关于该组件的目标是简化基于Promise...

    基于vue-router 多级路由redirect 重定向的问题

    本文将详细介绍在使用 vue-router 实现多级路由的重定向时可能会遇到的问题以及解决方案。 首先,让我们了解一些基础知识。在 vue-router 中,重定向是将指定路由映射到另一个路径的过程。重定向可以是动态的,也...

    Vue路由(+嵌套路由)入门源码.zip

    Vue.js 路由允许我们通过不同的 URL 访问不同的内容。 通过 Vue.js 可以实现多视图的单页Web应用(single page web application,SPA)。 Vue.js 路由需要载入 vue-router 库。

    vue父子组件的嵌套的示例代码

    本文介绍了vue父子组件的嵌套的示例代码,分享给大家,具体如下: 组件的注册: 先创建一个构造器 var myComponent = Vue.extend({ template: '...' }) 用Vue.component注册,将构造器用作组件(例为全局组件) ...

Global site tag (gtag.js) - Google Analytics