1.1 vue2.0jsonp获取数据

jsonp介绍

1.原理:

• 1.写js的时候，我们会在script标签里面引入我们需要的js文件，有自己网站上的，也有别的网站上的，不管哪个网站上的js文件，只要引入了，都可以去运行，丝毫不受同源策略的影响。
• 2.jspon能够跨域,发送的不是ajax请求,利用动态创建script标签,受同源策略的影响。src指向请求的服务端地址。
  
  • 1.请求参数 url ? callback = abc.
  • 服务端返回格式 abc( json );
  • 前端定义abc方法,可接受到数据。 function(data){ console.log(data) }

安装

https://githuub.com/webmodules/jsonp
pack.json安装

"dependencies": {
    "vue": "^2.3.3",
    "vue-router": "^2.5.3",
    "jsonp": "0.2.1"
  }

npm install

jsonp.js

import originJsonp from 'jsonp'

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)
      }
    })
  })
}

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) : ''
}

获取数据

1. config.js 常量的配置

export const commonParam = {
      g_tk:1928093487,
      inCharset:'unf-8',
      outCharset:'unf-8',
      notice : 0,
      format:'jsonp'
}
export const options = {
  param:'jsonpCallback'
}
export const ERR_OK = 0

2. recommend.js 封装网络请求方法

import jsonp from './jsonp'
//不使用{jsonp}因为jsonp.js导出使用的是export default
import {commonParam,options} from './config'

export function getRecommend() {
  const url = 'http://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg';
  const data = Object.assign({},commonParam,{
     platform:'h5',
     uin:0,
    needNewCode:1
 });
  return jsonp(url,data,options)
}

3.recommend.vue UI界面使用

• 引入网络api. import {recommend} from ‘../api/recommend’

• 2.script模块 export default { }

• 3.钩子函数created(){}
• 4.方法 methods:{ }

<script>
  import {getRecommend} from '../api/recommend'
  import {ERR_OK} from '../api/config'
  export default{
    created(){
      this._getRecommend();
    },
    methods:{
      _getRecommend(){
        getRecommend().then((res) => {
          alert(res)
          if(res.code === 0){
            console.log(res.data.slider);
          }
        })
      }
    }
  }
</script>

4.返回数据

{
    "code": 0,
    "data": {
        "slider": [{
            "linkUrl": "https://y.qq.com/m/digitalbum/gold/index.html?_video=true&id=2266275&g_f=shoujijiaodian",
            "picUrl": "http://y.gtimg.cn/music/photo_new/T003R720x288M000000wMNQD0zAYKG.jpg",
            "id": 12224
        }, {
            "linkUrl": "http://y.qq.com/w/album.html?albummid=003AkVSw2YUInp",
            "picUrl": "http://y.gtimg.cn/music/photo_new/T003R720x288M000002nKgjF4L99Qi.jpg",
            "id": 12326
        }, {
            "linkUrl": "https://y.qq.com/m/digitalbum/gold/index.html?_video=true&id=2265691&g_f=shoujijiaodian",
            "picUrl": "http://y.gtimg.cn/music/photo_new/T003R720x288M000002G6UE51pf1N7.jpg",
            "id": 12221
        }, {
            "linkUrl": "http://y.qq.com/w/album.html?albummid=000m9Hj70u6KSe",
            "picUrl": "http://y.gtimg.cn/music/photo_new/T003R720x288M000003pHBKP3WzOXv.jpg",
            "id": 12328
        }, {
            "linkUrl": "https://y.qq.com/m/digitalbum/gold/index.html?_video=true&id=2266195&g_f=shoujijiaodian",
            "picUrl": "http://y.gtimg.cn/music/photo_new/T003R720x288M000004Pb7Y20zfUCO.jpg",
            "id": 12218
        }],
        "radioList": [{
            "picUrl": "http://y.gtimg.cn/music/photo/radio/track_radio_307_13_1.jpg",
            "Ftitle": "一人一首招牌歌",
            "radioid": 307
        }, {
            "picUrl": "http://y.gtimg.cn/music/photo/radio/track_radio_199_13_1.jpg",
            "Ftitle": "热歌",
            "radioid": 199
        }],
        "songList": []
    }
}