@enjoyor/http-axios v1.0.14

说明

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

yarn add @enjoyor/http-axios

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

toc

1. API

VueError/EnloopError

createRequest

createDefaultRequest

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

Http 内置函数

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

如果需要修改 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()