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 28 Javascript
PageSwitch插件实现100种不同图片切换效果
Jul 28 Javascript
深入理解js中的加载事件
Feb 08 Javascript
Angular 开发学习之Angular CLI的安装使用
Dec 31 Javascript
layui radio性别单选框赋值方法
Aug 15 Javascript
JavaScript错误处理操作实例详解
Jan 04 Javascript
Layui选项卡制作历史浏览记录的方法
Sep 28 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
Oct 30 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
Vue实现Layui的集成方法步骤
Apr 10 Javascript
vue制作toast组件npm包示例代码
Oct 29 Javascript
javascript条件式访问属性和箭头函数介绍
Nov 17 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+APACHE实现用户论证的方法
2006/10/09 PHP
TP5(thinkPHP5框架)实现显示错误信息及行号功能的方法
2019/06/03 PHP
Prototype Date对象 学习
2009/07/12 Javascript
Js 中debug方式
2010/02/07 Javascript
javascript中数组的定义及使用实例
2015/01/21 Javascript
Jquery使用val方法读写value值
2015/05/18 Javascript
JavaScript中的函数嵌套使用
2015/06/04 Javascript
js控制多图左右滚动切换效果代码分享
2015/08/26 Javascript
JavaScript 七大技巧(二)
2015/12/13 Javascript
一道JS前端闭包面试题解析
2015/12/25 Javascript
Angular 理解module和injector,即依赖注入
2016/09/07 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
2016/10/17 Javascript
jQuery实现获取h1-h6标题元素值的方法
2017/03/06 Javascript
element vue Array数组和Map对象的添加与删除操作
2018/11/14 Javascript
webpack4 从零学习常用配置(小结)
2019/05/28 Javascript
vue filter 完美时间日期格式的代码
2019/08/14 Javascript
express框架中使用jwt实现验证的方法
2019/08/25 Javascript
转换layUI的数据表格中的日期格式方法
2019/09/19 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
2020/06/05 Javascript
纯JS开发baguetteBox.js响应式画廊插件
2020/06/28 Javascript
vue element table中自定义一些input的验证操作
2020/07/18 Javascript
[02:11]2014DOTA2 TI专访VG战队Fenrir:队伍气氛良好
2014/07/11 DOTA
Python中在脚本中引用其他文件函数的实现方法
2016/06/23 Python
Python调用C++程序的方法详解
2017/01/24 Python
Django 跨域请求处理的示例代码
2018/05/02 Python
python XlsxWriter模块创建aexcel表格的实例讲解
2018/05/03 Python
利用Python检测URL状态
2019/07/31 Python
flask框架jinja2模板与模板继承实例分析
2019/08/01 Python
Python列表删除元素del、pop()和remove()的区别小结
2019/09/11 Python
python mysql中in参数化说明
2020/06/05 Python
Python数据分析库pandas高级接口dt的使用详解
2020/12/11 Python
洛杉矶生活休闲而精致的基础品牌:Mika Jaymes
2018/01/07 全球购物
技术人员面试提纲
2013/11/28 职场文书
高中生学习的自我评价
2013/12/14 职场文书
内衣营销方案
2014/03/15 职场文书
2014小学数学教研组工作总结
2014/12/06 职场文书