You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

153 lines
2.9 KiB

2 weeks ago
  1. # Vue-jsonp
  2. [![VueJsonp](https://github.com/LancerComet/vue-jsonp/workflows/Test/badge.svg)](https://github.com/LancerComet/vue-jsonp/actions)
  3. A tiny library for handling JSONP request.
  4. ## Quick Start
  5. As Vue plugin:
  6. ```ts
  7. import { VueJsonp } from 'vue-jsonp'
  8. // Vue Plugin.
  9. Vue.use(VueJsonp)
  10. // Now you can use this.$jsonp in Vue components.
  11. const vm = new Vue()
  12. vm.$jsonp('/some-jsonp-url', {
  13. myCustomUrlParam: 'veryNice'
  14. })
  15. ```
  16. Use function directly:
  17. ```ts
  18. import { jsonp } from 'vue-jsonp'
  19. jsonp('/some-jsonp-url', {
  20. myCustomUrlParam: 'veryNice'
  21. })
  22. ```
  23. ## Send data and set query & function name
  24. ### Send data
  25. ```ts
  26. // The request url will be "/some-jsonp-url?name=LancerComet&age=100&callback=jsonp_{RANDOM_STR}".
  27. jsonp('/some-jsonp-url', {
  28. name: 'LancerComet',
  29. age: 100
  30. })
  31. ```
  32. ### Custom query & function name
  33. The url uniform is `/url?{callbackQuery}={callbackName}&...`, the default is `/url?callback=jsonp_{RANDOM_STRING}&...`.
  34. And you can change it like this:
  35. ```ts
  36. // The request url will be "/some-jsonp-url?name=LancerComet&age=100&cb=jsonp_func".
  37. jsonp('/some-jsonp-url', {
  38. callbackQuery: 'cb',
  39. callbackName: 'jsonp_func',
  40. name: 'LancerComet',
  41. age: 100
  42. })
  43. ```
  44. ## Module exports
  45. - `VueJsonp: PluginObject<never>`
  46. - `jsonp<T>: (url: string, param?: IJsonpParam, timeout?: number) => Promise<T>`
  47. ## API
  48. ### IJsonpParam
  49. IJsonpParam is the type of param for jsonp function.
  50. ```ts
  51. /**
  52. * JSONP parameter declaration.
  53. */
  54. interface IJsonpParam {
  55. /**
  56. * Callback query name.
  57. * This param is used to define the query name of the callback function.
  58. *
  59. * @example
  60. * // The request url will be "/some-url?myCallback=jsonp_func&myCustomUrlParam=veryNice"
  61. * jsonp('/some-url', {
  62. * callbackQuery: 'myCallback',
  63. * callbackName: 'jsonp_func',
  64. * myCustomUrlParam: 'veryNice'
  65. * })
  66. *
  67. * @default callback
  68. */
  69. callbackQuery?: string
  70. /**
  71. * Callback function name.
  72. * This param is used to define the jsonp function name.
  73. *
  74. * @example
  75. * // The request url will be "/some-url?myCallback=jsonp_func&myCustomUrlParam=veryNice"
  76. * jsonp('/some-url', {
  77. * callbackQuery: 'myCallback',
  78. * callbackName: 'jsonp_func',
  79. * myCustomUrlParam: 'veryNice'
  80. * })
  81. *
  82. * @default jsonp_ + randomStr()
  83. */
  84. callbackName?: string
  85. /**
  86. * Custom data.
  87. */
  88. [key: string]: any
  89. }
  90. ```
  91. ## Example
  92. ```ts
  93. import Vue from 'vue'
  94. import { VueJsonp } from 'vue-jsonp'
  95. Vue.use(VueJsonp)
  96. const vm = new Vue()
  97. const { code, data, message } = await vm.$jsonp<{
  98. code: number,
  99. message: string,
  100. data: {
  101. id: number,
  102. nickname: string
  103. }
  104. }>('/my-awesome-url', {
  105. name: 'MyName', age: 20
  106. })
  107. assert(code === 0)
  108. assert(message === 'ok')
  109. assert(data.id === 1)
  110. assert(data.nickname === 'John Smith')
  111. ```
  112. ```ts
  113. import { jsonp } from 'vue-jsonp'
  114. const result = await jsonp<string>('/my-awesome-url')
  115. assert(result === 'such a jsonp')
  116. ```
  117. ## License
  118. MIT