用Vue来实现音乐播放器(六):JSONP的封装
在npm上下载jsonp的包
这个包的用法 传入的参数是地址加上地址参数的混合 但是想封装一个将地址和地址参数分别传入的jsonp方法
所以来封装一个
import originJSONP from 'jsonp' export default function jsonp(url,data,options){
url+=(url.indexOf('?')<0?'?':'&')+param(data)
return new Promise((resolve,reject)=>{
originJSONP(url,options,(err,data)=>{
if(!err){
resolve(data)
}else{
reject(err)
} }) })
} 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):'' }
用Vue来实现音乐播放器(六):JSONP的封装的更多相关文章
- vue小练习--音乐播放器
1 首先建一个文件夹 放几首歌曲 2 看代码 1)基本版本 <!DOCTYPE html> <html lang="zh-CN"> <head> ...
- 用Vue来实现音乐播放器(三十八):歌词滚动列表的问题
1.频繁切换歌曲时,歌词会跳来跳去 原因: // 歌词跳跃是因为内部有一个currentLyric对像内部有一些功能来完成歌词的跳跃 //每个currentLyric能实现歌曲的播放跳到相应的位置 是 ...
- Vue实战:音乐播放器(一) 页面效果
先看一下效果图 首页 歌单详情页 歌手列表 歌手详情页 排行页面 榜单的详情页(排序样式) 搜索页面 搜索结果 播放器内核 歌词自动滚动 播放列表 用户中心
- 用Vue来实现音乐播放器(十六):滚动列表的实现
滚动列表是一个基础组件 他是基于scroll组件实现的 在base文件夹下面创建一个list-view文件夹 里面有list-view.vue组件 <template> < ...
- 用Vue来实现音乐播放器(九):歌单数据接口分析
z这里如果我们和之前获取轮播图的数据一样来获取表单的数据 发现根本获取不到 原因是qq音乐在请求头里面加了authority和refer等 但是如果我们通过jsonp实现跨域来请求数据的话 是根本 ...
- 用Vue来实现音乐播放器(八):自动轮播图啊
slider.vue组件的模板部分 <template> <div class="slider" ref="slider"> <d ...
- 用Vue来实现音乐播放器(二十三):音乐列表
当我们将音乐列表往上滑的时候 我们上面的歌手图片部分也会变小 当我们将音乐列表向下拉的时候 我们的图片会放大 当我们将音乐列表向上滑的时候 我们的图片有一个高斯模糊的效果 并且随着我们的列 ...
- 用Vue来实现音乐播放器(二十一):歌手详情数据抓取
第一步:在api文件夹下的singer.js中抛出getSingerDetail方法 第二步:在singer-detail.vue组件中引入api文件夹下的singer.js和config.js 第三 ...
- 用Vue来实现音乐播放器(二十):Vuex初始化及歌手数据的配置
state:所有组件的所有状态和数据 放入同一个内存空间去管理 我们把它称为state Vue Components:state里面的数据可以方便的映射到组件上 然后渲染组件 Actions:当组件 ...
随机推荐
- React 使用相对于根目录进行引用组件
在对自己开发的组件中经常会做诸如以下的引用: import genFetchEntryListArgs from '../../../utils/table/genFetchEntryListArgs ...
- 多线程测试工具groboutils的使用
一直使用junit做为服务测试框架,感觉不错.最近有人反映在高并发的情况下,存在服务调不到.无奈再次打开单元测试模拟高并发的 情况,却发现junit不支持并发测试 引入groboutils ...
- Java常用日期处理方法
import org.apache.commons.lang3.time.FastDateFormat; import org.joda.time.DateTime; import org.apach ...
- linux Apache 日志轮询
安装日志轮询工具 cronolog [root@Nagios-Server tools]# wgethttp://cronolog.org/download/cronolog-1.6.2.tar.gz ...
- Python自动化学习--控制浏览器
from selenium import webdriver import time driver = webdriver.Chrome() driver.get("https://www. ...
- tf中的meta和pb
https://www.jianshu.com/p/af2b694eae61 简单来说,pb文件是个推理的图,meta更复杂,不能用来部署
- 小程序内置组件swiper,circular(衔接)使用小技巧
swiper,关于滑块的一些效果无缝,断点,视差等等...我想这里就不用做太多的赘述,这里给大家分享一下实战项目中使用circular(衔接)的一点小特性.小技巧,当然你也可以理解为遇到了一个小坑,因 ...
- HDU 5418 Victor and World (状态压缩dp)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5418 题目大意:有n个结点m条边(有边权)组成的一张连通图(n <16, m<100000 ...
- Linux kswapd0 进程CPU占用过高
图便宜买了个1核1G虚拟机,启动两个jar后cpu飙升直接卡死,查看cpu及内存占用 发现kswapd0进程cpu占用一直居高不下,于是查询资料,总结如下. swap分区的作用是当物理内存不足时,会将 ...
- Spring IOC 实现方式
Spring 中的 org.springframework.beans 包和 org.springframework.context 包构成了 Spring 框架 IoC 容器的基础. BeanFac ...