You can not select more than 25 topics
			Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
		
		
		
		
		
			|  | 3 years ago | |
|---|---|---|
| .. | ||
| dist | 3 years ago | |
| LICENSE | 3 years ago | |
| README.md | 3 years ago | |
| package.json | 3 years ago | |
		
			
				
				README.md
			
		
		
			
			
		
	
	Vue-jsonp
A tiny library for handling JSONP request.
Quick Start
As Vue plugin:
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'
})
Use function directly:
import { jsonp } from 'vue-jsonp'
jsonp('/some-jsonp-url', {
  myCustomUrlParam: 'veryNice'
})
Send data and set query & function name
Send data
// The request url will be "/some-jsonp-url?name=LancerComet&age=100&callback=jsonp_{RANDOM_STR}".
jsonp('/some-jsonp-url', {
  name: 'LancerComet',
  age: 100
})
Custom query & function name
The url uniform is /url?{callbackQuery}={callbackName}&..., the default is /url?callback=jsonp_{RANDOM_STRING}&....
And you can change it like this:
// 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
})
Module exports
- 
VueJsonp: PluginObject<never>
- 
jsonp<T>: (url: string, param?: IJsonpParam, timeout?: number) => Promise<T>
API
IJsonpParam
IJsonpParam is the type of param for jsonp function.
/**
 * JSONP parameter declaration.
 */
interface IJsonpParam {
  /**
   * Callback query name.
   * This param is used to define the query name of the callback function.
   *
   * @example
   * // The request url will be "/some-url?myCallback=jsonp_func&myCustomUrlParam=veryNice"
   * jsonp('/some-url', {
   *   callbackQuery: 'myCallback',
   *   callbackName: 'jsonp_func',
   *   myCustomUrlParam: 'veryNice'
   * })
   *
   * @default callback
   */
  callbackQuery?: string
  /**
   * Callback function name.
   * This param is used to define the jsonp function name.
   *
   * @example
   * // The request url will be "/some-url?myCallback=jsonp_func&myCustomUrlParam=veryNice"
   * jsonp('/some-url', {
   *   callbackQuery: 'myCallback',
   *   callbackName: 'jsonp_func',
   *   myCustomUrlParam: 'veryNice'
   * })
   *
   * @default jsonp_ + randomStr()
   */
  callbackName?: string
  /**
   * Custom data.
   */
  [key: string]: any
}
Example
import Vue from 'vue'
import { VueJsonp } from 'vue-jsonp'
Vue.use(VueJsonp)
const vm = new Vue()
const { code, data, message } = await vm.$jsonp<{
  code: number,
  message: string,
  data: {
    id: number,
    nickname: string
  }
}>('/my-awesome-url', {
  name: 'MyName', age: 20
})
assert(code === 0)
assert(message === 'ok')
assert(data.id === 1)
assert(data.nickname === 'John Smith')
import { jsonp } from 'vue-jsonp'
const result = await jsonp<string>('/my-awesome-url')
assert(result === 'such a jsonp')
License
MIT