封装理念

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