js+axios请求接口获取数据后循环嵌套接口,Promise.all解决
接口数据循环、再嵌套接口、再循环数据,通过Promise链式调用,Promise.all在循环结束后再return,在里面new一个Promise,处理想要的数据,resolve一条数据。
·
接口{
data.map(school=>{
接口(school.id){
childrenData.map(student){
}
}
})
}
正常来讲是这样的结构,第一次请求接口获取数据列表,通过遍历获取每一条数据的ID,再通过ID获取详细的信息,也就是接口数据循环、再嵌套接口、再循环数据。
循环后接口请求异步执行,显示不出子数据。
测试数据结构:
data:[
{id:1, name:'A学校'},
{id:2, name:'B学校'},
{id:3, name:'C学校'},
],
//通过上面的id获取到的一条数据
childrenData:[
{id:1, name:'张三', sex:'male', age:18},
{id:2, name:'李四', sex:'female', age:18},
{id:3, name:'王五', sex:'male', age:18},
]
最终数据:
data:[
{
name:'A学校',
children:[
{id:1, name:'张三', sex:'male', age:18},
{id:2, name:'李四', sex:'female', age:18},
{id:3, name:'王五', sex:'male', age:18},
]
},
{
name:'B学校',
children:[
{id:1, name:'赵刘', sex:'male', age:18},
{id:2, name:'李四', sex:'female', age:18},
{id:3, name:'王五', sex:'male', age:18},
]
},
{
name:'C学校',
children:[
{id:1, name:'赵六', sex:'male', age:18},
{id:2, name:'李四', sex:'female', age:18},
{id:3, name:'王五', sex:'male', age:18},
]
},
]
假设axios已封装,通过Promise链式调用,Promise.all在循环结束后再return,在里面new一个Promise,处理想要的数据,resolve一条数据,Promise.all后会自动变成数组。
其中async和await的作用,等待接口请求结束再resolve数据,同步执行
new Promise((resolve,reject)=>{
return new Promise((resolve, reject)=>{
getSchools().then(res=>{
resolve(res.data)
})
}).then(schools=>{
return Promise.all(schools.map(school=>{
return new Promise(async (resolve,reject)=>{
let schoolItem = {
name: school.name
}
await getStudents(school.id).then(students=>{
schoolItem.students = []
students.map(student=>{
const temp = {
name:student.name,
age:student.age,
sex:student.sex
}
schoolItem.students.push(temp)
})
})
resolve(schoolItem)
})
}))
}).then(list=>{
resolve(list)
})
})
更多推荐
已为社区贡献1条内容
所有评论(0)