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>