Vue-jsonp

A tiny library for handling JSONP request.

Quick Start

As Vue plugin:

1import { VueJsonp } from 'vue-jsonp'
2
3// Vue Plugin.
4Vue.use(VueJsonp)
5
6// Now you can use "$jsonp" on Vue components.
7const vm = new Vue()
8const data = await vm.$jsonp('/some-jsonp-url', {
9  myCustomUrlParam: 'veryNice'
10})

Use function directly:

1import { jsonp } from 'vue-jsonp'
2
3// Pass a response type.
4const data = await jsonp<string>('/some-jsonp-url', {
5  myCustomUrlParam: 'veryNice'
6})

Send data and set query & function name

Send data

1// The request url will be "/some-jsonp-url?type=admin&date=2020&callback=jsonp_{RANDOM_STR}".
2const data = await jsonp('/some-jsonp-url', {
3  type: 'admin',
4  date: 2020
5})

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:

1// The request url will be "/some-jsonp-url?type=admin&date=2020&cb=jsonp_func".
2jsonp('/some-jsonp-url', {

3  callbackQuery: 'cb',

4  callbackName: 'jsonp_func',

5  type: 'admin',

6  date: 2020
7})

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.

1/**
2 * JSONP parameter declaration.
3 */
4interface IJsonpParam {
5  /**
6   * Callback query name.
7   * This param is used to define the query name of the callback function.
8   *
9   * @example
10   * // The request url will be "/some-url?myCallback=jsonp_func&myCustomUrlParam=veryNice"
11   * const result = await jsonp('/some-url', {
12   *   callbackQuery: 'myCallback',
13   *   callbackName: 'jsonp_func',
14   *   myCustomUrlParam: 'veryNice'
15   * })
16   *
17   * @default callback
18   */
19  callbackQuery?: string
20
21  /**
22   * Callback function name.
23   * This param is used to define the jsonp function name.
24   *
25   * @example
26   * // The request url will be "/some-url?myCallback=jsonp_func&myCustomUrlParam=veryNice"
27   * const result = await jsonp('/some-url', {
28   *   callbackQuery: 'myCallback',
29   *   callbackName: 'jsonp_func',
30   *   myCustomUrlParam: 'veryNice'
31   * })
32   *
33   * @default jsonp_ + randomStr()
34   */
35  callbackName?: string
36
37  /**
38   * Custom data.
39   */
40  [key: string]: any
41}

Example

1import Vue from 'vue'
2import { VueJsonp } from 'vue-jsonp'
3
4Vue.use(VueJsonp)
5
6const vm = new Vue()
7const { code, data, message } = await vm.$jsonp<{
8  code: number,
9  message: string,
10  data: {
11    id: number,
12    nickname: string
13  }
14}>('/my-awesome-url', {
15  name: 'MyName', age: 20
16})
17
18assert(code === 0)
19assert(message === 'ok')
20assert(data.id === 1)
21assert(data.nickname === 'John Smith')

1import { jsonp } from 'vue-jsonp'
2
3const result = await jsonp<string>('/my-awesome-url')
4assert(result === 'such a jsonp')

License

MIT