利用装饰器封装接口请求

封装理念

将所有接口地址都看做 /{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/getAllget方式请求,不带任何参数。

创建UserApi.js文件

具体文件名称按照实际项目规范来即可。
@Controller()
class user {
  @Get()
  getAll () { }
}
// 这里请导出类的实例,方便调用。
// 后文中将只写类的定义,不再写模块导出语句。
export default new user()

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


接口路径是/user/getUserByIdget方式请求,需要传一个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
    // ! 如果有代码混淆,务必要传入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)
})

注意

在打包的时候,为了压缩体积,通常会对代码做混淆。
这样会导致如果@Controller没有传入参数,最终拼接出的接口路径不正确。
比如原本/user/getAll就变成了/a/getAll
原来的class user被打包成了class a


涛锅
放着我来

Erpack 二次封装ant-design-vue,可以看看。

2k 声望
17 粉丝
0 条评论
推荐阅读
扩展ant-design-vue的按钮样式的方法
版本信息ant-design-vue 1.xant-design-vue目前是提供了这些样式然后我感觉应该有个很常见的是需要一个黄色警告的按钮期望的用法当然就是type="warning"啦。话不多说,直接上代码。在项目里添加一个les...

我是好人阅读 645

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木141阅读 11.9k评论 10

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木60阅读 5.9k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.1k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木39阅读 7.1k评论 6

CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(>^ω^&lt...

XboxYan42阅读 2.8k评论 14

封面图
还在用 JS 做节流吗?CSS 也可以防止按钮重复点击
举个例子:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,比如只允许每300ms提交一次,这时候我想大部分同学都会到网上直接拷贝一段throttle函数,或者直接引用lodash工具库

XboxYan34阅读 2.2k评论 2

封面图

Erpack 二次封装ant-design-vue,可以看看。

2k 声望
17 粉丝
宣传栏