|
@@ -1,153 +0,0 @@
|
|
|
-# 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 this.$jsonp in Vue components.
|
|
|
-const vm = new Vue()
|
|
|
-vm.$jsonp('/some-jsonp-url', {
|
|
|
- myCustomUrlParam: 'veryNice'
|
|
|
-})
|
|
|
-```
|
|
|
-
|
|
|
-Use function directly:
|
|
|
-
|
|
|
-```ts
|
|
|
-import { jsonp } from 'vue-jsonp'
|
|
|
-
|
|
|
-jsonp('/some-jsonp-url', {
|
|
|
- myCustomUrlParam: 'veryNice'
|
|
|
-})
|
|
|
-```
|
|
|
-
|
|
|
-## Send data and set query & function name
|
|
|
-
|
|
|
-### Send data
|
|
|
-
|
|
|
-```ts
|
|
|
-// 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:
|
|
|
-
|
|
|
-```ts
|
|
|
-// 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.
|
|
|
-
|
|
|
-```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"
|
|
|
- * 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
|
|
|
-
|
|
|
-```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<string>('/my-awesome-url')
|
|
|
-assert(result === 'such a jsonp')
|
|
|
-```
|
|
|
-
|
|
|
-## License
|
|
|
-
|
|
|
-MIT
|