microvideo-request

研发人: 朱琦

研发日期: 2022/1/10

简介

microvideo-request 插件是基于 axios，qs 开发的请求封装，可以支持多服务域名请求

快速使用

安装

npm i microvideo-request

引入

初始化配置 vue main.js 为例

import { setRequestConfig, setInterceptor } from 'microvideo-request'

/**
 * 初始化 配置
 * @param {Object} config      初始配置
 * @param {Object} services 多个服务域名配置
 * */
setRequestConfig(
  // config 初始配置 可设置baseUrl timeout headers
  {
    baseURL: process.env.VUE_APP_BASE_API,
    timeout: 60000, // 非必传 接口超时时间设置, 默认 60000ms
    headers: {}, // 非必传 请求头
    successStatus: [301, 302], // 非必传 请求成功状态码, 默认 2xx 都为成功状态码，可额外配置
  },
  // 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 'microvideo-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)
  <!-- 修改单个请求的headers 其余请求类型同理 -->
  createRequest().add('key','value').get(url, {
    headers:{
      userId: xxx
    }
  })

• 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 |

• fileUrl() 获取 url 链接

createRequest().setParameters(object).fileUrl(url, openUrl)

openUrl [Boolean] 是否打开 url 默认为 true

为 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 | 请求之前时 |