说明

这是一个在 vue 环境下使用的工具包，具体包括自定义异常和 Axios 封装，引入到项目：

yarn add @enjoyor/http-axios

项目导出了两个变量（VueError, EnloopError），两个方法（createRequest, createDefaultRequest），变量用于自定义异常然后全局处理，函数用于构建Http对象，区别如下：

名称|作用| -|-| VueError|用于vue全局引入| EnloopError|用于在非.vue文件中使用| createRequest|用于不满足公司接口规范的项目| createDefaultRequest|用于满足公司接口规范项目|

[toc]

1. API

VueError/EnloopError

参数|参数名称|作用|默认值| -|-|-|-| code|异常编码|在全局异常处理中按需处理|SE_0000| message|异常信息|可用于弹出提示信息、或者记录日志|不能为空| extra|附加信息|用于弥补参数信息不足情况|{}|

createRequest

参数|参数名称|作用|说明| -|-|-|-| baseUrl|项目根路径||默认值为 ''| onStart|请求发起前|可以用于批量在请求中添加 token 信息|支持promise| onFinish|请求返回时|正常，可以获取返回值；异常时，可以获取错误信息|支持promise| onError|请求异常|获取异常信息|支持promise，必须有返回值，建议返回 EnloopError| onQueueEmpty|请求队列为空时|可用于弹出提示信息、或者记录日志|支持promise| responseHandler|返回值处理|处理返回值，过滤不必要信息|返回值必须是promise|

createDefaultRequest

在 createRequest 的基础上，覆写了onFinish、onError、responseHandler三个方法，onStart、onQueueEmpty 可以用于请求时页面过渡效果。

Http 内置函数

createRequest/createDefaultRequest 会返回一个Http对象，该对象一共有 9 个方法，两个变量，作用如下：

名称|用途|说明| -|-|-| options|发送 options 请求|受限于根路径| upload|发送文件上传请求|受限于根路径| put|发送 put 请求|受限于根路径| del|发送 delete 请求|受限于根路径| get|发送 get 请求|受限于根路径| post|发送 post 请求|受限于根路径| request|发送任意请求|受限于 responseHandler| all|用于多个请求同步，底层就是 axios.all| axios|用于自定义任意请求| xhr|axios对象|变量| API_BASE_URL|根路径|变量|

如果需要修改 axios 参数比如：

axios.defaults.withCredentials = true
axios.defaults.timeout = 60000

可以使用 xhr 参数，Http.xhr 就是 axios，而 Http.axios 只能用于发送请求

2.QuickStart

2.1.自定义异常

VueError

// 导入
import { VueError } from '@enjoyor/http-axios'
Vue.use(VueError)

使用这种方式导入，会在 vue.js 的 prototype 上加一个 Error 属性，因此可以：

// vue 组件中使用
throw new this.Error({ code: 123, message: '异常' })
// 使用默认状态码 SE_0000
throw new this.Error({ message: '异常' })

使用全局异常处理可以使用 instanceof Vue.prototype.Error 判断：

import element from 'element-ui'
Vue.config.errorHandler = (info, vm, trace) => {
  // “自定义异常”处理，使用 Element-ui 提示
  if (info instanceof Vue.prototype.Error) {
    if (info.code === 'SE_0000') {
      element.Message({ type: 'error', message: info.message })
    } else if (info.code === 'SE_0001') {
      element.Message({ type: 'success', message: info.message })
    }
  }
  console.log(info)
}

注意： http模块有两个内置异常编码（SE 是 System Error的缩写）

• SE_0000（默认状态码，系统异常，用于弹出提示信息等）
• SE_0001（退出成功）

EnloopError

import { EnloopError } from '@enjoyor/http-axios'
throw new EnloopError({ code: 123, message: '异常' })

2.2.Http 模块

createDefaultRequest

1.编写一个 Http.js：

import { createDefaultRequest } from '@enjoyor/http-axios'
import store from '@/js/store/Index'

function onStart (config) {
  if (config.method === 'post') {
    config.data.token = store.getters['app/TOKEN']
  }
  store.dispatch({ type: 'app/setLoading', amount: true })
}
function onQueueEmpty () {
  store.dispatch({ type: 'app/setLoading', amount: false })
}

function http () {
  return createDefaultRequest({
    onStart: onStart,
    onQueueEmpty: onQueueEmpty,
    baseUrl: '/api-didesign/v1'
  })
}
export default http()

2.使用：

/*
 * @Author: lxt 测试相关接口
 * @Last Modified by: lxt
 * @Last Modified time: 2020-04-11 14:01:23
 * @Last Modified time: 2020-04-11 14:18:06
 */

import Http from '@/js/common/Http'
export default class TestApi {
  // 测试作业
  static test (params) {
    return Http.post('/test/fork', { params })
  }
}

createRequest

例子：

import { createRequest, EnloopError } from '@enjoyor/http-axios'
let SUCCESS_CODE = ['00000', 200]
function onStart (config) {
}
function onQueueEmpty () {
}
async function responseHandler (res) {
  return new Promise(function (resolve, reject) {
  })
}
function onError (err) {
  return {}
}
async function onFinish (res) {
}

function http (options) {
  return createRequest({
    onStart: onStart,
    onQueueEmpty: onQueueEmpty,
    onFinish: onFinish,
    responseHandler: responseHandler,
    onError: onError,
    baseUrl: '/api-didesign/v1'
  })
}
export default http()