zhdd-request - npm Package Compare versions

Comparing version 1.0.4 to 2.0.0

lib/zhdd-request.js

 import axios from 'axios'
 import qs from 'qs'
+import { download } from './public'
 
@@ -10,255 +11,291 @@ /**
  ** */
-const servicesBaseUrl = {}
+
+// base url
 let baseurl = ''
+// 请求配置
+let requestConfig = {}
+// 多服务域名配置
 let servicesConfig = {}
-let successFunction = null
-let errorFunction = null
-let beforeFunction = null
+let servicesRequest = {}
 
+// 拦截器
+let successInterceptor = null
+let errorInterceptor = null
+let beforeInterceptor = null
+
 /**
- * servicesBaseUrl 配置
+ * 设置请求 配置
  * @param {Object} config      初始配置
- * @param {Object} servicesUrl 多个域名配置
+ * @param {Object} services 多个服务域名配置
  * */
-const configDefaultConfig = (config = {}, servicesUrl = []) => {
-  // 多域名配置
-  if (servicesUrl && servicesUrl.length > 0) {
-    for (const service of servicesUrl) {
-      servicesBaseUrl[service.servicesName] = service
+const setRequestConfig = (config = {}, services = []) => {
+    // 多服务域名配置
+    if (services && services.length > 0) {
+        for (const service of services) {
+            servicesConfig[service.name] = service
+        }
+        baseurl = services[0].url
+        createServersRequest()
     }
-    baseurl = servicesUrl[0].servicesUrl
-  }
 
-  // 单个域名配置
-  if (!baseurl) {
-    baseurl = config.baseURL
-  }
+    // 单个服务域名配置
+    if (!baseurl) {
+        baseurl = config.baseURL
+    }
 
-  Object.assign(servicesConfig, config)
+    Object.assign(requestConfig, config)
 }
 
 /**
- * 拦截器
- * @param {Function} fun 回调函数
- * @param {String} type 回调类型 默认为 SUCCESS
+ * 设置拦截器
+ * @param {Function} fun  拦截器函数
+ * @param {String} type  拦截器类型 默认为 SUCCESS
  */
-const requestCallback = (fun, type = 'SUCCESS') => {
-  if (type === 'SUCCESS' && typeof fun === 'function') {
-    // 请求成功回调
-    successFunction = fun
-    return
-  }
-  if (type === 'ERROR' && typeof fun === 'function') {
-    // 请求失败回调
-    errorFunction = fun
-    return
-  }
+const setInterceptor = (fun, type = 'SUCCESS') => {
+    if (type === 'SUCCESS' && typeof fun === 'function') {
+        // 请求成功 拦截器
+        successInterceptor = fun
+        return
+    }
+    if (type === 'ERROR' && typeof fun === 'function') {
+        // 请求失败 拦截器
+        errorInterceptor = fun
+        return
+    }
 
-  if (type === 'BEFORE' && typeof fun === 'function') {
-    // 请求之前回调
-    beforeFunction = fun
-    return
-  }
+    if (type === 'BEFORE' && typeof fun === 'function') {
+        // 请求之前 拦截器
+        beforeInterceptor = fun
+        return
+    }
 }
 
 class Request {
-  constructor(servicesName = null, timeout) {
-    // create axios
-    this.instance = axios.create({
-      baseURL: servicesName ? servicesBaseUrl[servicesName].servicesUrl : baseurl,
-      timeout: timeout ? timeout : servicesConfig.timeout,
-      headers: servicesConfig.headers ? servicesConfig.headers : {}
-    })
+    constructor(serviceName = null, timeout) {
+        // create axios
+        this.instance = axios.create({
+            baseURL: serviceName ? servicesConfig[serviceName].url : baseurl,
+            timeout: timeout ? timeout : requestConfig.timeout,
+            headers: requestConfig.headers ? requestConfig.headers : {}
+        })
 
-    this.config = {}
+        this.config = {
+            dataType: 'json' // 默认返回json类型的数据格式
+        }
 
-    this.type = 'json' // json formdata urlencoded
+        this.type = 'json' // json formdata urlencoded
 
-    // 参数
-    this.paramData = {}
+        // 参数
+        this.paramData = {}
 
-    // axios 传参
-    this.axiosConfig = null
-  }
+        // axios 传参
+        this.axiosConfig = null
+    }
 
-  /**
-   * 直接用axios方法调用
-   * setAxios 调用后 setParameters 无效
-   * @param {Object} config axios传参
-   * {
-   *  url: '',
-   *  method: 'get',
-   *  params | data
-   * }
-   */
-  setAxios(config) {
-    return this.instanceRequest(config)
-  }
+    /**
+     * 直接用axios方法调用
+     * setAxios 调用后 setParameters 无效
+     * @param {Object} config axios传参
+     * {
+     *  url: '',
+     *  method: 'get',
+     *  params | data
+     * }
+     */
+    setAxios(config) {
+        return this.instanceRequest(config)
+    }
 
-  /**
-   * 设置请求参数对象
-   *
-   * @param {Array} obj  传参对象
-   * @param {String} type 传参类型  json formdata urlencoded
-   * */
-  setParameters(paramData, type = 'json') {
-    this.paramData = paramData
-    this.type = type
-    return this
-  }
+    /**
+     * 设置请求参数对象
+     *
+     * @param {Array} obj  传参对象
+     * @param {String} type 传参类型  json formdata urlencoded
+     * */
+    setParameters(paramData, type = 'json') {
+        this.paramData = paramData
+        this.type = type
+        return this
+    }
 
-  /**
-   * 添加参数
-   * @param {String} key
-   * @param {String} value
-   * */
-  add(key, value) {
-    this.paramData[key] = value
-    return this
-  }
+    /**
+     * 添加参数
+     * @param {String} key
+     * @param {String} value
+     * */
+    add(key, value) {
+        this.paramData[key] = value
+        return this
+    }
 
-  /**
-   * 请求方法
-   *
-   * @param url 请求地址
-   * @param method 方法名
-   * @return 开始请求 Promise
-   * */
-  request(url, method) {
-    const data = this.type === 'formdata' ? new FormData() : {}
-    // config 配置
-    this.config.url = url
-    this.config.method = method
-    this.config.headers = Object.assign({
-      'Content-Type': 'application/x-www-form-urlencoded'
-    }, servicesConfig.headers)
+    /**
+     * 请求方法
+     *
+     * @param url 请求地址
+     * @param method 方法名
+     * @return 开始请求 Promise
+     * */
+    request(url, method, config = {}) {
+        // set config
+        Object.assign(this.config, config)
 
-    // 拼接请求参数
-    this.paramData && Object.keys(this.paramData).forEach(key => {
-      const reger = new RegExp('{' + key + '}')
-      if (reger.test(url)) {
-        this.config.url = url.replace(reger, this.paramData[key])
-      } else {
-        if (this.type === 'formdata') {
-          data.append(key, this.paramData[key])
+        // header config
+        this.config.headers = Object.assign({
+            'Content-Type': 'application/x-www-form-urlencoded'
+        }, requestConfig.headers)
+
+        // base config
+        this.config.url = url
+        this.config.method = method
+
+        const data = this.type === 'formdata' ? new FormData() : {}
+
+        // 拼接请求参数
+        this.paramData && Object.keys(this.paramData).forEach(key => {
+            const reger = new RegExp('{' + key + '}')
+            if (reger.test(url)) {
+                this.config.url = url.replace(reger, this.paramData[key])
+            } else {
+                if (this.type === 'formdata') {
+                    data.append(key, this.paramData[key])
+                } else {
+                    data[key] = this.paramData[key]
+                }
+            }
+        })
+
+        // params是添加到url的请求字符串中的
+        // data是添加到请求体（body）中的
+        if (method === 'GET') {
+            this.config.params = data
         } else {
-          data[key] = this.paramData[key]
+            // Only applicable for request methods 'PUT', 'POST', 'DELETE , and 'PATCH'
+            switch (this.type) {
+                case 'json':
+                    this.config.data = data
+                    this.config.headers['Content-Type'] = 'application/json'
+                    break
+                case 'urlencoded':
+                    this.config.data = qs.stringify(data)
+                    this.config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
+                    break
+                case 'formdata':
+                    this.config.data = data
+                    this.config.headers['Content-Type'] = 'multipart/form-data'
+                    break
+                default:
+                    break
+            }
         }
-      }
-    })
 
-    // params是添加到url的请求字符串中的
-    // data是添加到请求体（body）中的
-    if (method === 'GET') {
-      this.config.params = data
-    } else {
-      // post的三种 Content-Type
-      switch (this.type) {
-        case 'json':
-          this.config.data = data
-          this.config.headers['Content-Type'] = 'application/json'
-          break
-        case 'urlencoded':
-          this.config.data = qs.stringify(data)
-          this.config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
-          break
-        case 'formdata':
-          this.config.data = data
-          this.config.headers['Content-Type'] = 'multipart/form-data'
-          break
-        default:
-          break
-      }
+        return this.instanceRequest(this.config)
     }
+    /**
+     * 开始请求
+     * @param {Object} config 请求参数
+     * @returns Promise
+     */
+    instanceRequest(config) {
+        return new Promise((resolve, reject) => {
+            beforeInterceptor && beforeInterceptor(config, resolve, reject)
+            this.instance(config).then((response) => {
+                if (response.status === 200) {
+                    successInterceptor && successInterceptor(response, resolve, reject)
+                    resolve(response.data)
+                } else {
+                    console.error('HTTP请求失败,请求地址:' + this.config.url + ',操作失败，失败信息:', response.statusText)
+                    reject(response)
+                }
+            }).catch((error) => {
+                errorInterceptor && errorInterceptor(error, resolve, reject)
+                console.error('HTTP请求失败,请求地址:' + this.config.url + ',请求出现错误，异常信息', error)
+                reject(error)
+            })
+        })
+    }
 
-    // 默认返回json类型的数据格式
-    if (!this.config.dataType) {
-      this.config.dataType = 'json'
+    /**
+     * post请求
+     * @param {String} url    请求地址
+     * @param {Object} config 请求配置
+     * @return promise
+     * */
+    post(url, config) {
+        return this.request(url, 'POST', config)
     }
-    return this.instanceRequest(this.config)
-  }
-  /**
-   * 开始请求
-   * @param {Object} config 请求参数
-   * @returns Promise
-   */
-  instanceRequest(config) {
-    return new Promise((resolve, reject) => {
-      beforeFunction && beforeFunction(config, resolve, reject)
-      this.instance(config).then((response) => {
-        if (response.status === 200) {
-          successFunction && successFunction(response, resolve, reject)
-          resolve(response.data)
-        } else {
-          console.error('HTTP请求失败,请求地址:' + this.config.url + ',操作失败，失败信息:', response.statusText)
-          reject(response)
-        }
-      }).catch((error) => {
-        errorFunction && errorFunction(error, resolve, reject)
-        console.error('HTTP请求失败,请求地址:' + this.config.url + ',请求出现错误，异常信息', error)
-        reject(error)
-      })
-    })
-  }
 
-  /**
-   * post请求
-   *
-   * @param url 请求地址
-   * @return promise
-   * */
-  post(url) {
-    return this.request(url, 'POST')
-  }
+    /**
+     * get请求
+     * @param {String} url    请求地址
+     * @param {Object} config 请求配置
+     * @return promise
+     * */
+    get(url, config) {
+        return this.request(url, 'GET', config)
+    }
 
-  /**
-   * get请求
-   *
-   * @param url 请求地址
-   * @return promise
-   * */
-  get(url) {
-    return this.request(url, 'GET')
-  }
+    /**
+     * put请求
+     * @param {String} url    请求地址
+     * @param {Object} config 请求配置
+     * @return promise
+     * */
+    put(url, config) {
+        return this.request(url, 'PUT', config)
+    }
 
-  /**
-   * put请求
-   *
-   * @param url 请求地址
-   * @return promise
-   * */
-  put(url) {
-    return this.request(url, 'PUT')
-  }
+    /**
+     * delete请求
+     * @param {String} url    请求地址
+     * @param {Object} config 请求配置
+     * @return promise
+     * */
+    delete(url, config) {
+        return this.request(url, 'DELETE', config)
+    }
 
-  /**
-   * delete请求
-   *
-   * @param url 请求地址
-   * @return promise
-   * */
-  delete(url) {
-    return this.request(url, 'DELETE')
+    /**
+     * 文件请求
+     * @param {String} url    请求地址
+     * @param {Object} config 请求配置
+     * @return promise
+     */
+    file(url, config) {
+        return new Promise((resolve, reject) => {
+            try {
+                config = {
+                    method: 'GET',
+                    responseType: 'blob',
+                    ...config
+                }
+                this.request(url, config.method, config).then(res => {
+                  // 下载文件
+                  download(res, config.fileType, config.fileName)
+                  resolve(res, config)
+                }).catch(e => reject(e))
+            } catch (e) {
+                reject(e)
+            }
+        })
+    }
+    /**
+     * 文件url 打开
+     * @param url 请求地址
+     * @param openUrl 是否直接打开url
+     * @return promise
+     */
+     fileUrl(url, openUrl = true) {
+      return new Promise((resolve, reject) => {
+          try {
+              const href = `${this.instance.defaults.baseURL + url}?${qs.stringify(this.parameters)}`
+              if (openUrl) {
+                  console.log('下载文件流:', href)
+                  window.open(href)
+              }
+              resolve(href)
+          } catch (e) {
+              reject(e)
+          }
+      })
   }
-
-  /**
-   * 下载文件流
-   * @param url 请求地址
-   * @param openUrl 是否直接打开url
-   * @return promise
-   */
-  download(url, openUrl = true) {
-    return new Promise((resolve, reject) => {
-      try {
-        const href = `${this.config.baseURL + url}?${qs.stringify(this.parameters)}`
-        if (openUrl) {
-          console.log('下载文件流:', href)
-          window.open(href)
-        }
-        resolve(href)
-      } catch (e) {
-        reject(e)
-      }
-    })
-  }
 }
@@ -268,14 +305,26 @@
  * 创建请求对象
- * @param {String} servicesName 域名类型
+ * @param {String} serviceName 服务域名类型
  * @param {Number} timeout 超时时间
  * @returns 
  */
-const createRequest = (servicesName, timeout) => {
-  return new Request(servicesName, timeout)
+const createRequest = (serviceName, timeout) => {
+    return new Request(serviceName, timeout)
 }
 
+/**
+ * 创建不同服务的请求
+ */
+const createServersRequest = () => {
+  for (const key in servicesConfig) {
+    servicesRequest[key] = () => {
+      return new Request(key)
+    }
+  }
+}
+
 export {
-  createRequest,
-  configDefaultConfig,
-  requestCallback
+    createRequest,
+    setRequestConfig,
+    setInterceptor,
+    servicesRequest
 }

package.json

 {
   "name": "zhdd-request",
-  "version": "1.0.4",
+  "version": "2.0.0",
   "private": false,
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -1,3 +0,3 @@
-# axios 请求封装
-> 研发人:朱琦
+# zhdd-request
+> 研发人: 朱琦
 
@@ -8,5 +8,5 @@ > 研发日期: 2022/1/10
 ## 简介
-zhdd-request 插件是基于 [axios](http://www.axios-js.com/)，[qs](https://www.npmjs.com/package/qs) 开发的请求封装，可以支持多域名请求
+zhdd-request 插件是基于 [axios](http://www.axios-js.com/)，[qs](https://www.npmjs.com/package/qs) 开发的请求封装，可以支持多服务域名请求
 
-## 使用方式
+## 快速使用
 ### 安装
@@ -18,5 +18,5 @@ ```
 
-* 1.初始化配置 vue main.js为例
+#### 初始化配置 vue main.js为例
 ```
-import { configDefaultConfig, requestCallback } from 'zhdd-request'
+import { setRequestConfig, setInterceptor } from 'zhdd-request'
 
@@ -26,5 +26,5 @@ /**
  * @param {Object} config      初始配置
- * @param {Object} servicesUrl 多个域名配置
+ * @param {Object} services 多个服务域名配置
  * */
-configDefaultConfig(
+setRequestConfig(
   // config 初始配置 可设置baseUrl timeout headers
@@ -36,60 +36,23 @@ {
   },
-  // servicesUrl 多个域名配置, 可不传 不传时config.baseURL 为必传
+  // services 多个服务域名配置, 可不传 不传时config.baseURL 为必传
   [
     {
-      // 默认域名 第一个
-      servicesName: 'BASE_SERVER',
-      servicesUrl: process.env.VUE_APP_BASE_API
+      // 默认服务域名 第一个
+      name: 'BASE_SERVER',
+      url: process.env.VUE_APP_BASE_API
     },
     {
-      // 其他域名
-      servicesName: 'JTQG_SERVER',
-      servicesUrl: process.env.VUE_APP_JTQG_SERVER_BASE_API
+      // 其他服务域名
+      name: 'JTQG_SERVER',
+      url: process.env.VUE_APP_JTQG_SERVER_BASE_API
     },
   ]
 )
-
-/**
- * 拦截器
- * @param {Function} fun 回调函数
- * @param {String} type 回调类型 默认为 SUCCESS 即请求成功时
- */
-requestCallback(fun, type)
 ```
-> 若后续需要设置headers 可再次调用configDefaultConfig(config)
+> 若后续需要设置headers 可再次调用setRequestConfig(config)
 
-* 2.实际应用(以vue为例)
+### 使用
 ```
 import { createRequest } from 'zhdd-request'
 
-// 使用方法
-
-// 1.配置域名 传参为空时 使用默认域名
-createRequest() // 等于 createRequest('BASE_SERVER')
-
-// 2.设置当前 请求超时 时间
-createRequest(null,timeout)
-
-// 3.使用setParameters(object) 传参
-createRequest().setParameters(object)
-
-// 4.使用add方法添加参数
-createRequest().add('key','value')
-
-// 5.使用get请求
-createRequest().add('key','value').get(url)
-
-// 6.POST请求 默认 application/json
-createRequest().setParameters(object).post(url)
-
-// 7.POST请求 请求格式为 multipart/form-data   传参一定要是个对象，不能是formData类型
-createRequest().setParameters(object,'formdata').post(url)
-
-// 8.POST请求 请求格式为 application/x-www-form-urlencoded
-createRequest().setParameters(object,'urlencoded').post(url)
-
-// 9.下载文件流, openUrl 是否直接打开url
-createRequest().setParameters(object).download(url,openUrl)
-
-
 /**
@@ -99,3 +62,3 @@ * 实例1
 getList (params) {
-  return createRequest().setParameters(params).get('/event/listForJtqg')
+  return createRequest().setParameters(params).get('/event/list')
 }
@@ -115,2 +78,136 @@
 }
-```
+```
+## 使用方法详解
+- `createRequest()` 
+  > 创建请求类，传参为空时 使用默认服务域名
+  ```
+  createRequest() 
+  // 等同于
+  createRequest('BASE_SERVER')
+  ```
+
+- 设置当前 请求超时 时间
+  ```
+  createRequest('BASE_SERVER',timeout)
+  ```
+
+- `setParameters(object)` 传参
+  ```
+  createRequest().setParameters(object)
+  ```
+
+- `add()` 添加参数
+  ```
+  createRequest().add('key','value')
+  ```
+
+- `get()` GET请求
+  ```
+  createRequest().add('key','value').get(url)
+  ```
+
+- `post()` POST请求 
+  > 默认 application/json
+  ```
+  createRequest().setParameters(object).post(url)
+  ```
+
+- post() POST请求 `setParameters(object,'formdata')`
+  > 请求类型为 multipart/form-data   传参一定要是个对象，不能是formData类型
+  ```
+  createRequest().setParameters(object,'formdata').post(url)
+  ```
+
+- post() POST请求 `setParameters(object,'urlencoded')`
+  
+  > 请求类型为 application/x-www-form-urlencoded
+  ```
+  createRequest().setParameters(object,'urlencoded').post(url)
+  ```
+
+- `delete()` DELETE请求 
+  ```
+  createRequest().setParameters(object).delete(url)
+  ```
+
+- delete() DELETE请求 `setParameters(object,'urlencoded')`
+  > 请求类型为 application/x-www-form-urlencoded
+  ```
+  createRequest().setParameters(object,'urlencoded').delete(url)
+  ```
+
+- put() PUT请求 
+  ```
+  createRequest().setParameters(object).put(url)
+  ```
+- url `拼接参数`
+  ```
+  createRequest().setParameters({id:123, type:0}).get(url/{id}/{type})
+  ```
+
+- `file()` 下载文件流 
+```
+createRequest().setParameters(object).file(url, config)
+```
+**config [Object] 配置**
+| config | 类型 |说明 |
+| -- | -- | -- |
+fileType | String | 下载文件类型
+fileName | String | 下载文件名
+
+关于fileType文件类型，可取值：
+| config | 类型 |说明 |
+| -- | -- | -- |
+fileType | String | 下载文件类型
+fileName | String | 下载文件名
+
+- `fileUrl()` 获取url链接
+```
+createRequest().setParameters(object).fileUrl(url, openUrl)
+```
+**openUrl [Boolean] 是否打开url 默认为tru**e
+
+为 true 时，会直接通过 window.open(href) 打开连接
+为 false时，可以通过then回调获取url
+
+## 方法
+### setRequestConfig(config, services) 设置请求配置
+1. config [Object] 请求基础配置
+
+| config | 类型 |说明 |
+| -- | -- | -- |
+baseURL | String | 默认服务域名
+timeout | Number | 接口超时时间设置 非必传 
+headers | Object |请求头 非必传 
+
+2. services [Object] 请求多服务域名配置
+```
+[{
+    name: "BASE_SERVER",
+    url: process.env.VUE_APP_BASE_API
+ },
+ {
+    name: "JTQG_SERVER",
+    url: process.env.VUE_APP_JTQG_SERVER_BASE_API
+ },
+ ...
+]
+```
+### createRequest(servicesName, timeout) 创建请求类
+1. servicesName [String] 服务名
+
+2. timeout [Number] 超时时间
+
+### setInterceptor(fun, type) 拦截器
+1. fun [Function] 拦截器触发的回调函数
+
+fun(res)
+- res： 当前状态返回信息
+
+1. type [String] 拦截器类型
+
+| type | 类型 |说明 |
+| -- | -- | -- |
+SUCCESS | String | 请求成功时
+ERROR | String | 请求失败时
+BEFORE |  String |请求之前时

No alert changes

Improved metrics

Total package byte prevSize

14903

increased by52.32%

Number of package files

5

increased by25%

Lines of code

318

increased by25.2%

Number of lines in readme file

207

increased by88.18%

No dependency changes