[TOC]
#### vue 封装 JSONP
* [ ] 安装 cnpm i -S jsonp
* [ ] src 目录下新建
![](https://box.kancloud.cn/9533f1b0b56751a63571339a5e88a9fc_195x134.png)
* [ ] src / common / js / jsonp.js
~~~
import originJsonp from 'jsonp';
/**
*
* @param url 后端路径
* @param data 数据
* @param option 选项
* @returns {Promise<any>} 返回 Promise 对象
*/
export default function jsonp(url, data, option) {
url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)
return new Promise((resolve, reject) => {
originJsonp(url, option, (err, data) => {
if (!err) {
resolve(data)
} else {
reject(err)
}
})
})
}
/**
* 组装符合jsonp格式路径
* @param data 数据
* @returns {string}
*/
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) : ''
}
~~~
*****
#### 使用JSONP 请求 QQ 音乐
* [ ] QQ 音乐api
[https://c.y.qq.com/musichall/fcgi-bin/fcg\_yqqhomepagerecommend.fcg](https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg)
* [ ] 数据格式
![](https://box.kancloud.cn/1550f319a8f0ad7aa4245ef3a53bbe87_527x190.png)
* [ ] 使用 jsonp 请求
* [ ] src 目录下新建api目录
![](https://box.kancloud.cn/9e815446172e96fb3231a76f88c707f5_212x111.png)
* [ ] config.js
~~~
export const commonParams = {
g_tk: 5381,
inCharset: 'utf-8',
outCharset: 'utf-8',
notice: 0,
format: 'jsonp'
}
export const options = {
param: 'jsonpCallback'
}
export const ERR_OK = 0
~~~
* [ ] recom.js
~~~
import jsonp from '../common/js/jsonp.js'
import { commonParams, options } from './config'
export function getRecom()
{
const url = 'https://c.y.qq.com/v8/fcg-bin/fcg_myqq_toplist.fcg'
const data = Object.assign({}, commonParams, {
platform: 'h5',
uin: 0,
needNewCode: 1
});
return jsonp(url, data, options)
}
~~~
- 起步
- 环境搭建
- mock数据
- 基础
- 生命周期
- 过滤器
- 过渡动画
- keyframes动画
- 动画JS钩子
- 路由
- 导航守卫
- 全局守卫
- 监听器
- 自定义组件
- 获取焦点
- mixins
- mixins抽离vuex
- 国际化
- 动态组件
- Dom
- 扩展
- 安装devTools
- scss
- Nuxt引用多个UI库
- vuex
- vuex命名空间
- vuex定义
- cli
- 安装与卸载
- 环境变量
- 杂项
- Mock数据
- FeHelper
- git
- 反向代理
- 本地存储
- stylus
- 常用mixins
- jsonp
- 配置
- mock配置
- 跨域配置
- 自定义路径
- px2rem
- 代理后端请求
- 常用算法
- 字母排序城市数据
- 倒计时
- 通讯录数据结构
- 请求
- axios防止多次请求
- 封装axios请求
- axios使用
- 封装axios
- 插件
- BetterScroll
- 高德定位
- polyfill
- fastClick
- LazyLoad
- storageCache
- moment
- keyFrameAnimation
- vueSwiper
- 组件
- Loading组件
- header组件
- 仿有道App导航
- SupportIcon
- 仿饿了么购物车跳动
- 购物车小球缓动
- 小球飞入购物车
- 仿音乐歌手列表
- 唱片飞入效果
- 搜索组件
- 仿美团PC搜索框
- 页面布局
- stickyFooter
- 背景色渐变
- 背景虚化
- Ui组件
- CubeUi
- CreateApi
- tab滑屏切换
- 索引列表
- BScroll
- BScroll左右联动导航
- vant
- 函数库
- 常用Dom函数库
- axios封装
- 格式化音乐播放时长
- 搜索节流
- time格式化
- JS基础
- window对象中的高度
- JS中的宽高
- 常用正则
- nuxt
- nuxtVuex
- 监听页面滚动
- 监听body滚动
- 监听局部滚动