一个Promise.all的应用场景

故事是这样的
需要做一个排行页面
在这里插入图片描述

获取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发送请求怎么办呢

Promise

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/xiaozhazhazhazha/article/details/121766034