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
167 Jan 3, 2023
826 Jan 2, 2023
19 Jan 15, 2022
27 Dec 7, 2022
1.8k Dec 23, 2022
5 Mar 9, 2022
8 Aug 30, 2022
0 Jan 14, 2022
0 Feb 18, 2020
3 Sep 14, 2022
239 Apr 20, 2022
14 Jul 30, 2020
7 Nov 9, 2022
44 Nov 23, 2022
1 Sep 24, 2019
0 Jan 11, 2021
50 Jan 3, 2023
1 Sep 8, 2021
9 Nov 4, 2022
14 Dec 18, 2022