基于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;
}
})
}
}

这样就调用成功了！！

然后我们把它遍历出来即可。