vue项目中使用jsonp

一、安装插件vue-jsonp

npm i vue-jsonp -S

二、在项目中使用插件

2.1 全局引用

import { VueJsonp } from 'vue-jsonp'

// Vue Plugin.
Vue.use(VueJsonp)

// Now you can use this.$jsonp in Vue components.
const vm = new Vue()
vm.$jsonp('/some-jsonp-url', {
  myCustomUrlParam: 'veryNice'
})

有些版本这样引用编译时会报错，需要修改引用方式：

import * as VueJsonp from 'vue-jsonp'

// Vue Plugin.
Vue.use(VueJsonp)

// Now you can use this.$jsonp in Vue components.
const vm = new Vue()
vm.$jsonp('/some-jsonp-url', {
  myCustomUrlParam: 'veryNice'
})

2.2 局部引用

import { jsonp } from 'vue-jsonp'

jsonp('/some-jsonp-url', {
  myCustomUrlParam: 'veryNice'
})

三、使用时携带参数

// The request url will be "/some-jsonp-url?name=LancerComet&age=100&cb=jsonp_func".
jsonp('/some-jsonp-url', {
  callbackQuery: 'cb',
  callbackName: 'jsonp_func',
  name: 'LancerComet',
  age: 100
})