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 相关文章推荐
jQuery prev ~ siblings选择器使用介绍
Aug 09 Javascript
$(document).ready(function() {})不执行初始化脚本
Jun 19 Javascript
AngularJS进行性能调优的7个建议
Dec 28 Javascript
学习JavaScript设计模式之模板方法模式
Jan 20 Javascript
JavaScript触发onScroll事件的函数节流详解
Dec 14 Javascript
Javascript for in的缺陷总结
Feb 03 Javascript
js中删除数组中的某一元素实例(无下标时)
Feb 28 Javascript
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
网页爬虫之cookie自动获取及过期自动更新的实现方法
Mar 06 Javascript
使用Angular Cli如何创建Angular私有库详解
Jan 30 Javascript
Node.js API详解之 string_decoder用法实例分析
Apr 29 Javascript
vue 封装面包屑组件教程
Nov 16 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
虹吸式咖啡探讨–研磨
2021/03/03 冲泡冲煮
让CodeIgniter的ellipsize()支持中文截断的方法
2014/06/12 PHP
php实现常见图片格式的水印和缩略图制作(面向对象)
2016/06/15 PHP
Yii 2.0实现联表查询加搜索分页的方法示例
2017/08/02 PHP
PHP实现获取毫秒时间戳的方法【使用microtime()函数】
2019/03/01 PHP
thinkphp5框架扩展redis类方法示例
2019/05/06 PHP
JavaScript 组件之旅(三):用 Ant 构建组件
2009/10/28 Javascript
如何使用HTML5地理位置定位功能
2015/04/27 Javascript
基于jquery实现省市联动效果
2015/11/23 Javascript
Js遍历键值对形式对象或Map形式的方法
2016/08/08 Javascript
js实现动态显示时间效果
2017/03/06 Javascript
jQuery查找dom的几种方法效率详解
2017/05/17 jQuery
Javascript创建类和对象详解
2017/05/31 Javascript
JS实现颜色的10进制转化成rgba格式的方法
2017/09/04 Javascript
vue2.0使用swiper组件实现轮播的示例代码
2018/03/03 Javascript
用Electron写个带界面的nodejs爬虫的实现方法
2019/01/29 NodeJs
详解Vue中组件的缓存
2019/04/20 Javascript
Vue通过配置WebSocket并实现群聊功能
2019/12/31 Javascript
[47:53]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#2COL VS Spirit
2016/03/02 DOTA
[05:31]DOTA2上海特级锦标赛主赛事第三日RECAP
2016/03/05 DOTA
python远程连接服务器MySQL数据库
2018/07/02 Python
基于Django框架利用Ajax实现点赞功能实例代码
2018/08/19 Python
python实现嵌套列表平铺的两种方法
2018/11/08 Python
浅谈python print(xx, flush = True) 全网最清晰的解释
2020/02/21 Python
Python爬虫实战案例之爬取喜马拉雅音频数据详解
2020/12/07 Python
苏宁红孩子母婴商城:redbaby
2017/02/12 全球购物
Paper Cape官网:美国婴儿和儿童服装品牌
2019/11/02 全球购物
大学教师年终总结的自我评价
2013/10/29 职场文书
骨干教师培训感言
2014/01/16 职场文书
心理学专业大学生职业生涯规划范文
2014/02/19 职场文书
企业新年寄语
2014/04/04 职场文书
活动总结书
2014/05/08 职场文书
企业文化理念标语
2014/06/10 职场文书
植树造林的宣传标语
2014/06/23 职场文书
python全面解析接口返回数据
2022/02/12 Python
Nginx 配置 HTTPS的详细过程
2022/05/30 Servers