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 相关文章推荐
javascript 动态添加表格行
Jun 22 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
Jun 24 Javascript
javascript计算星座属相(十二生肖属相)示例代码
Jan 09 Javascript
Javascript中的关键字和保留字整理
Oct 16 Javascript
jquery插件ajaxupload实现文件上传操作
Dec 09 Javascript
JavaScript模块化开发之SeaJS
Dec 13 Javascript
AngularJS控制器controller正确的通信的方法
Jan 25 Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
May 30 Javascript
node实现基于token的身份验证
Apr 09 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
Mar 20 Javascript
微信小程序 wxParse插件显示视频问题
Sep 27 Javascript
Js实现复选框的全选、全不选反选功能代码实例
Feb 28 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
PHP与MySQL开发中页面出现乱码的一种解决方法
2007/07/29 PHP
php 文件上传系统手记
2009/10/26 PHP
学习使用curl采集curl使用方法
2012/01/11 PHP
php强制更新图片缓存的方法
2015/02/11 PHP
PHP多线程编程之管道通信实例分析
2015/03/07 PHP
JScript 脚本实现文件下载 一般用于下载木马
2009/10/29 Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
2013/03/04 Javascript
Jquery网页出现的乱码问题的三种解决方法
2013/06/30 Javascript
动态更新highcharts数据的实现方法
2016/05/28 Javascript
JavaScript中日常收集常见的10种错误(推荐)
2017/01/08 Javascript
webpack学习--webpack经典7分钟入门教程
2017/06/28 Javascript
详解处理bootstrap4不支持远程静态框问题
2018/07/20 Javascript
代码分析vue中如何配置less
2018/09/28 Javascript
socket io与vue-cli的结合使用的示例代码
2018/11/01 Javascript
利用Vue构造器创建Form组件的通用解决方法
2018/12/03 Javascript
微信小程序实现日历效果
2018/12/28 Javascript
每天学点Vue源码之vm.$mount挂载函数
2019/03/11 Javascript
vue cli4下环境变量和模式示例详解
2020/04/09 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
2020/07/14 jQuery
vue 解决setTimeOut和setInterval函数无效报错的问题
2020/07/30 Javascript
[19:26]TNC vs EG (BO3)
2018/06/07 DOTA
解决Matplotlib图表不能在Pycharm中显示的问题
2018/05/24 Python
python仿evething的文件搜索器实例代码
2019/05/13 Python
用Python画一个LinkinPark的logo代码实例
2019/09/10 Python
python实现提取str字符串/json中多级目录下的某个值
2020/02/27 Python
Python3 pywin32模块安装的详细步骤
2020/05/26 Python
使用Python绘制台风轨迹图的示例代码
2020/09/21 Python
详解python os.path.exists判断文件或文件夹是否存在
2020/11/16 Python
html5教程调用绘图api画简单的圆形代码分享
2013/12/04 HTML / CSS
DNA基因检测和分析:23andMe
2019/05/01 全球购物
大学辅导员事迹材料
2014/02/05 职场文书
党员贯彻十八大精神思想汇报范文
2014/10/25 职场文书
毕业生党员个人总结
2015/02/14 职场文书
财务工作个人总结
2015/02/27 职场文书
检讨书格式
2015/05/07 职场文书
JPA 通过Specification如何实现复杂查询
2021/11/23 Java/Android