擷取qq音樂json資料---某課網音樂app學習

標籤：音樂   function   文法   exp   span   參數   ret   限制   cal   

移動端qq音樂地址：https://m.y.qq.com/ .抓取QQ音樂資料 

請求首頁時，有如下連結，回調了jsonp

https://c.y.qq.com/splcloud/fcgi-bin/p.fcg?g_tk=1847183166&format=jsonp&jsonpCallback=jsonp1

真正xhr：

https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg?g_tk=1847183166&uin=1163898403&format=json&inCharset=utf-8&outCharset=utf-8&notice=0&platform=h5&needNewCode=1&_=1536239792110

瀏覽器可以開啟的json資料

 

在記憶一下jsonp

jsonp是目前可以跨域的（基本上標籤帶有src屬性的都是可以不受任何訪問限制），且要動態產生script標籤在ajax無法跨域的情況下可以使用jsonp進行請求

但它跟ajax是不一樣的..jsonp利用url連結進行請求發送和調用回呼函數（callblack）使用資料。

使用了 github：https://github.com/webmodules/jsonp 的外掛程式，自訂一個封裝的jsonp

import originJsonp from ‘jsonp‘export default function jsonp(url, data, option) {  url += (url.indexOf(‘?‘) < 0 ? ‘?‘ : ‘&‘) + param(data)  return new Promise((resolve, reject) => {    originJsonp(url, option, (err, data) => {      if (!err) {        resolve(data)      } else {        reject(err)      }    })  })}//url代表一個純淨的url地址//data是其他參數，用於拼接到url上  export function param(data) {  let url = ‘‘  for (var k in data) {    let value = data[k] !== undefined ? data[k] : ‘‘    url += `&${k}=${encodeURIComponent(value)}`     //es6文法  }  return url ? url.substring(1) : ‘‘}

對每個組件封裝請求

import jsonp from ‘common/js/jsonp‘import {commonParams, options} from ‘./config‘export function getRecommend() {  const url = ‘https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg‘  const data = Object.assign({}, commonParams, {    platform: ‘h5‘,    uin: 0,    needNewCode: 1  })  return jsonp(url, data, options)}

這個url是真正xhr的地址

擷取qq音樂json資料---某課網音樂app學習