zhdd-request
研发人: 朱琦
研发日期: 2022/1/10
简介
zhdd-request 插件是基于 axios,qs 开发的请求封装,可以支持多服务域名请求
快速使用
安装
npm i zhdd-request
引入
初始化配置 vue main.js为例
import { setRequestConfig, setInterceptor } from 'zhdd-request'
/**
* 初始化 配置
* @param {Object} config 初始配置
* @param {Object} services 多个服务域名配置
* */
setRequestConfig(
// config 初始配置 可设置baseUrl timeout headers
{
baseURL: process.env.VUE_APP_BASE_API,
timeout: 3000, // 非必传 接口超时时间设置
headers: {}, // 非必传 请求头
},
// services 多个服务域名配置, 可不传 不传时config.baseURL 为必传
[
{
// 默认服务域名 第一个
name: 'BASE_SERVER',
url: process.env.VUE_APP_BASE_API
},
{
// 其他服务域名
name: 'JTQG_SERVER',
url: process.env.VUE_APP_JTQG_SERVER_BASE_API
},
]
)
若后续需要设置headers 可再次调用setRequestConfig(config)
使用
import { createRequest } from 'zhdd-request'
/**
* 实例1
* */
getList (params) {
return createRequest().setParameters(params).get('/event/list')
}
/**
* 实例2
* 用setAxios请求
* 传参方法遵循 axios
* */
getList (params) {
return createRequest().setAxios({
url: '/event/listForJtqg',
method: 'get',
params
})
}
使用方法详解
-
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文件类型,可取值:
拓展名 | 文件类型 | fileType |
---|
.jpg 、.jpeg | JPEG 图片 | image/jpeg |
.png | PNG 图片 | image/png |
.json | JSON 格式 | application/json |
.pdf | PDF | application/pdf |
.ppt | Microsoft PowerPoint | application/vnd.ms-powerpoint |
.xls | Microsoft Excel | application/vnd.ms-excel |
.zip | ZIP | application/zip |
.rar | RAR 存档 | application/x-rar-compressed |
createRequest().setParameters(object).fileUrl(url, openUrl)
openUrl [Boolean] 是否打开url 默认为true
为 true 时,会直接通过 window.open(href) 打开连接
为 false时,可以通过then回调获取url
方法
setRequestConfig(config, services) 设置请求配置
- config [Object] 请求基础配置
config | 类型 | 说明 |
---|
baseURL | String | 默认服务域名 |
timeout | Number | 接口超时时间设置 非必传 |
headers | Object | 请求头 非必传 |
- 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) 创建请求类
-
servicesName [String] 服务名
-
timeout [Number] 超时时间
setInterceptor(fun, type) 拦截器
- fun [Function] 拦截器触发的回调函数
fun(res)
- type [String] 拦截器类型
type | 类型 | 说明 |
---|
SUCCESS | String | 请求成功时 |
ERROR | String | 请求失败时 |
BEFORE | String | 请求之前时 |