154 lines
		
	
	
		
			3.0 KiB
		
	
	
	
		
			Markdown
		
	
	
	
		
		
			
		
	
	
			154 lines
		
	
	
		
			3.0 KiB
		
	
	
	
		
			Markdown
		
	
	
	
|  | # Vue-jsonp
 | ||
|  | 
 | ||
|  | [](https://github.com/LancerComet/vue-jsonp/actions) | ||
|  | 
 | ||
|  | A tiny library for handling JSONP request. | ||
|  | 
 | ||
|  | ## Quick Start
 | ||
|  | 
 | ||
|  | As Vue plugin: | ||
|  | 
 | ||
|  | ```ts | ||
|  | 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: | ||
|  | 
 | ||
|  | ```ts | ||
|  | import { jsonp } from 'vue-jsonp' | ||
|  | 
 | ||
|  | jsonp('/some-jsonp-url', { | ||
|  |   myCustomUrlParam: 'veryNice' | ||
|  | }) | ||
|  | ``` | ||
|  | 
 | ||
|  | ## Send data and set query & function name
 | ||
|  | 
 | ||
|  | ### Send data
 | ||
|  | 
 | ||
|  | ```ts | ||
|  | // 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: | ||
|  | 
 | ||
|  | ```ts | ||
|  | // 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. | ||
|  | 
 | ||
|  | ```ts | ||
|  | /** | ||
|  |  * 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
 | ||
|  | 
 | ||
|  | ```ts | ||
|  | 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') | ||
|  | ``` | ||
|  | 
 | ||
|  | ```ts | ||
|  | import { jsonp } from 'vue-jsonp' | ||
|  | 
 | ||
|  | const result = await jsonp<string>('/my-awesome-url') | ||
|  | assert(result === 'such a jsonp') | ||
|  | ``` | ||
|  | 
 | ||
|  | ## License
 | ||
|  | 
 | ||
|  | MIT |