封装理念

将所有接口地址都看做 /{Controller}/{Action} 这样的模式

例如 /user/getAll, 那么Controller 就是 user,Action 就是getAll。

层级多一点的状况，例如 /module/user/getAll, 那么Controller 就可以看做是 module/user,Action 就是getAll。

具体情况以理论我的项目中接口地址自行剖析。

介绍一下须要用到的装璜器

类装璜器

Controller

默认应用类的名称作为申请中 {Controller} 局部，也能够传参重写门路。

办法装璜器

Get

定义一个 Get 申请
默认应用办法名称作为申请中 {Action} 局部，也能够传参重写门路。

Post

定义一个 Post 申请
默认应用办法名称作为申请中 {Action} 局部，也能够传参重写门路。

如何封装接口申请？

比方接口门路是 /user/getAll，get 形式申请，不带任何参数。

创立 UserApi.js 文件

具体文件名称依照理论我的项目标准来即可。

@Controller()
class user {@Get()
  getAll () {}
}
// 这里请导出类的实例，不便调用。// 后文中将只写类的定义，不再写模块导出语句。export default new user()

这是一个最简略的封装示例。

接口门路是 /user/getUserById，get 形式申请，须要传一个 id 参数

@Controller()
class user {
  /**
   * @param {String} id 用户 id
   */
  @Get()
  getUserById (id) {
    return {id}
  }
}

在办法外面将接口须要的参数返回，装璜器会主动在申请的时候传过来。

这样比拟清晰的晓得这个接口须要什么参数，也能够给每个参数做正文。

页面调用

import UserApi from './UserApi.js'

// 相当于 axios.get('/user/getAll')
UserApi.getAll()

// 相当于 axios.get('/user/getUserById',{ params: { id: 1} })
UserApi.getUserById(1)

装璜器的代码实现

先封装一下 axios

建设一个 http.js 文件，通过这个文件来调用发送申请的办法

import axios from 'axios'

const http = axios.create()

// 这里依据我的项目须要去加你本人的配置

export default http

封装出几个装璜器

建设一个 Decorators.js 文件

import http from './http'

/**
 * 肯定要在 Controller Class 上应用该装璜器
 * @param {String} name 反对门路重写
 * @returns 
 */
export function Controller (name) {return function (target) {
    // 如果没有指定门路，默认门路为 Controller 的 name
    if (name === undefined) name = target.name
    // 把门路存到 Controller 对象下面
    target.controller = name
  }
}

/**
 * 创立一个装璜器
 * @param {*} request 
 */
function createAction (request) {
  /**
   * 反对重写 Action 的门路
   * @param {String} path
   */
  return function (path) {return function (target, name, descriptor) {if (path) name = path

      const {value} = descriptor
      const params = value.apply(target, arguments)

      /**
       * 必须在函数外面去获取 Controller 的门路，因为办法的装璜器比类的装璜器先执行。* @returns 
       */
      descriptor.value = function () {
        const controller = target.constructor.controller
        const url = `/${controller}/${name}`

        return request(url, params)
      }
    }
  }
}

export const Get = createAction((url, params) => {return http.get(url, { params})
})

export const Post = createAction((url, params) => {return http.post(url, params)
})