|
1 | 1 | # Vue-jsonp
|
2 | 2 |
|
3 |
| - |
| 3 | +[](https://github.com/LancerComet/vue-jsonp/actions) |
4 | 4 |
|
5 | 5 | A tiny library for handling JSONP request.
|
6 | 6 |
|
7 |
| -## Usage. |
| 7 | +## Quick Start |
8 | 8 |
|
9 |
| -Static function: |
10 |
| -`Vue.jsonp(url, dataObj, timeout)` |
| 9 | +As Vue plugin: |
11 | 10 |
|
12 |
| -In Vue component: |
13 |
| -`this.$jsonp(url, dataObj, timeout)` |
| 11 | +```ts |
| 12 | +import { VueJsonp } from 'vue-jsonp' |
14 | 13 |
|
15 |
| -## Params. |
16 |
| - - url: Target url for request. |
17 |
| - - dataObj: Object contains datas for querying. |
18 |
| - - timeout: Timeout for jsonp request. |
| 14 | +// Vue Plugin. |
| 15 | +Vue.use(VueJsonp) |
19 | 16 |
|
20 |
| -## URL. |
21 |
| -```javascript |
22 |
| -'/url?{callbackQuery}={callbackName}&...' |
| 17 | +// Now you can use this.$jsonp in Vue components. |
| 18 | +const vm = new Vue() |
| 19 | +vm.$jsonp('/some-jsonp-url', { |
| 20 | + myCustomUrlParam: 'veryNice' |
| 21 | +}) |
| 22 | +``` |
23 | 23 |
|
24 |
| -// Default: |
25 |
| -'/url?callback=jsonp_RANDOM_STRING&...' |
26 |
| -``` |
| 24 | +Use function directly: |
27 | 25 |
|
28 |
| -## Assign callback query name. |
29 |
| -```javascript |
30 |
| -this.$jsonp('/url', { |
31 |
| - callbackQuery: 'cb' // Default: callback |
| 26 | +```ts |
| 27 | +import { jsonp } from 'vue-jsonp' |
| 28 | + |
| 29 | +jsonp('/some-jsonp-url', { |
| 30 | + myCustomUrlParam: 'veryNice' |
32 | 31 | })
|
| 32 | +``` |
33 | 33 |
|
34 |
| -// Then URL will be: '/url?cb=jsonp_aws84739ssu8e3' |
| 34 | +## Send data and set query & function name |
| 35 | + |
| 36 | +### Send data |
| 37 | + |
| 38 | +```ts |
| 39 | +// The request url will be "/some-jsonp-url?name=LancerComet&age=100&callback=jsonp_{RANDOM_STR}". |
| 40 | +jsonp('/some-jsonp-url', { |
| 41 | + name: 'LancerComet', |
| 42 | + age: 100 |
| 43 | +}) |
35 | 44 | ```
|
36 | 45 |
|
37 |
| -## Assign callback function name. |
38 |
| -```javascript |
39 |
| -this.$jsonp('/url', { |
40 |
| - callbackName: 'jsonpFunc' |
| 46 | +### Custom query & function name |
| 47 | + |
| 48 | +The url uniform is `/url?{callbackQuery}={callbackName}&...`, the default is `/url?callback=jsonp_{RANDOM_STRING}&...`. |
| 49 | + |
| 50 | +And you can change it like this: |
| 51 | + |
| 52 | +```ts |
| 53 | +// The request url will be "/some-jsonp-url?name=LancerComet&age=100&cb=jsonp_func". |
| 54 | +jsonp('/some-jsonp-url', { |
| 55 | + callbackQuery: 'cb', |
| 56 | + callbackName: 'jsonp_func', |
| 57 | + name: 'LancerComet', |
| 58 | + age: 100 |
41 | 59 | })
|
| 60 | +``` |
42 | 61 |
|
43 |
| -// Then URL will be: '/url?callback=jsonpFunc' |
| 62 | +## Module exports |
| 63 | + |
| 64 | + - `VueJsonp: PluginObject<never>` |
| 65 | + |
| 66 | + - `jsonp<T>: (url: string, param?: IJsonpParam, timeout?: number) => Promise<T>` |
| 67 | + |
| 68 | +## API |
| 69 | + |
| 70 | +### IJsonpParam |
| 71 | + |
| 72 | +IJsonpParam is the type of param for jsonp function. |
| 73 | + |
| 74 | +```ts |
| 75 | +/** |
| 76 | + * JSONP parameter declaration. |
| 77 | + */ |
| 78 | +interface IJsonpParam { |
| 79 | + /** |
| 80 | + * Callback query name. |
| 81 | + * This param is used to define the query name of the callback function. |
| 82 | + * |
| 83 | + * @example |
| 84 | + * // The request url will be "/some-url?myCallback=jsonp_func&myCustomUrlParam=veryNice" |
| 85 | + * jsonp('/some-url', { |
| 86 | + * callbackQuery: 'myCallback', |
| 87 | + * callbackName: 'jsonp_func', |
| 88 | + * myCustomUrlParam: 'veryNice' |
| 89 | + * }) |
| 90 | + * |
| 91 | + * @default callback |
| 92 | + */ |
| 93 | + callbackQuery?: string |
| 94 | + |
| 95 | + /** |
| 96 | + * Callback function name. |
| 97 | + * This param is used to define the jsonp function name. |
| 98 | + * |
| 99 | + * @example |
| 100 | + * // The request url will be "/some-url?myCallback=jsonp_func&myCustomUrlParam=veryNice" |
| 101 | + * jsonp('/some-url', { |
| 102 | + * callbackQuery: 'myCallback', |
| 103 | + * callbackName: 'jsonp_func', |
| 104 | + * myCustomUrlParam: 'veryNice' |
| 105 | + * }) |
| 106 | + * |
| 107 | + * @default jsonp_ + randomStr() |
| 108 | + */ |
| 109 | + callbackName?: string |
| 110 | + |
| 111 | + /** |
| 112 | + * Custom data. |
| 113 | + */ |
| 114 | + [key: string]: any |
| 115 | +} |
44 | 116 | ```
|
45 | 117 |
|
46 |
| -## Example. |
47 |
| -```javascript |
| 118 | +## Example |
| 119 | + |
| 120 | +```ts |
48 | 121 | import Vue from 'vue'
|
49 |
| -import VueJsonp from 'vue-jsonp' |
| 122 | +import { VueJsonp } from 'vue-jsonp' |
| 123 | + |
50 | 124 | Vue.use(VueJsonp)
|
51 | 125 |
|
52 |
| -// If you want to setup the global timeout, just: |
53 |
| -Vue.use(VueJsonp, 5000) |
54 |
| -// Now all requests will be expired after 5000ms. |
55 |
| - |
56 |
| -// Use it in Vue Component. |
57 |
| -const SomeComponent = Vue.extend({ |
58 |
| - methods: { |
59 |
| - getData () { |
60 |
| - this.$jsonp('http://www.some-site.com/data', { name: 'MyName', age: 20 }).then(json => { |
61 |
| - // Success. |
62 |
| - }).catch(err => { |
63 |
| - // Failed. |
64 |
| - }) |
65 |
| - } |
| 126 | +const vm = new Vue() |
| 127 | +const { code, data, message } = await vm.$jsonp<{ |
| 128 | + code: number, |
| 129 | + message: string, |
| 130 | + data: { |
| 131 | + id: number, |
| 132 | + nickname: string |
66 | 133 | }
|
| 134 | +}>('/my-awesome-url', { |
| 135 | + name: 'MyName', age: 20 |
67 | 136 | })
|
68 | 137 |
|
69 |
| -// Static Function. |
70 |
| -// Request url will be 'http://www.some-site.com/data?name=MyName&age=20&cb=jsonpFunc' |
71 |
| -Vue.jsonp('http://www.some-site.com/data', { |
72 |
| - name: 'MyName', age: 20, callbackQuery: 'cb', callbackName: 'jsonpFunc' |
73 |
| -}).then(json => { |
74 |
| - // Success. |
75 |
| -}).catch(err => { |
76 |
| - // Failed. |
77 |
| -}) |
| 138 | +assert(code === 0) |
| 139 | +assert(message === 'ok') |
| 140 | +assert(data.id === 1) |
| 141 | +assert(data.nickname === 'John Smith') |
78 | 142 | ```
|
| 143 | + |
| 144 | +```ts |
| 145 | +import { jsonp } from 'vue-jsonp' |
| 146 | + |
| 147 | +const result = await jsonp<string>('/my-awesome-url') |
| 148 | +assert(result === 'such a jsonp') |
| 149 | +``` |
| 150 | + |
79 | 151 | ## License
|
80 |
| -MIT. |
| 152 | + |
| 153 | +MIT |
0 commit comments