https://github.com/lancercomet/vue-jsonp
A tiny library for handling JSONP request.
https://github.com/lancercomet/vue-jsonp
jsonp-request vue-jsonp vue-plugin
Last synced: about 1 year ago
JSON representation
A tiny library for handling JSONP request.
- Host: GitHub
- URL: https://github.com/lancercomet/vue-jsonp
- Owner: LancerComet
- License: mit
- Created: 2016-10-17T09:52:52.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2025-03-28T22:15:55.000Z (about 1 year ago)
- Last Synced: 2025-05-12T04:32:50.561Z (about 1 year ago)
- Topics: jsonp-request, vue-jsonp, vue-plugin
- Language: TypeScript
- Size: 1.73 MB
- Stars: 154
- Watchers: 8
- Forks: 26
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue-jsonp
[](https://badge.fury.io/js/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 "$jsonp" on Vue components.
const vm = new Vue()
const data = await vm.$jsonp('/some-jsonp-url', {
myCustomUrlParam: 'veryNice'
})
```
Use function directly:
```ts
import { jsonp } from 'vue-jsonp'
// Pass a response type.
const data = await jsonp('/some-jsonp-url', {
myCustomUrlParam: 'veryNice'
})
```
## Send data and set query & function name
### Send data
```ts
// The request url will be "/some-jsonp-url?type=admin&date=2020&callback=jsonp_{RANDOM_STR}".
const data = await jsonp('/some-jsonp-url', {
type: 'admin',
date: 2020
})
```
### Custom query & function name
The url uniform is `/url?{callbackQuery}={callbackName}&...` and the default is `/url?callback=jsonp_{RANDOM_STRING}&...`.
And you can change it like this:
```ts
// The request url will be "/some-jsonp-url?type=admin&date=2020&cb=jsonp_func".
jsonp('/some-jsonp-url', {
callbackQuery: 'cb',
callbackName: 'jsonp_func',
type: 'admin',
date: 2020
})
```
## Module exports
- `VueJsonp: PluginObject`
- `jsonp: (url: string, param?: IJsonpParam, timeout?: number) => Promise`
## 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"
* const result = await 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"
* const result = await 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('/my-awesome-url')
assert(result === 'such a jsonp')
```
## License
MIT