[Vue音乐项目] 第三节 JSONP跨越

jsonp获取数据

为保证应用里的音乐数据是实时的，可以通过抓取QQ音乐的数据达到同步的目的。但是，因为同源策略的限制，不可以直接ajax请求QQ音乐的数据，一个委婉点的方法是通过jsonp获取数据。

1. 在cmd命令行输入以下命令安装jsonp

   npm install jsonp --save-dev
   

2. 在src/common/js文件夹里，创建jsonp.js文件，敲写如下代码

   //jsonp.js   ps:直接使用jsonp也是可以的，在这里只是对jsonp做进一步的封装，以适应项目的需要
   
   //导入刚才安装好的jsonp
   import Ojsonp from 'jsonp'
   //导出下面封装好的jsonp
   export default function(url,data,option) {
       //替换之前直接拼接好参数的url，改为由url+参数再拼接成url
       url += (url.indexOf('?') < 0 ? '?' : '&') + encoded(data)
       //返回promise，便于调用
       return new Promise((resolve,reject)=>{
           Ojsonp(url,option,(err,data)=>{
               if(!err) {
                   resolve(data)
               } else {
                   reject(err)
               }
           })
       })
   }
   //把查询参数编码为url
   function encoded(data) {
       var url = ''
       for(let key in data) {
           let value = data[key] !== 'undefine' ? data[key] : ''
           url += `&${key} = ${encodeURIComponent(value)}`
       }
       return url
   }
   

3. 再src/api文件夹里，创建recommend.js及config.js文件，敲写如下代码

   //1. recommend.js
   
   //导入封装好的jsonp
   import jsonp from '../common/js/jsonp'
   //导入配置文件(把可复用参数写成配置，放在config.js里，方便以后修改及调用)
   import {commonParam,options} from './config'
   //导出获取推荐数据的函数
   export function getRecommend () {
       //获取数据的地址
       const url = 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg'
       //整合参数
       const data = Object.assign({},commonParam,{
           platform: 'h5',
           uin: 0,
           neddNewCode: 1
       })
       //返回promise
       return jsonp(url,data,options)
   }
   
   //2. config.js
   
   //公共查询参数
   export const commonParam = {
       g_tk: 5381,
       format: 'jsonp',
       inCharset: 'utf-8',
       outCharset: 'utf-8',
       notice: 0,
   }
   //公共配置选项
   export const option = {
       param: 'jsonpCallback'
   }
   //数据成功返回状态码
   export const ERR_OK = 0
   

4. 在scr/components/recommend/index.vue里，调用函数获取数据，敲写如下代码

   //index.vue
   <template>
       ...
   <template>
   <script>
       //导入函数
       import {getRecommend} from 'api/recommend'
       //导入配置
       import {ERR_OK} from 'api/config'
       export default {
           //在Vue创建完毕后的钩子里调用，获取数据
           created() {
               //生命周期钩子里尽量只写过程，把实现放到methods里，便于清晰理解
               this._getRecommend()
           }，
           methods: {
               //在这里编写的函数会被挂载到实例里，在这里处理请求之类的问题很方便
               _getRecommend() {
                   //promise处理比回调处理看起来更清晰
                   getRecommend().then((res)=>{
                       //配置里的ERR_OK在这里派上了用场，表示数据成功返回
                       if(res.code == ERR_OK) {
                           //这里只打印数据，下节对数据进行处理
                           console.log(res.data)
                       }
                   })
               }
           }
       }
   </script>
   <style>
       ...
   </style>