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语法，需要多研究。
看下，我打印出来的效果吧。