zhdd-request

axios 请求封装

研发人:朱琦

研发日期: 2022/1/10

简介

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

使用方式

安装

npm i zhdd-request

引入

• 1.初始化配置 vue main.js为例

import { configDefaultConfig, requestCallback } from 'zhdd-request'

/**
 * 初始化 配置
 * @param {Object} config      初始配置
 * @param {Object} servicesUrl 多个域名配置
 * */
configDefaultConfig(
  // 初始配置 可设置baseUrl timeout header
  config: {
    baseURL: process.env.VUE_APP_BASE_API,
    timeout: 3000, // 非必传 接口超时时间设置
    headers: {}, // 非必传 请求头
  },
  // 多个域名配置, 可不传 不传时config.baseURL 为必传
  servicesUrl: [
    {
      // 默认域名 第一个
      servicesName: 'BASE_SERVER',
      servicesUrl: process.env.VUE_APP_BASE_API
    },
    {
      // 其他域名
      servicesName: 'JTQG_SERVER',
      servicesUrl: process.env.VUE_APP_JTQG_SERVER_BASE_API
    },
  ]
)

/**
 * 拦截器
 * @param {Function} fun 回调函数
 * @param {String} type 回调类型 默认为 SUCCESS 即请求成功时
 */
requestCallback(fun, type)

若后续需要设置headers 可再次调用configDefaultConfig(config)

• 2.实际应用(以vue为例)

import { createRequest } from 'zhdd-request'

// 使用方法

// 1.配置域名 传参为空时 使用默认域名
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)


/**
  * 实例1
  * */
getList (params) {
  return createRequest().setParameters(params).get('/event/listForJtqg')
}

/** 
  * 实例2
  * 用setAxios请求
  * 传参方法遵循 axios
  * */
getList (params) {
  return createRequest().setAxios({
    url: '/event/listForJtqg',
    method: 'get',
    params
  })
}