装饰器createDecorator的使用

261 阅读1分钟

createDecorator(装饰器)可以将一些通用的东西注入到指定位置, 以接口的公共原子参数为例,创建装饰器如下:

import { serviceHocs } from 'axios-service'
const { setDataDecorate, setParamsDecorate } = serviceHocs
import { createDecorator } from 'vue-class-component'

const haveParams = ['a', 'b', 'c'] // 添加公共原子参数
const toObjectParams = fn() // fn获取url中haveParams中每个元素对应的值,并以key-value的形式写入{},具体过程-略

const getParams = params => { // 定义注入事件
	return createDecorator(
		compose( // 合成函数(考虑到get和post,参数注入的位置不同)
			setDataDecorate(params) // 将参数固定到请求的body中(post)
			setParamsDecorate(params) // 将参数固定到请求的query string中(get、post)
		)
	)
}

export const autoParams = getParams(toObjectParams) // 导出装饰器


// 具体使用
import { autoParams } from 'xxxxxx'

class Apis {
	@autoParams // 调用装饰器,此时参数a、b、c及参数值将会自动注入到接口入参中
	getInfo = post('/api/getInfoCustom')
}

www.npmjs.com/package/axi…