封装调用方式统一的 GET/POST/PUT/DELETE/FORMDATA 方法
自定义接口调用失败时如何处理错误提示（可开关）
常见 HTTP 状态码的中英文提示 400/401/403/404/405/413/414/500/502/504
封装常用的请求头参数，如公参 pubArg，accessToken，加密操作标识 response-encrypt，sign 签名校验等。
封装动态秘钥功能，传入动态秘钥请求地址时，会自动发送动态秘钥请求，并采用接口返回值作为动态秘钥。
封装 response-encrypt，request-encrypt 请求头接口加密功能，以及必须加密接口列表，以后统一在该库里维护。
封装 returnCode 返回非 1000 时的默认弹窗逻辑，并支持自定义配置。
自定义错误处理函数，可以根据状态码指定不同错误类型的自定义操作：如 403 跳转到指定页面
hooks 方法
- beforeHook(config) 接口请求前自定义操作：如可以在请求时给页面添加蒙层，加载中效果
- afterHook(responce/error, isError) 接口返回后自定义操作：如取消 loading 效果、处理返回数据的数据结构等
兼容错误信息在 200 请求情况
- 指定获取状态码函数 getResStatus(resData)，获取 response 中的错误码
- 指定获取错误消息函数 getResErrMsg(resData)，获取 response 中的错误消息
- 指定获取返回最终数据函数 getResData(resData)，获取 response 中的返回数据
validateStatus自主校验接口状态
配置可取消重复请求
- 在 new VpAxios 实例时，配置cancelDuplicated: true可开启取消重复的请求
- 在 new VpAxios 实例时，duplicatedKeyFn函数可配置统一的重复请求的标识
- 在请求时可自定义配置单个请求的重复标识duplicatedKey

基础用法

安装

npm install -S vp-tools

使用

可以通过以下方法 new 一个 VpAxios 的实例，第一个参数 vpAxiosConfig 为 vp-axios 的配置，第二个参数 axiosConfig 为 axios 官方所支持的配置，官方链接地址 http://www.axios-js.com/zh-cn/docs/

// service.js
import { VpAxios } from 'vp-tools'
// 此处 vpAxiosConfig, axiosConfig 未定义，下面会详细介绍 vpAxiosConfig
const service = new VpAxios(vpAxiosConfig, axiosConfig)

export const postRequest = (url,data, config = {}) => service.POST(url, data, config)
export const getRequest = (url,params, config = {}) => service.GET(url, params, config)

vpAxiosConfig 支持以下配置：

{
  /**
   * 登录后，将store仓库中的common模块传入进来，其中必须包含以前的configInfo对象，
   * 该对象的信息包含登录信息等一系列公参和sign签名需要的信息，如：
   * {
   *   configInfo: {
   *     employeeNumber，
   *     orgId，
   *     roleId，
   *     userType，
   *     userId，
   *     channelCode，
   *     cityCode
   *   }
   * }
   * commonStore是地址引用，所以vuex中的信息更新后，commonStore中的信息也会一起更新。
   */
  commonStore: {}, // *必传
  // 获取动态秘钥的接口地址,不传入则使用配置的默认秘钥。
  getDynamicKeyUrl: '',
  // 加解密用的默认秘钥。
  keyStr: '', // *必传
  // 加解密用的默认向量。
  ivStr: '', // *必传
  // 各省的appid
  appId: '', // *必传
  // 各省独自维护的api列表的对象
  apiList: {}, // *必传
  // loadinng时的加载图片地址，本地资源需要用require引入，如果不传则默认使用移动的努力加载中的loading图
  loadingUrl: require('../assets/loading.gif'),
  /**
   * 当http状态码为200时，根据res.dataInfo中返回的returnCode，来进行提示和操作。
   * 设置true时，则不进行任何弹窗，直接返回接口信息。
   * 设置为string类型字符串时，则弹出提示，提示内容为字符串内容。
   * 设置为函数类型时，则会执行该函数。
  */
  returnCodeMaps: {
    // 默认值如下。
    // 200: true,
    // 1000: true,
    // 1009: '您的账号已在别的设备登录，如果不是本人操作，请检查账号密码是否泄漏。',
    // 1004: '服务器繁忙，请喝杯茶休息一会儿',
    // 2000: '号码归属地信息不存在，请检查后重输',
    // 429: '操作频率过快'
    // 10086: () => alert('设置的是函数类型，会执行本函数')
  },
  // 发生http状态码错误时，是否显示提示（http状态码非2xx时才提示）
  tip: true, // default
  // 接上，如何显示提示，可以传入显示message的方法
  tipFn: (message) => {}, // 必传,可以直接把封装好的vue弹窗函数传进来。
  /**
   * 如：
   *
   * // 错误提示弹窗函数。
      tipFn: (message) => {
        Vue.$alert.show({
          title: '提示',
          text: message,
          type: 'tip'
        })
      },
  */
  errorHandlers: {
    // 支持 400/401/403/404/405/413/414/500/502/504/任意其他 errno
    // 401: () => {}
    // 403: () => {}
    // ...
  },

  // 内置错误提示语言: 'zh-cn'/'en'
  lang: 'zh-cn', // default

  // 请求前的自定义操作
  beforeHook: (config) => {},

  // 请求后的自定义操作
  afterHook: (responce|error, isError) => {},

  // 从请求响应中请求状态码，默认取status
  // 如果传入的不是一个函数也会使用默认值
  getResStatus: (resData) => resData.status, // default

  // 从请求响应中获取错误消息，默认取message
  // 如果传入的不是一个函数也会使用默认值
  getResErrMsg: (resData) => resData.message, // default

  // 从请求响应中获取返回数据，默认取data
  // 如果传入的不是一个函数也会使用默认值
  getResData: (resData) => resData.data, // default

  // 是否开启取消重复请求
  cancelDuplicated: false, // default

  // 如果开启了取消重复请求，如何生成重复标识
  duplicatedKeyFn: (config) => `${config.method}${config.url}` // default
}

VpAxios 实例支持 GET/POST/PUT/DELETE/FORMDATA 实例方法，并且调用方式统一。

目前仅对 GET 和 POST 进行过较为严密的测试，建议在 VpAxios 示例的基础上，封装好对应的$get,$post 方法。

对于$upload 等上传类型的方法，可以通过导出原始 axios 对象的形式，对原有逻辑进行支持，避免大幅改动。

service.GET(path, params, config)
service.POST(path, params, config)
service.PUT(path, params, config)
service.DELETE(path, params, config)
service.FORMDATA(path, params, config)

path 为请求路径；

params 为请求参数，GET/FORMDATA 的参数也不用特殊处理，vp-axios 会统一处理，其中 FORMDATA 的 Content-Type 为 multipart/form-data;charset=UTF-8

config 为 axios 的原始配置和新增的 vpConfig 字段用于 VpAxios 调用实例方法时传入配置，后续会介绍

自定义错误提示函数

当接口报错时，我们通常会对错误信息进行提示。VpAxios 提供了统一的方式来处理错误消息。在 VpAxiosConfig 中指定 tipFn(errmsg) 可以指定错误消息的处理方式，指定 tip（布尔值）可以开关是否执行错误提示。

如下，我们可以将 tipFn 指定为 alert，则错误信息会使用 alert 函数弹出提醒。

// service.js
import VpAxios from 'vp-axios'
const service = new VpAxios({
  tipFn: (message) => alert(message)
})

实例请求中的 vpConfig 配置说明

disableTip 控制单个请求禁用 tip 错误弹窗

VpAxios 内置了常见 HTTP 错误的中英文提示，如 401 对应 “未授权，请确认是否登录” / “Unauthorized”。可以通过配置中的 lang 指定提示的语言。

有些时候，我们可能想要只针对某个接口禁用 tip，此时可以在调用接口时传入第三个参数，如下，可以禁用该接口发生错误时的错误提示。

// 禁用 tip
service.GET(path, params, {
  vpConfig: {
      disableTip: true  // 是否去掉报错弹窗（http状态码非200时）
  }
})

noAlertFlag 控制单个请求禁用 returnCode 非 1000 的弹窗。

有些时候，我们可能想要只针对某个接口的 returnCode 无论返回多少，都不弹窗。此时，可以在调用接口时传入第三个参数，如下，只要 http 状态码是 2xx，无论 returnCode 返回多少都不会弹窗。

// returnCode非1000也不弹窗。
service.GET(path, params, {
        vpConfig: { // vpConfig中是VpAxios实例的特殊配置。
          noAlertFlag: true, // 是否去掉报错弹窗（http为200时，但是returnCode非1000时）
        },
        headers: { } // 非vpConfig中的对象是原始axios的配置属性，如请求头，baseUrl，超时时间等等等。
      })

preventLoading 控制单个请求禁用 loading 图

有些时候，我们可能想要针对某次请求进行特殊设置：无论何时该请求过程中都不要出现 loading 图。

此时，可以设置 preventLoading 为 true，这样该请求就不会加载 loading 图了。

// returnCode非1000也不弹窗。
service.GET(path, params, {
        vpConfig: {  // vpConfig中是VpAxios实例的特殊配置。
          preventLoading: true // 是否取消请求loading图
        },
        headers: { } // 非vpConfig中的对象是原始axios的配置属性，如请求头，baseUrl，超时时间等等等。
      })

isEncrypt 控制单个请求禁用 loading 图

有些时候，我们可能想要针对某次请求的入参进行单独加密。

此时，可以设置 isEncrypt 为 true，这样该请求就不会加载 loading 图了。

// returnCode非1000也不弹窗。
service.GET(path, params, {
        vpConfig: {  // vpConfig中是VpAxios实例的特殊配置。
          isEncrypt: true // // 是否对入参加密。
        },
        headers: { } // 非vpConfig中的对象是原始axios的配置属性，如请求头，baseUrl，超时时间等等等。
      })

旧语法兼容

由于山东随身厅等项目中以前有封装过isEncrypt，preventLoading，noAlertFlag等功能，因此针对这些旧语法做了兼容性处理。

即不需要修改这些旧语法，但是这里 不推荐 大家再使用旧语法来书写。

// 旧语法示例
await this.$post('activeSpreadPage/awardRecordQueryByPhone',{phone: this.miniTel},false,true)

await this.$post('activeSpreadPage/awardRecordQueryByPhone',{phone: this.miniTel},true)

await this.$post('activeSpreadPage/awardRecordQueryByPhone',{phone: this.miniTel}, {
    isEncrypt: true, // 是否对入参加密。
    noAlertFlag: true, // 是否去掉报错弹窗（http为200时，但是returnCode非1000时）
    preventLoading: true // 是否取消请求loading图
})

自定义错误处理函数

使用 axios 进行接口请求发生错误时，一般会有两种，一种是 validateStatus 不通过时（默认是 2xx 通过），另一种是所有接口错误信息都由 200 状态返回，返回结果中带有固定字段表示，如 errno/errmsg。

在接口请求的过程中，我们有时会需要对于对某些特殊的错误进行一些额外的操作，如 403 的时候跳转到无权限的错误提示页。

这时候，我们可以在配置中添加相应的错误处理函数errorHandlers，可以给不同的错误码指定不同的处理函数，并且支持自定义的 errno。

// service.js
import VpAxios from 'vp-axios'
const service = new VpAxios({
  errorHandlers: {
    // 支持 400/401/403/404/405/413/414/500/502/504/任意其他 errno
    401: () => {}
    403: () => {}
    // 任意自定义errno
    1002: () => {}
  },
})

获取原始 `axios` 对象

如果你现有项目已经使用了 axios，需要兼容旧的逻辑，可以通过以下方式获取原始 axios 的引用。

import { originalAxios as axios, VpAxios, vpCode } from 'vp-tools'

一份完整的service.js代码

// service.js
import { VpAxios, originalAxios as axios } from 'vp-tools'
import Vue from 'vue'
import apiList from '@/api'
import { APPID } from './config'

import Store from '@/store'
const commonStore = Store.state.common

const isDev = process.env.NODE_ENV === 'development'
const HOST_NAME = isDev ? '/api' : window.location.origin

// create an axios instance
export const service = new VpAxios({
  apiList,
  loginConfigInfo: commonStore,
  appId: APPID,
  // 错误提示弹窗函数。
  tipFn: (message) => {
    Vue.$alert.show({
      title: '提示',
      text: message,
      type: 'tip'
    })
  },
  // returnCodeMaps: {
  //   1000: true, // 表示1000时不进行弹窗。
  //   1002: '传入字符串，则弹出展示字符串中的内容',
  //   1006: () => alert('returnCode返回1006时的处理逻辑，传入函数则执行该函数。')
  // },
  // 从请求响应中获取错误状态，默认取errno
  // 如果传入的不是一个函数也会使用默认值
  getResStatus: (resData) => resData.errno, // default
  keyStr: '24ac25e04d9d8e2da25549dc94ecf357',
  ivStr: '01234567',
  getDynamicKeyUrl: 'mcs/security/manage/app/key/query',
  loadingUrl: require('@/assets/images/common/loading.gif')
}, {
  baseURL: HOST_NAME,
  timeout: 60 * 1000 // request timeout
})

export const postRequest = (url, param, config) => {
  // post中可以自行封装数据处理逻辑，比如增加什么乱七八糟的业务数据，
  // showPlatform，latitude，accessMode，extraParam，等等等
  return service.POST(url, param, config)
}

export const getRequest = (url, param, config) => {
  return service.GET(url, param, config)
}


/**
 **上传接口**
 **/
const newAxios = axios.create({
  headers: {
    Authorization:
      commonStore.configInfo.shareToken || commonStore.configInfo.aesToken || urlParse('aestoken')
    // config.USER.aesToken || urlParse('aestoken') || commonStore.configInfo.shareToken
  }
})

// 这里上传接口还是导出的旧的aixos。
export const $httpImgUpoad = (params, isWChat, url) => {
  newAxios.defaults.headers['Authorization'] = commonStore.configInfo.shareToken || commonStore.configInfo.aesToken || urlParse('aestoken')
  let urls = url || API.upload.file
  return newAxios({
    url: isWChat ? API.upload.wxupload : urls,
    method: 'post',
    data: params
  })
}

后面的内容不是那么重要，感兴趣可以了解下。

Hooks

VpAxios 在请求前和请求后都留了钩子，以备需要在这两个时机进行特殊的处理。

beforeHook(config) 接口请求前的钩子函数

在接口请求前触发，可以在请求时给页面添加蒙层，加载中效果。config参数是最后发送请求时的配置。

config 为引用传值，可以对该引用的值进行修改，修改后会影响提交的配置
afterHook(responce/error, isError) 接口返回后钩子函数

在接口请求返回后触发，可以进行取消 loading 效果、处理返回的数据结构等操作。其中第一个参数在请求成功时是接口返回的响应response，在接口失败时，是返回的错误对象。第二个参数标识是否是错误返回。

response 为引用传值，可以对该引用的值进行修改，如对返回的数据结构进行调整

通常我们会在实例化时进行通用的钩子函数定义。但可能存在某些特殊的请求，不需要执行 hooks，这时候我们可以在单独的请求中，指定是否禁用 hooks 以及禁用哪一个 hooks。

// 禁用全部 hooks
service.GET(path, params, { vpConfig: { disableHooks: true } })

// 禁用 before hooks
service.GET(path, params, { vpConfig: { disableHooks: { before: true } } })

// 禁用 afater hooks
service.GET(path, params, { vpConfig: { disableHooks: { after: true } } })

自定义错误信息及数据的获取

前面提到，接口在返回错误时有两种常见方案，其中一种是全部 200 返回，通过特定字段标识是否是错误，如 errno 表示错误号，非 0 则为错误；errmsg 表示错误信息；data 为返回的数据。这也是 VpAxios 的默认值。

当然，有些时候，接口并非我们预想的这样统一，我们可以通过以下三个函数分别指定如何从 reponse data 中获取上述的三个值。

getResStatus(resData)，获取 response 中的错误码，默认值 (resData) => resData.errno
getResErrMsg(resData)，获取 response 中的错误消息，默认值 (resData) => resData.errmsg
getResData(resData)，获取 response 中的返回数据，默认值 (resData) => resData.data

`validateStatus`自主校验接口状态

与 axios 中默认的 validateStatus 配置略有不同，vp-axios 中的默认值为 (status) => status === 0 || (status >= 200 && status < 300)，主要是兼容了错误码由正确响应返回的情况。这时，status 通常可能为0，有可能是正确的状态码 2xx，所以加了一个可以判断的逻辑。特殊情况修改该判断逻辑即可。该配置不影响 axios 中 validateStatus 的判断逻辑，如果两个地方都需要，需要分别指定。

配置可取消重复请求自动

如果开启了取消重复请求，但是没有配置duplicatedKeyFn 和 duplicatedKey，那么默认的重复请求标识为：${config.method}${config.url}。如果同时配置了duplicatedKeyFn 和 duplicatedKey，那么duplicatedKey的优先级高于duplicatedKeyFn

在 new VpAxios 实例时，配置cancelDuplicated: true可开启取消重复的请求

const vpAxiosConfig = {
	cancelDuplicated: true,
};
const service = new VpAxios(vpAxiosConfig);

在 new VpAxios 实例时，duplicatedKeyFn函数可配置统一的重复请求的标识

const vpAxiosConfig = {
	cancelDuplicated: true,
	duplicatedKeyFn: (config) => {
		const { method, url, responseType } = config;
		return `${method}${url}${responseType}`;
	},
};
const service = new VpAxios(vpAxiosConfig);

在请求时的可自定义配置单个请求的重复标识duplicatedKey

service.GET(path, params, { vpConfig: { duplicatedKey: "duplicatedKey" } });

Keywords

FAQs

What is vp-tools?

Is vp-tools popular?

Is vp-tools well maintained?

Package last updated on 11 Apr 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

vp-tools

vp-axios

功能列表