vue2.0项目中的函数封装和引用。演示通过封装jsonp方法获取QQ音乐数据。

最近学习了一下如何用vue2.0开发app。这里只是记录一下学习中遇到的好的方法和知识点，里面用的好多es6语法，我也不是很懂，怕忘了，so 还是再总结一下。

1，首先新建一个jsonp.js 封装一个函数方法。当然前提要在项目中安装jsonp 的依赖，

npm install jsonp --save

看下面代码，解释一下，先引入jsonp,接着写了2个函数，一个是jsonp()，另一个是param();

param()是为了把传递过来的参数拼接到url里面，而这个文档默认的是暴露第一函数，看到这个就应该明白，

export default function jsonp()

而第二个函数是

function param(data)

import originJSONP from 'jsonp'

// indexOf('?') 判断url 里面有没有？号，<0 时成立就是没有问号。
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)
}
})
})
}

//封装  拼接data 到url  的方法
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() : ''
}

这里再写一个配置文档config.js 封装几个常量，

export const commonParams ={
g_tk:5381,
inCharset: 'utf-8',
outCharset:'utf-8',
notice:0

}

// 设置常量 param
export const options = {
param:'jsonpCallback'
}
// 设置常量 错误信息 0 是OK  没有问题的意思
export const ERR_OK =0

2，接着就是引用上面封装好的方法，

首先引入文档

import jsonp from 'common/js/jsonp.js'

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
})
return jsonp(url, data, options)

}

3,在其他文档继续使用第二步封装好的获取参数的方法。

<script type="text/ecmascript-6">
import {getRecommend} from 'api/recommend'
import {ERR_OK} from 'api/config'
export default{
created(){
this._getRecommend()
},
methods: {
_getRecommend (){
getRecommend().then((res) => {
if (res.code === ERR_OK) {
console.log(res.data.slider)
}
})
}
}
}
</script>

好了，看着很简单，封装常量和函数方法在其他文档使用。但是，里面很多es6语法，需要多研究。

看下，我打印出来的效果吧。