luban-http

基于axios二次封装的http模块。

1. 二次封装了get,post,delete,put请求方法。
2. 封装了请求打断的方法，用于取消正在发送中的请求。
3. 提供了根据swagger上的接口文档自动生成api文件的功能。
4. 提供了发送请求成功失败和请求响应成功失败的回调函数以及统一错误处理的回调函数，你可以在这些回调函数里与antd,element-ui,iview等UI库的Message组件联合使用也可以与nprogress进度条组件联合使用。

使用

安装

npm install -S luban-http

常规使用

在你的api文件中使用luban-http

import http from 'luban-http'

// 参数 （url, params/query, config = {} , closeCommonErrorHandling = false）
// url: 请求地址
// params/query: 请求参数
// config: 请求配置 参考axios文档
// closeCommonErrorHandling：关闭请求错误统一处理
http.$GET('./api/xxxxxx', { id: 123 })
http.$POST('./api/xxxxxx', { page: 1 }, { responseType: 'json' })
http.$DELETE('./api/xxxxxx', {}, {}, false).then(res => {
  if (!res.status) {
    Message.error(xxxxx)
  }
})
http.$PUT('./api/xxxxxx', params)

取消所有处于pending状态的请求，以vue-router为例

import Vue from 'vue'
import Router from 'vue-router'
import http from 'luban-http'

Vue.use(Router)

const router = new Router({
  routes: []
})
router.beforeEach((to, from, next) => {
  // 调用clearHttpRequestList方法在切换路由的时候取消掉所有pending状态的请求
  http.clearHttpRequestList()
  next()
})

export default router

与组件联合使用

// vue main.js

import Vue from 'vue'
import NProgress from 'nprogress'
import { Message } from 'element-ui'
import http from 'luban-http'

import 'nprogress/nprogress.css'

//与elment-ui Message组件和nprogress进度条组件使用，以及设置超时时长和请求的baseURL

http.setOptions({
  timeout: 30000, // 设置超时时长
  baseURL: '', // 设置baseURL
  statusName: 'status', // status字段名字
  isAllErrorResponseByReject: false, // 是否所有的错误都从reject回调函数接收
  requestInterceptor: (config) => { NProgress.start() }, //发送请求成功的回调
  requestInterceptorError: (error) => { console.log(error); NProgress.done() }, // 发送请求失败的回调
  responseInterceptor: (response) => { NProgress.done() }, // 请求响应成功的回调
  responseInterceptorError: (error) => { console.log(error); NProgress.done() }, // 请求响应失败的回调
  commonErrorHandling: (message, res) => { Message.error(message || '未知异常') } // 统一错误处理的回调
})

与Swagger使用

在package.json文件 scripts属性中添加命令，如下所示：

"scripts": {
   "swagger": "swagger -u http://localhost:8191/v2/api-docs -d /"
  }

参数解释所示:
-u --swagger-doc-url [value] swagger-doc访问地址
-d --target-dir [value] 生成的api文件存放的文件夹地址（相对于项目的/目录）
-n --api-dir-name [value] 保存api文件的目录名称
-a --is-absolute 是否启用绝对路径: true(绝对路径)， false(相对路径） 默认是false
-b --base-url [value] 生成的api的路由前缀

swagger-doc-url可以通过swagger页面得到，配置好swagger-doc-url地址和文件输出位置后，执行npm run swagger命令。脚本将会把swagger-doc上所有的接口在指定目录下自动生成接口文件，生成的代码如下所示：

// xxxx.js
'use strict'
// 后台管理员管理
import http from 'luban-http'

'use strict'
// 学院部门
import http from 'luban-http'

// 各学院学生数和师生比
export const ApiCollegeFindStudentAndTeacherScale = (query = {}, params = null) => http.$GET('api/college/findStudentAndTeacherScale', query, params, {}, false)
// 各学院教师年龄分布
export const ApiCollegeFindTeacherAgeRange = (query = {}, params = null) => http.$GET('api/college/findTeacherAgeRange', query, params, {}, false)
// 各级师资占比
export const ApiCollegeFindTeacherRatio = (params = null, query = null) => http.$POST('api/college/findTeacherRatio', params, query, {}, false)
// 部门教职工数前5名
export const ApiCollegeFindDepartmentTeacherTop5 = (query = {}, params = null) => http.$GET('api/college/findDepartmentTeacherTop5', query, params, {}, false)
// 各学院项目数和论文数的排名
export const ApiCollegeFindCollegeProjectAndPaperNum = (query = {}, params = null) => http.$GET('api/college/findCollegeProjectAndPaperNum', query, params, {}, false)