故事是这样的
需要做一个排行页面
获取TopLisr的接口是这个 http://47.103.29.206:3000/toplist/detail
这里进行了处理,让它返回我需要的数据
我这里是这样写的
app.use('/getTopList',(req,res)=>{
const url = musicBaseUrl+"/toplist/detail"
axios.get(url).then((response) => {
const list = response.data.list
let filteredList = []
list.forEach((item) => {
filteredList.push({
name: item.name,
id: item.id,
coverImgUrl: item.coverImgUrl,
songList: item.tracks.map((songItem) => {
return {
songName: songItem.first,
singerName: songItem.second
}
})
})
})
res.json({
result: {
filteredList
}
})
})
})
这时候我发现返回的数据里面后面的歌曲列表没有数据
那怎么办呢, 后来我想循环遍历filteredList,判断songList.length,如果没有长度,再请求这个接口
http://47.103.29.206:3000/playlist/detail?id=19723756
这个接口可以获取歌单的歌曲,
对这个接口进行处理
app.get('/getAlbum', (req, res) => {
// 专辑id
// console.log(req.query)
const params = req.query
const url = `${
musicBaseUrl}/playlist/detail`
axios.get(url, {
params,
headers: {
cookie: cookie }
}).then((response) => {
// console.log("res:", response)
let songList = response.data.playlist.tracks
songList = handleSongList(songList)
res.json({
result: songList
})
})
})
function handleSongList(list) {
const songList = []
// console.log("list.length", list.length)
list.forEach((item) => {
const singer = mergeSinger(item.ar)
const id = item.id
const name = item.name
const url = ''
const pic = item.al.picUrl
const album = item.al.name
const alId = item.al.id
const songItem = {
singer,
id,
name,
url,
pic,
album,
alId
}
// console.log("songitem", songItem)
songList.push(songItem)
})
return songList
}
function mergeSinger(singer) {
if (singer.length === 0 || !singer) {
return
}
const singerMerge = []
singer.forEach((item) => {
singerMerge.push(item.name)
})
return singerMerge.join('/')
}
返回的数据
然后
但是还是songList里面还是空的
这是为什么,因为请求接口是异步请求,res.json返回的时候还没有返回数据,但是放到.then里面不符合需求
解决:
前面在这里就应该做一层判断了 判断tracks里数组的长度,如果为0就向下一个接口做请求
但是如果我不想改前面第一步的代码,就是想请求第一个接口拿到filteredItem 然后根据filteredItem里面的songList的长度来向getAlbum发送请求怎么办呢