Get QQ Music JSON data---a lesson network Music app Learning

Mobile QQ Music Address: https://m.y.qq.com/. Crawl QQ Music Data

When I request the homepage, we have the following link, callback the JSONP

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

True 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 data that the browser can open

In memory, Jsonp.

JSONP is currently cross-domain (basically the tag with the SRC attribute is not subject to any access restrictions), and to dynamically generate a script tag can be requested using JSONP when Ajax cannot cross the domain

But it's not the same as Ajax. JSONP uses a URL link to send requests and invoke callback functions (Callblack) to use the data.

Use the github:https://github.com/webmodules/jsonp plug-in to customize a packaged Jsonp

Import Originjsonp from ' Jsonp 'Exportdefault functionjsonp (URL, data, option) {URL+ = (url.indexof ('? ') < 0? '? ': ' & ') +param (data)return NewPromise (Resolve, reject) ={originjsonp (URL, option, (Err, data)= {      if(!err) {Resolve (data)}Else{reject (Err)}}) })}//the URL represents a pure URL address//data is another parameter that is used to stitch to the URLExportfunctionparam (data) {Let URL= ' ' for(varKinchdata) {Let value= Data[k]!== undefined? Data[k]: "URL+ = ' &${k}=${encodeuricomponent (value)} '//ES6 Syntax  }  returnUrl? Url.substring (1): "}

Encapsulating requests for each component

Import Jsonp from ' Common/js/jsonp './config 'function  getrecommend () {  = ' HTTPS://C.Y.QQ.COM/MUSICHALL/FCGI-BIN/FCG_YQQHOMEPAGERECOMMEND.FCG '  = object.assign ({}, Commonparams, {    ' h5 ',    0,    1  })  return jsonp (URL, data, options)}

This URL is the real xhr address.

Get QQ Music JSON data---a lesson network Music app Learning