qq音乐获取歌曲源链接地址

1）目标链接地址

打开QQ音乐具体某首歌播放界面，打开控制台，监控网络请求：

image.png

在这个界面，有一个请求

image.png
双击之后，可以发现就会打开歌曲源链接。
image.png

此时，复制地址栏，可以得到我们的目标链接。

http://dl.stream.qqmusic.qq.com/C400003OUlho2HcRHC.m4a?vkey=DC0E4A4953F748735FF764718B1E312FBE69F079ABEEE16794323A417444D2F5A98BED314A30C913289DC3146864D45296DD5EBCBA46CAA2&guid=1819638027&uin=0&fromtag=66

2）分析链接构成：

http://dl.stream.qqmusic.qq.com/C400${音乐mid}.m4a？vkey=${vkey}&guid=1819638027&uin=0&fromtag=66
在这个连接中，包括以下参数：
固定参数：guid/uin/fromtag
变化参数：songmid/vkey
那么，这些参数哪里来呢？

3）参数来源

回到监控网络请求的地方，同时还会发现以下请求：

image.png

点击请求，点开Preview,会惊喜的发现，在这个请求回来的数据中，包含了vkey的值，再接着点开Headers,你会发现那些固定参数，都是需要在发送此请求时进行配置。

image.png
image.png

由此不难发现，现在要想动态获得这个链接地址，需要发送两个请求，关键是获取vkey。

4）代码操作

由于项目需要请求的数据非常多，所以配置了公共参数：

image.png

配置非公共参数（很多参数，我也不知道什么含义，所以保持跟网站参数一致就好了）：

image.png
此时，请注意，这里我并不是直接请求的，而是使用了后端代理，因为这里直接请求，是无法获取到的，所以在build/webpack.dev.conf中的devServer中进行如下配置：
image.png

在组件中进行调用

image.png
单独封装歌曲的song类
image.png
至此，运行成功！

5）走过的误区

第一个误区：
没有使用后端代理，之前一直使用jsonp请求数据，结果请求的数据回来了，code：0，但是vkey： fileter type wrong.一直很郁闷，后来想明白了，这是无法直接获取到的数据。

第二个误区：
在我获取到vkey的值之后，我直接继续在后面返回song类了，当时的代码如下图：

image.png

同时，在组件中的代码：

image.png
在这个过程中，我的vkey值，再到返回的song，全都可以取到，但是组件中，却无法获取到this.songs。console.log返回的总是undefined。
后来求教了一番女神，想明白了。
getMusic()处理的是异步请求，无法确定请求结果数据，何时完成，console.log不会去等请求结果，所以返回值总是undefined。