Develop (#42)

* + Update dev dependencies.

* + Update document. (#16)

* + Add array indicator option.

* + Fix for #41.

Author: LancerComet

README.md

@@ -1,5 +1,6 @@
 # Vue-jsonp
 
+[![npm version](https://badge.fury.io/js/vue-jsonp.svg)](https://badge.fury.io/js/vue-jsonp)
 [![VueJsonp](https://github.com/LancerComet/vue-jsonp/workflows/Test/badge.svg)](https://github.com/LancerComet/vue-jsonp/actions)
 
 A tiny library for handling JSONP request.
@@ -14,9 +15,9 @@ import { VueJsonp } from 'vue-jsonp'
 // Vue Plugin.
 Vue.use(VueJsonp)
 
-// Now you can use this.$jsonp in Vue components.
+// Now you can use "$jsonp" on Vue components.
 const vm = new Vue()
-vm.$jsonp('/some-jsonp-url', {
+const data = await vm.$jsonp('/some-jsonp-url', {
   myCustomUrlParam: 'veryNice'
 })
 ```
@@ -26,7 +27,8 @@ Use function directly:
 ```ts
 import { jsonp } from 'vue-jsonp'
 
-jsonp('/some-jsonp-url', {
+// Pass a response type.
+const data = await jsonp<string>('/some-jsonp-url', {
   myCustomUrlParam: 'veryNice'
 })
 ```
@@ -36,26 +38,26 @@ jsonp('/some-jsonp-url', {
 ### 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
+// The request url will be "/some-jsonp-url?type=admin&date=2020&callback=jsonp_{RANDOM_STR}".
+const data = await jsonp('/some-jsonp-url', {
+  type: 'admin',
+  date: 2020
 })
 ```
 
 ### Custom query & function name
 
-The url uniform is `/url?{callbackQuery}={callbackName}&...`, the default is `/url?callback=jsonp_{RANDOM_STRING}&...`.
+The url uniform is `/url?{callbackQuery}={callbackName}&...` and 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".
+// The request url will be "/some-jsonp-url?type=admin&date=2020&cb=jsonp_func".
 jsonp('/some-jsonp-url', {
   callbackQuery: 'cb',
   callbackName: 'jsonp_func',
-  name: 'LancerComet',
-  age: 100
+  type: 'admin',
+  date: 2020
 })
 ```
 
@@ -82,7 +84,7 @@ interface IJsonpParam {
    *
    * @example
    * // The request url will be "/some-url?myCallback=jsonp_func&myCustomUrlParam=veryNice"
-   * jsonp('/some-url', {
+   * const result = await jsonp('/some-url', {
    *   callbackQuery: 'myCallback',
    *   callbackName: 'jsonp_func',
    *   myCustomUrlParam: 'veryNice'
@@ -98,7 +100,7 @@ interface IJsonpParam {
    *
    * @example
    * // The request url will be "/some-url?myCallback=jsonp_func&myCustomUrlParam=veryNice"
-   * jsonp('/some-url', {
+   * const result = await jsonp('/some-url', {
    *   callbackQuery: 'myCallback',
    *   callbackName: 'jsonp_func',
    *   myCustomUrlParam: 'veryNice'

lib/index.ts

@@ -20,7 +20,10 @@ declare module 'vue/types/vue' {
 }
 
 /**
- * Vue JSONP.
+ * JSONP Vue plugin.
+ *
+ * @example
+ * Vue.use(VueJsonp)
  */
 // tslint:disable-next-line:variable-name
 const VueJsonp: PluginObject<never> = {
@@ -30,24 +33,26 @@ const VueJsonp: PluginObject<never> = {
 }
 
 /**
- * JSONP function.
+ * Make a json request.
  *
- * @param { string } url Target URL address.
- * @param { IJsonpParam } param Querying params object.
- * @param { number } timeout Timeout setting (ms).
+ * @template T
+ * @param {string} url Target URL address.
+ * @param {IJsonpParam} [param={}] Querying params object.
+ * @param {number} [timeout] Timeout setting (ms).
+ * @returns {Promise<T>}
  *
  * @example
- * jsonp('/url', {
- *   callbackQuery: ''
- *   callbackName: '',
- *   name: 'LancerComet',
- *   age: 26
- * }, 1000)
+ * const data = await jsonp<string>('/url', {
+ *   type: 'admin',
+ *   date: '2020'
+ * })
  */
+function jsonp<T = any> (url: string, param?: IJsonpParam, timeout?: number): Promise<T>
+function jsonp<T = any> (url: string, param?: IJsonpParam, config?: IConfig): Promise<T>
 function jsonp<T = any> (
   url: string,
   param: IJsonpParam = {},
-  timeout?: number
+  config?: undefined | number | IConfig
 ): Promise<T> {
   if (typeof url !== 'string') {
     throw new Error('[Vue-jsonp] Type of param "url" is not string.')
@@ -57,9 +62,17 @@ function jsonp<T = any> (
     throw new Error('[Vue-jsonp] Invalid params, should be an object.')
   }
 
-  timeout = typeof timeout === 'number'
-    ? timeout
-    : DEFAULT_TIMEOUT
+  const timeout = typeof config === 'number'
+    ? config
+    : config?.timeout ?? DEFAULT_TIMEOUT
+
+  let arrayIndicator = '[]'
+  if (typeof config === 'object') {
+    const _indicator = config.arrayIndicator
+    if (typeof _indicator === 'string') {
+      arrayIndicator = _indicator
+    }
+  }
 
   return new Promise<T>((resolve, reject) => {
     const callbackQuery = typeof param.callbackQuery === 'string'
@@ -78,7 +91,7 @@ function jsonp<T = any> (
     // Convert params to querying str.
     let queryStrs: (string[])[] = []
     Object.keys(param).forEach(queryKey => {
-      queryStrs = queryStrs.concat(formatParams(queryKey, param[queryKey]))
+      queryStrs = queryStrs.concat(formatParams(queryKey, param[queryKey], arrayIndicator))
     })
 
     const queryStr = flatten(queryStrs).join('&')
@@ -151,7 +164,7 @@ interface IJsonpParam {
    *
    * @example
    * // The request url will be "/some-url?myCallback=jsonp_func&myCustomUrlParam=veryNice"
-   * jsonp('/some-url', {
+   * const result = await jsonp('/some-url', {
    *   callbackQuery: 'myCallback',
    *   callbackName: 'jsonp_func',
    *   myCustomUrlParam: 'veryNice'
@@ -167,7 +180,7 @@ interface IJsonpParam {
    *
    * @example
    * // The request url will be "/some-url?myCallback=jsonp_func&myCustomUrlParam=veryNice"
-   * jsonp('/some-url', {
+   * const result = await jsonp('/some-url', {
    *   callbackQuery: 'myCallback',
    *   callbackName: 'jsonp_func',
    *   myCustomUrlParam: 'veryNice'
@@ -182,3 +195,29 @@ interface IJsonpParam {
    */
   [key: string]: any
 }
+
+/**
+ * JSONP Config.
+ */
+interface IConfig {
+  /**
+   * Request timeout, ms.
+   *
+   * @default 5000
+   */
+  timeout?: number
+
+  /**
+   * This is the indicator that used in query string to indicate arrays.
+   *
+   * @example
+   * // When you pass a '[]' or nothing:
+   * a[]=1&a[]=2&a[]=3  // This form is used widely.
+   *
+   * // An empty sring was passed:
+   * a=1&a=2&a=3  // This is a custom example.
+   *
+   * @default '[]'
+   */
+  arrayIndicator?: string
+}

lib/utils/index.ts

@@ -12,10 +12,14 @@ function randomStr () {
  *
  * @return {string[]}
  */
-function formatParams (queryKey: string, value: any): string[] {
+function formatParams (queryKey: string, value: any, arrayIndicator: string = '[]'): string[] {
   queryKey = queryKey.replace(/=/g, '')
   let result: string[] = []
 
+  if (value === null || typeof value === 'undefined') {
+    return result
+  }
+
   switch (value.constructor) {
     case String:
     case Number:
@@ -25,14 +29,14 @@ function formatParams (queryKey: string, value: any): string[] {
 
     case Array:
       value.forEach(function (item) {
-        result = result.concat(formatParams(queryKey + '[]=', item))
+        result = result.concat(formatParams(`${queryKey}${arrayIndicator}=`, item, arrayIndicator))
       })
       break
 
     case Object:
       Object.keys(value).forEach(function (key) {
         const item = value[key]
-        result = result.concat(formatParams(queryKey + '[' + key + ']', item))
+        result = result.concat(formatParams(queryKey + '[' + key + ']', item, arrayIndicator))
       })
       break
   }