基于vue音乐APP的项目笔记：jsonp-Promise的轮播图封装
我们可以通过jsonp跨域来获取qq音乐的数据，所以我们需要安装jsonp的插件
npm install jsonp --save
然后我们进行jsonp的封装，首先我们写jsonp.js放在common目录下，在这个文件中我们要写封装的jsonp
import originJSONP from 'jsonp'
export default function jsonp(url,data,option){
url+=(url.indexOf('?') < 0 ? '?' : '&') + param(data);
return new Promise((resolve,reject)=>{
//调用jsonp
originJSONP(url,option,(err,data)=>{
if(!err){
resolve(data)
}else{
reject(err)
}
})
})}
export function param(data){
let url='';
//循环data
for(var i in data){
//如果data值不等于undefined 就把值附给value，否则把空字符串传递给value
let value= data[i] !== undefined ? data[i] : '';
//拼接
url+=`&${i}=${encodeURIComponent(value)}`;
}
return url ? url.substring(1) : ''
}
我们的jsonp分为2种部分，一种是url接口，一种是参数，才能发送正确的请求。
那么我们在param这个方法中主要做一个参数循环的作用，这里把具体的参数转换为url编码附给了拼接url，然后返回一个url作为jsonp函数用
传入的url参数我们拼接data参数，然后通过Promise来调用我们的jsonp的库
然后我们在api下新建一个js文件，是存放我们的推荐页面抓取数据的js
然后在这页面进行数据传输
值得注意的是我们定义url的参数的时候，有很多可重复的参数，比如说编码和option jsonpcallback等等，所以我们将这些公共的数据抽取出来放在config.js中
export const commonParams = {
g_tk:5381,
inCharset : 'utf-8',
outCharset : 'utf-8',
notice : 0,
format : 'jsonp'}
//jsonp需要的option
export const options = {
param : "jsonpCallback"
}
//错误异常的语义化常量
export const ERR_OK = 0;
在抓取的json中，如果为0就是抓取成功，所以定义的语义化常量是0
然后我们到推荐页面的apijs中去调用方法
//导入jsonp
import jsonp from 'common/js/jsonp'
//读取公共配置
import {commonParams,options} from 'api/config'
export function getrecommend(){
//定义url接口
const url='https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg'
//拼接url后的参数，用es6的语法assign塞进去
const data=Object.assign({},commonParams,{
platform: 'h5',
uin : 0,
needNewCode : 1
})
return jsonp(url,data,options);}
一切都是那么简单，之所以我第一次写的时候很懵逼，等到整理笔记的时候才发现原来是这样，所以要适应这样的封装环境，很不错nice
然后我们去组件中调用
created(){
//加载执行方法
this._getData();
},
methods:{
_getData(){
getrecommend().then((val) => {
if(val.code===ERR_OK){
this.recommend=val.data.slider;
}
})
}
}
这样就调用成功了！！
然后我们把它遍历出来即可。
大家好，已经很久没有给大家发布文章了，因为最近在学习很多新东西，已经保存到自己的印象笔记，所以后续会持续给大家
