vue promise then多级嵌套

最新推荐文章于 2025-07-15 20:25:32 发布

lanyan1214

最新推荐文章于 2025-07-15 20:25:32 发布

阅读量7.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： javascript ui ViewUI

本文链接：https://blog.youkuaiyun.com/lanyan1214/article/details/84922389

Vue 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一个使用Promise处理多级嵌套请求的示例，涉及getFormNames、getFormDetails和getChildForms三个函数。getFormNames获取一个集合，然后在循环中使用getFormDetails获取每个条目的详细信息，再进一步使用getChildForms获取子表单的数据。最终，所有返回的结果被整合并返回一个新的响应对象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[size=medium][color=green][b]和上一篇类似的需求，

目前我有一个需求是：通过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运行
也可以直接下载附件[/b][/color][/size]