vue使用jsonp抓取qq音乐数据的方法


Posted in Javascript onJune 21, 2018

1、安装jsonp

npm install jsonp

2、创建jsonp.js文件,内容如下:

import originJSONP from 'jsonp'
/** * 封装jsonp
 * @param {*} url 原始的jsonp第一个参数是url,第二个参数是option,这里为了比较好写参数做了下封装
 * @param {obj} data 参数
 * @param {*} option jsonp的option
 */
export default function jsonp (url, data, option) {
 // 如果url没有?就加一个?拼接
 url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)
 return new Promise((resolve, reject) => {
  // 原始jsonp的三个参数,url、option、回调函数
  originJSONP(url, option, (err, data) => {
   // 类似node的设计,如果err是null,表示成功,data是后端返回的数据
   if (!err) {
    resolve(data)
   } else {
    reject(err)
   }
  })
 })
}
export function param (data) {
 let url = ''
 for (var k in data) {
  let value = data[k] !== undefined ? data[k] : ''
  url += '&' + k + '=' + encodeURIComponent(value)
 }
 return url ? url.substring(1) : ''
}

3、创建confiig.js文件,内容如下:

// 用于存放公共数据
export const commonParams = {
 g_tk: 5381,
 format: 'json',
 inCharset: 'utf - 8',
 outCharset: 'utf - 8',
 notice: 0
}
export const options = {
 param: 'jsonpCallback'
}
export const ERR_OK = 0

3、创建recommend.js文件,内容如下:

import jsonp from './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
 })
 // 这里返回一个promise对象
 return jsonp(url, data, options)
}

4、在组件中使用,如musicHall.vue中

<script>
import {getRecommend} from '../api/recommend.js'
import {ERR_OK} from '../api/config.js'
export default {
 mounted () {
  //在created中也可
  this._getRecommend()
 },
 methods: {
  _getRecommend () {
   getRecommend().then((res) => {
    if (res.code === ERR_OK) {
     console.log(res.data.slider)
    }
   })
  }
 }
}
</script>

5、总结

  • Object.assign方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)
  • Object.assign(target, source1, source2)
  • encodeURIComponent(URIstring)函数可把字符串作为 URI 组件进行编码。 URIstring 必需。一个字符串,含有 URI 组件或其他要编码的文本。
  • substring()方法用于提取字符串中介于两个指定下标之间的字符。
  • stringObject.substring(start,stop)包括 start 处的字符,但不包括 stop 处的字符。不接受负的参数。

总结

以上所述是小编给大家介绍的vue使用jsonp抓取qq音乐数据的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS实现商品倒计时实现代码
May 03 Javascript
无缝滚动js代码通俗易懂(自写)
Jun 19 Javascript
js获得地址栏?问号后参数的方法
Aug 08 Javascript
jquery prop的使用介绍及与attr的区别
Dec 19 Javascript
Javascript实现Web颜色值转换
Feb 05 Javascript
javascript实现完美拖拽效果
May 06 Javascript
基于jQuery实现在线选座之高铁版
Aug 24 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
Jan 04 Javascript
jQuery改变form表单的action,并进行提交的实现代码
May 25 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
Nov 30 Javascript
Vue2.0+ElementUI实现表格翻页的实例
Oct 23 Javascript
VueJS 组件参数名命名与组件属性转化问题
Dec 03 Javascript
Vue 获取数组键名的方法
Jun 21 #Javascript
Taro集成Redux快速上手的方法示例
Jun 21 #Javascript
vue2.0项目实现路由跳转的方法详解
Jun 21 #Javascript
JS实现快递单打印功能【推荐】
Jun 21 #Javascript
详解javascript中的babel到底是什么
Jun 21 #Javascript
webpack打包react项目的实现方法
Jun 21 #Javascript
Vue Router的懒加载路径的解决方法
Jun 21 #Javascript
You might like
可快速识别放射性物质-国外大神教你diy一个开放式辐射探测器
2020/03/12 无线电
基于PHP字符串的比较函数strcmp()与strcasecmp()的使用详解
2013/05/15 PHP
浅析PHP原理之变量(Variables inside PHP)
2013/08/09 PHP
CodeIgniter视图使用注意事项
2016/01/20 PHP
Laravel 实现关系模型取出需要的字段
2019/10/10 PHP
Aster vs Newbee BO3 第二场2.18
2021/03/10 DOTA
caller和callee的区别介绍及演示结果
2013/03/10 Javascript
js实现网页标题栏闪烁提示效果实例分析
2014/11/20 Javascript
JavaScript删除指定子元素代码实例
2015/01/13 Javascript
原生js结合html5制作简易的双色子游戏
2015/03/30 Javascript
jquery衣服颜色选取插件效果代码分享
2015/08/28 Javascript
Javascript刷新窗口方法小结
2015/10/21 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
2020/12/24 Javascript
Bootstrap页面标题Page Header的实现方法
2017/03/22 Javascript
关于JavaScript中forEach和each用法浅析
2017/07/27 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
2019/02/18 Javascript
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
2019/08/17 Javascript
VUE路由动态加载实例代码讲解
2019/08/26 Javascript
nodejs的安装使用与npm的介绍
2019/09/11 NodeJs
微信小程序如何播放腾讯视频的实现
2019/09/20 Javascript
vue video和vue-video-player实现视频铺满教程
2020/10/30 Javascript
js回到页面指定位置的三种方式
2020/12/17 Javascript
python 随机数生成的代码的详细分析
2011/05/15 Python
Numpy中stack(),hstack(),vstack()函数用法介绍及实例
2018/01/09 Python
python跳出双层for循环的解决方法
2019/06/24 Python
Django model update的多种用法介绍
2020/03/28 Python
Python的Django框架实现数据库查询(不返回QuerySet的方法)
2020/05/19 Python
纯CSS3制作的鼠标悬停时边框旋转
2017/01/03 HTML / CSS
纽约通行卡:The New York Pass(免费游览纽约90多个景点)
2017/07/29 全球购物
波兰灯具、照明和LED购物网站:Lampy.pl
2019/03/11 全球购物
Camper鞋西班牙官方网上商店:西班牙马略卡岛的鞋类品牌
2019/03/14 全球购物
财务部岗位职责
2013/11/19 职场文书
党员“四风”方面存在问题及整改措施
2014/09/24 职场文书
节约用电倡议书
2015/04/28 职场文书
单位更名证明
2015/06/18 职场文书
2016大学生诚信考试承诺书
2016/03/25 职场文书