Vue使用Axios发起多个同步请求案例

下面是一个组件的完整代码 

前提是安装了axios库。npm install --sava axios 命令进行安装

如果代码太多看的不是太懂，后面有提炼和总结

<template>
  <div id="Music">

  </div>
</template>

<script>
  import axios from 'axios'
  import API from '../../../../ApiServerRedirect/ApiServer'

  export default {
    name: 'Music',
    data () {
      return {
        musicList: [],// 歌曲列表
      }
    },
    components: {
      Aplayer
    },
    methods: {
      // 毫秒转分钟
      ms2min (value) {
        var second = parseInt(value) / 1000       // second
        var minute = 0                            // minute
        if (second > 60) {
          minute = parseInt(second / 60)
          second = parseInt(second % 60)
        }
        var result
        // 获得秒的两位数
        if (second >= 10) {
          result = '' + parseInt(second)
        } else {
          result = '' + '0' + parseInt(second)
        }
        // 获取分钟的两位数
        if (minute >= 10) {
          result = '' + parseInt(minute) + ':' + result
        } else {
          result = '' + '0' + parseInt(minute) + ':' + result
        }
        return result
      },
      getArtists(arr){
        let Artists=''
        for (let i=0;i<arr.length;i++){
          if (i%2===1){
            Artists+='/'
          }
          Artists+=arr[i].name
        }
        return Artists
      },

      // 获取歌曲详情，pic的url
      getSongDetail (id) {
        //其中API.apiUrl的值是http://www.huashengshu.top:3000
        
        let music={}
        let sendArr=[
          axios.get(API.apiUrl+'/song/url?id='+id),// 获取音乐url链接
          axios.get(API.apiUrl+'/lyric?id='+id),// 获取歌词 lrc
          axios.get(API.apiUrl+'/song/detail?ids='+id),// 获取歌曲详情
        ]
        axios.all(sendArr).then(axios.spread((musicUrl,Lrc,Detail)=>{
          // console.log(musicUrl.data.data[0].url+'\n') //歌曲url
          // console.log(Lrc.data.lrc.lyric+'\n')        //歌词数据
          // console.log(Detail.data.songs[0].name)      //歌曲名称
          // console.log(this.ms2min(Detail.data.songs[0].dt))         //歌曲时间
          // console.log(Detail.data.songs[0].al.picUrl)         //歌曲图片url
          // console.log(this.getArtists(Detail.data.songs[0].ar))         //歌曲的演唱歌手
          let msc={
            id:id,
            src:musicUrl.data.data[0].url,
            title: Detail.data.songs[0].name,
            lrc:Lrc.data.lrc.lyric,
            artist: this.getArtists(Detail.data.songs[0].ar),
            pic:Detail.data.songs[0].al.picUrl
          }
          // console.log(msc)
          this.musicList.push(msc)
          // console.log(this.musicList)
          if (JSON.stringify(this.music) == '{}'){
            this.music=msc
          }
        }))
      },
    },
    mounted () {
      this.getSongDetail('1369798757')
    }
  }
</script>

使用axios的all方法 

关键代码讲解

axios.all方法发送3次请求，并且3次请求都成功后才执行then里面的内容

目的是请求服务器、获取返回的json数据下面是获取返回的json数据的一种方式，后面还有更精简的方式

getSongDetail (id) {
        let music={}
        let sendArr=[
          axios.get(API.apiUrl+'/song/url?id='+id),// 获取音乐url链接
          axios.get(API.apiUrl+'/lyric?id='+id),// 获取歌词 lrc
          axios.get(API.apiUrl+'/song/detail?ids='+id),// 获取歌曲详情
        ]
        axios.all(sendArr).then(axios.spread((musicUrl,Lrc,Detail)=>{
          // console.log(musicUrl.data.data[0].url+'\n') //歌曲url
          // console.log(Lrc.data.lrc.lyric+'\n')        //歌词数据
          // console.log(Detail.data.songs[0].name)      //歌曲名称
          // console.log(this.ms2min(Detail.data.songs[0].dt))         //歌曲时间
          // console.log(Detail.data.songs[0].al.picUrl)         //歌曲图片url
          // console.log(this.getArtists(Detail.data.songs[0].ar))         //歌曲的演唱歌手
          let msc={
            id:id,
            src:musicUrl.data.data[0].url,
            title: Detail.data.songs[0].name,
            lrc:Lrc.data.lrc.lyric,
            artist: this.getArtists(Detail.data.songs[0].ar),
            pic:Detail.data.songs[0].al.picUrl
          }
          // console.log(msc)
          this.musicList.push(msc)
          // console.log(this.musicList)
          if (JSON.stringify(this.music) == '{}'){
            this.music=msc
          }
        }))

最简单的方式

getSongDetail (id) {
        let music={}
        let sendArr=[
          axios.get(API.apiUrl+'/song/url?id='+id),// 获取音乐url链接
          axios.get(API.apiUrl+'/lyric?id='+id),// 获取歌词 lrc
          axios.get(API.apiUrl+'/song/detail?ids='+id),// 获取歌曲详情
        ]
        axios.all(sendArr).then(result=>{
            consle.log(result)//会返回3个对象，在控制台中显示
        }))

如下图的3个对象，包括了头文件，状态码等信息，可以通过result.data获取到真正的json对象