封装理念

将所有接口地址都看做 /{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)
})