|
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