VUE2.0中Jsonp的使用方法

npm install 
 npm run dev

import originJSONP from 'jsonp'
export default function jsonp(url, data, option) {
 url += (url.indexOf('"text-align: center">

2.3 jsonp.js的API调用
在src的文件夹下创建api文件夹，用于储存api调用的js，新建config.js和recommend.js两个文件。


config.js
export const commonParams = {
 g_tK: 5381,
 inCharset: 'utf-8',
 outCharset: 'utf-8',
 notice: 0,
 format: 'jsonp'
}
export const options = {
 param: 'jsonpCallback'
}
export const ERR_OK = 0
recommend.js
import jsonp from 'common/js/jsonp'
import {commonParams, options} from './config'
export function getRecommend() {
 const url = 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg' //此处的url可以自行修改，本文是qq音乐链接
 const data = Object.assign({}, commonParams, {
 platform: 'h5',
 uin: 0,
 needNewCode: 1
 })
 return jsonp(url, data, options)
}


目录结构如下：

2.4 recommend.vue文件调用
在项目目录下的src>components>recommend>对应的文件.vue
recommend.vue




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


2.5 页面jsonp请求成功结果

以上为vue2.0 jsonp简单使用方式，实例下载链接


总结
以上所述是小编给大家介绍的VUE2.0中Jsonp的使用方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！