1.1 vue2.0jsonp获取数据

2017-09-29 19:31:32来源:CSDN作者:lvlemo人点击

分享

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 defaultimport {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": []    }}

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台