Skip to content
on this page

扫码联系

编程学习&& IT

tian

代理模式

概念

概念

代理模式是一种结构性设计模式,它允许通过代理对象控制对另一个对象的访问

案例proxy

下面列举一个代理模式最常见的 proxy

js
const stuInfo = {
  name: 'tian',
  age: 18,
  sno: 2022001,
  grade: 'A+'
};

/**
 * @params obj  对象 
 * @params prop 属性
 */
const stuProxy = new Proxy(stuInfo, {
  get: (obj, prop) => {
    console.log(`the value of ${prop} is ${obj[prop]}`)
  },
  set: (obj, prop, value) => {
    console.log(`changed ${prop} from ${obj[prop]} to ${value}`)
  }
})

stuProxy.age
stuProxy.grade = 'A-'

案例Reflect

在我们的Js中也可以通过reflect对象来操作

js
const stuInfo = {
  name: 'tian',
  age: 18,
  sno: 2022001,
  grade: 'A+'
};

// reflect 

const stuReflectt = new Proxy(stuInfo,{
  get:(obj,prop)=>{
    console.log(`the value of ${prop} is ${Reflect.get(obj,prop)}` )
  },
  set:(obj,prop, value)=>{
    console.log(`changed ${prop} from ${obj[prop]} to ${value}`)
  }   
});

stuReflectt.name='tinaer'

应用场景

    1. 远程代理
    1. 虚拟代理
    1. 应用场景demo
js
// 代理模式
// scene
// 网络请求封装 暴露get post

// src/utils/request.js

import Http from './http';

export function get(options) {
  return Http.get(options);
}

export function post(options) {
  return Http.post(options);
}

// 获取图片地址
import { post, get } from '@src/utils/request.js';
import { config } from 'cypress/types/bluebird';

async function generateShareImage() {
  const body = this.generateConfig();
  try {
    const res = await post({
      url: 'getImage',
      body,
      setting: {
        // domain: config.
      },
    });

    if (res?.picUrl) {
      return res;
    }
    return null;
  } catch (err) {
    console.log(err);
    return null;
  }
}

// graytype 后面请求当中 graytype 放入headers

let graytype = -1;
async function generateShareImage() {
  const body = this.generateConfig();
  try {
    const options = {
      url: '/getData',
      body,
      setting: {
        // domain: config.
      },
      headers: {},
    };

    if (graytype !== -1) {
      options.headers.graytype = graytype;
    }

    const res = await post(options);

    if (res.graytype) {
      graytype = res.graytype;
    }

    if (res?.picUrl) {
      return res;
    }
    return null;
  } catch (err) {
    console.log(err);
    return null;
  }
}

// 优化
// 代理模式
// 对原有对象进行扩展 从而实现对原有对象的控制或者额外的操作

// src/utils/requestNew.js
import { post as Post, get as Get } from './request';

const getNewParams = (params) => {
  let newParams;
  if (graytype !== -1) {
    newParams = {
      ...params,
      header: {
        ...params.headers,
        graytype,
      },
    };
  }

  return newParams;
};
// 代理模式
export const get = async (params) => {
  const response = await Get(getNewParams(params));

  const res = response.data;

  if (res.graytype) {
    graytype = res.graytype;
  }

  return response;
};

export const post = async (params) => {
  const response = await Post(getNewParams(params));

  const res = response.data;

  if (res.graytype) {
    graytype = res.graytype;
  }

  return response;
};

export const requestAjax = async (params, method = 'Get') => {
  const response = await method(getNewParams(params));

  const res = response.data;

  if (res.graytype) {
    graytype = res.graytype;
  }

  return response;
};

特点

  • 对原有对象进行扩展,从而实现对原有对象的控制或额外的操作

  • 对于不方便修改原有对象的,我们可以采用代理模式对其进行一层的包装