LancerComet / Vue Jsonp
Licence: mit
A tiny library for handling JSONP request.
Stars: ✭ 123
Programming Languages
typescript
32286 projects
Labels
Projects that are alternatives of or similar to Vue Jsonp
Vue Async Computed
Async computed properties for Vue.js
Stars: ✭ 990 (+704.88%)
Mutual labels: vue-plugin
Vue Core Image Upload
a vue plugin for image to crop and upload
Stars: ✭ 1,321 (+973.98%)
Mutual labels: vue-plugin
Vue Touch Ripple
👆 Touch ripple component for @vuejs
Stars: ✭ 443 (+260.16%)
Mutual labels: vue-plugin
Vue Loadable
⏳ Improve your loading state control with pretty simple methods and helpers.
Stars: ✭ 23 (-81.3%)
Mutual labels: vue-plugin
Vue Scroll Progress Bar
Vue.js plugin for page scroll progress bar
Stars: ✭ 76 (-38.21%)
Mutual labels: vue-plugin
Vuera
👀 Vue in React, React in Vue. Seamless integration of the two. 👯
Stars: ✭ 3,631 (+2852.03%)
Mutual labels: vue-plugin
Vue Plugin Simple
A template to create vue plugins and shareable components.
Stars: ✭ 114 (-7.32%)
Mutual labels: vue-plugin
Vue Tabevents
Event-Based communication across opened tabs for Vue 2.x
Stars: ✭ 31 (-74.8%)
Mutual labels: vue-plugin
Vue Toastr
Vuejs Toast : Plugin and Component Capability.
Stars: ✭ 93 (-24.39%)
Mutual labels: vue-plugin
Vue Ls
💥 Vue plugin for work with local storage, session storage and memory storage from Vue context
Stars: ✭ 468 (+280.49%)
Mutual labels: vue-plugin
Vue Js Toggle Button
🍥 Vue.js 2 toggle / switch button - simple, pretty, customizable
Stars: ✭ 836 (+579.67%)
Mutual labels: vue-plugin
Vue Qrcode Reader
A set of Vue.js components for detecting and decoding QR codes.
Stars: ✭ 1,240 (+908.13%)
Mutual labels: vue-plugin
Vue Ellipse Progress
A Vue.js component to create beautiful animated circular progress bars
Stars: ✭ 101 (-17.89%)
Mutual labels: vue-plugin
Vue Js Modal
Easy to use, highly customizable Vue.js modal library.
Stars: ✭ 3,989 (+3143.09%)
Mutual labels: vue-plugin
Vue Lazyload Images
A plugin of lazy-load images for Vue2.x
Stars: ✭ 61 (-50.41%)
Mutual labels: vue-plugin
V Dragged
Vue directive plugin for drag event detection.
Stars: ✭ 84 (-31.71%)
Mutual labels: vue-plugin
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].