Object.defineProperty 对象拦截实际应用

124 阅读1分钟

背景:除了vue 中实际应用这个方法,我们还可以再哪些场景中使用呢?

我们在定义SDK的时候,基于sdk可以对自己封装的方法进行一些拦截操作,或者对三方的功能进行一些操作,这样能够得到一些准确的数据

基于拦截操作,有一定的风险,如果我们拦截时代码出现异常,导致sdk api发生错误将会导致api调用失败
/**
 * 支付拦截
 */

const cus = {}

cus.pay = function({
    mount,
    key,
    success,
    fail
}) {
     // 。。。逻辑处理
     if (key === 12345 ) {
        success({
            code: 0,
            msg: '支付成功'
        })
     } else {
         fail({
             code: 304,
             msg: '支付失败'
         })
     }
}

// -------
function interceptPay() {
    const originPay = cus.pay
    Object.defineProperty(cus, 'pay', {
        writable: true,
        enumerable: true,
        writable: true,
        value: function() {
            const config = arguments[0] || {}
            console.log('开始支付>>>>')
            if (config.success) {
                const success = config.success
                config.success = function(res) {
                    console.log('支付成功>>>>')
                    success(res)
                }
            }

            if (config.fail) {
                const fail = config.fail
                config.fail = function(res) {
                    console.log('支付失败>>>>')
                    fail(err)
                }
            }

            return originPay.apply(this, arguments)
        }
    })
}

interceptPay()

cus.pay({
    amount: 100,
    key: 12345,
    success: (res) => {
        console.log(res)
        console.log('拿到响应后的操作>>>>')
    },
    fail: (err) => {
        console.log(err)
        console.log('失败后的操作>>>>')
    }
})