1）目標(biāo)鏈接地址
打開QQ音樂(lè)具體某首歌播放界面，打開控制臺(tái)，監(jiān)控網(wǎng)絡(luò)請(qǐng)求：
在這個(gè)界面，有一個(gè)請(qǐng)求
雙擊之后，可以發(fā)現(xiàn)就會(huì)打開歌曲源鏈接。
此時(shí)，復(fù)制地址欄，可以得到我們的目標(biāo)鏈接。
http://dl.stream.qqmusic.qq.com/C400003OUlho2HcRHC.m4a?vkey=DC0E4A4953F748735FF764718B1E312FBE69F079ABEEE16794323A417444D2F5A98BED314A30C913289DC3146864D45296DD5EBCBA46CAA2&guid=1819638027&uin=0&fromtag=66
2）分析鏈接構(gòu)成：
http://dl.stream.qqmusic.qq.com/C400${音樂(lè)mid}.m4a？vkey=${vkey}&guid=1819638027&uin=0&fromtag=66
在這個(gè)連接中，包括以下參數(shù)：
固定參數(shù)：guid/uin/fromtag
變化參數(shù)：songmid/vkey
那么，這些參數(shù)哪里來(lái)呢？
3）參數(shù)來(lái)源
回到監(jiān)控網(wǎng)絡(luò)請(qǐng)求的地方，同時(shí)還會(huì)發(fā)現(xiàn)以下請(qǐng)求：
點(diǎn)擊請(qǐng)求，點(diǎn)開Preview,會(huì)驚喜的發(fā)現(xiàn)，在這個(gè)請(qǐng)求回來(lái)的數(shù)據(jù)中，包含了vkey的值，再接著點(diǎn)開Headers,你會(huì)發(fā)現(xiàn)那些固定參數(shù)，都是需要在發(fā)送此請(qǐng)求時(shí)進(jìn)行配置。
由此不難發(fā)現(xiàn)，現(xiàn)在要想動(dòng)態(tài)獲得這個(gè)鏈接地址，需要發(fā)送兩個(gè)請(qǐng)求，關(guān)鍵是獲取vkey。
4）代碼操作
由于項(xiàng)目需要請(qǐng)求的數(shù)據(jù)非常多，所以配置了公共參數(shù)：
配置非公共參數(shù)（很多參數(shù)，我也不知道什么含義，所以保持跟網(wǎng)站參數(shù)一致就好了）：
此時(shí)，請(qǐng)注意，這里我并不是直接請(qǐng)求的，而是使用了后端代理，因?yàn)檫@里直接請(qǐng)求，是無(wú)法獲取到的，所以在build/webpack.dev.conf中的devServer中進(jìn)行如下配置：
在組件中進(jìn)行調(diào)用
單獨(dú)封裝歌曲的song類
至此，運(yùn)行成功！
5）走過(guò)的誤區(qū)
第一個(gè)誤區(qū)：
沒有使用后端代理，之前一直使用jsonp請(qǐng)求數(shù)據(jù)，結(jié)果請(qǐng)求的數(shù)據(jù)回來(lái)了，code：0，但是vkey： fileter type wrong.一直很郁悶，后來(lái)想明白了，這是無(wú)法直接獲取到的數(shù)據(jù)。
第二個(gè)誤區(qū)：
在我獲取到vkey的值之后，我直接繼續(xù)在后面返回song類了，當(dāng)時(shí)的代碼如下圖：
同時(shí)，在組件中的代碼：
在這個(gè)過(guò)程中，我的vkey值，再到返回的song，全都可以取到，但是組件中，卻無(wú)法獲取到this.songs。console.log返回的總是undefined。
后來(lái)求教了一番女神，想明白了。
getMusic()處理的是異步請(qǐng)求，無(wú)法確定請(qǐng)求結(jié)果數(shù)據(jù)，何時(shí)完成，console.log不會(huì)去等請(qǐng)求結(jié)果，所以返回值總是undefined。
