移动端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学习的更多相关文章

  1. Jquery Ajax和getJSON获取后台普通Json数据和层级Json数据解析

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. JSONProxy - 获取跨域json数据工具

    JSONProxy是一款很好的获取json数据的代理网站,“Enables cross-domain requests to any JSON API”.当你苦于无法跨域获取json数据时,不妨一试, ...

  3. 获取 request 中 json 数据

    import java.io.IOException; import javax.servlet.http.HttpServletRequest; /** * request 对象的相关操作 * @a ...

  4. android 获取http请求json数据

    package com.my.gethttpjsondata; import java.io.BufferedReader;import java.io.ByteArrayOutputStream;i ...

  5. Ajax在静态页面中向指定url发送json请求获取返回的json数据

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  6. jQuery AJAX获取JSON数据解析多种方式示例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. pyhton 从web获取json数据 保存到本地然后再读取

    从web中获取json数据直接进行处理总认为太慢.主要是从web中获取获取数据的过程有点慢. 所以就在想 假设先利用空暇时间把json数据获取并保存到本地,然后再从本地文件里读取和操作.应该就要快非常 ...

  8. jquery zTree插件 json 数据详解

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 关于jqGrig如何写自定义格式化函数将JSON数据的字符串转换为表格各个列的值

    首先介绍一下jqGrid是一个jQuery的一个表格框架,现在有一个需求就是将数据库表的数据拿出来显示出来,分别有id,name,details三个字段,其中难点就是details字段,它的数据是这样 ...

随机推荐

  1. Spring-data-jpa 笔记(二) Repository 详解

    基础的 Repository 提供了最基本的数据访问功能,其几个子接口则扩展了一些功能.它们的继承关系如下: Repository: 是 spring Data 的一个核心接口,它不提供任何方法,开发 ...

  2. js事件捕获和冒泡解析

    <div id="box"> <div id="box2"> <p id="test">test< ...

  3. 你不知道的JavaScript--Item34 大白话解说Promise

    去年6月份. ES2015正式公布(也就是ES6.ES6是它的乳名),当中Promise被列为正式规范.作为ES6中最重要的特性之中的一个,我们有必要掌握并理解透彻.本文将由浅到深,解说Promise ...

  4. 一致性哈希server的数据维护

    本文是实例说明一致性哈希server的数据维护用途. 理论说明參考:http://blog.csdn.net/chenjiayi_yun/article/details/41624603 例如以下图所 ...

  5. android开发艺术探索学习 之 结合Activity的生命周期了解Activity的LaunchMode

    转载请标明出处: http://blog.csdn.net/lxk_1993/article/details/50749728 本文出自:[lxk_1993的博客]: 首先还是先介绍下Activity ...

  6. 深入struts2(二) ---stuts2长处和主要包、类功能

    1.1     Struts2 上节已讲.struts2在webwork基础发展起来的mvc框架.MVC框架相信一般码农都比較了解,这里不再重说. 在这里只对于一下struts1,struts2做了哪 ...

  7. [Unity 设计模式]IOC依赖倒置

    1.前言 最近在看<游戏开发与设计模式>一书,看到控制反转设计模式,作者说:上层模块不应该依赖于下层模块,上层模块和下层模块都应该依赖于接口,这样能减少耦合.然后附带举了个例子,我觉得特别 ...

  8. vim g 和 % 区别

    vim中的g(global)和%的区别: g:全局的 s/pattern/replacement/  : 替换行中出现的每一个pattern g/pattern/s/pattern/replaceme ...

  9. document.getElementById方法在火狐和谷歌浏览器兼容

    转自:http://www.office68.com/computer/6505.html 对于前台设计,浏览不兼容是一个很头晕的事情,为此记录下来与大家分享,并供日后自己参考. 例:有一个名为pwd ...

  10. bzoj 5127 数据校验

    题目大意: 一个数列a 对于 a 的一个区间 [l, r],若对于该区间 [l, r] 内的任意一个非空连续子区间,该子区间内出现过的数值在整数上值域连续,则称 [l, r]为合法区间 m次询问  每 ...