JavaScript内核与高级编程之：`JavaScript`的`Proxy`模式：其在`API`代理和`GraphQL`中的应用。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

大家好，我是今天的客座讲师，咱们今天聊聊JavaScript的Proxy模式，这玩意儿听起来高大上，其实就是个“中间人”，专门负责拦截和修改我们对对象的操作。今天咱们就用大白话，加上代码示例，好好扒一扒它的皮，再看看它在API代理和GraphQL中的妙用。

一、Proxy：你对象的“贴身保镖”

想象一下，你家有个保险箱，里面装着你最宝贝的“对象”。以前，你想直接打开保险箱（访问对象），直接拿东西（操作对象）。现在呢，你请了个“保镖”（Proxy），你想拿东西，先得跟保镖打招呼，保镖觉得没问题，才让你去拿；甚至，保镖还能偷偷把你要拿的东西换成别的，或者记录下你拿了什么。

这就是Proxy的核心思想：拦截并自定义对象的操作。它可以拦截的操作多得很，比如：

get(target, property, receiver)：读取属性时触发
set(target, property, value, receiver)：设置属性时触发
has(target, property)：使用in操作符时触发
deleteProperty(target, property)：使用delete操作符时触发
apply(target, thisArg, argumentsList)：调用函数时触发
construct(target, argumentsList, newTarget)：使用new操作符时触发
getPrototypeOf(target)：读取对象的原型时触发
setPrototypeOf(target, prototype)：设置对象的原型时触发
isExtensible(target)：判断对象是否可扩展时触发
preventExtensions(target)：阻止对象扩展时触发
getOwnPropertyDescriptor(target, property)：获取属性描述符时触发
defineProperty(target, property, descriptor)：定义属性时触发
ownKeys(target)：获取对象自身的所有属性键时触发

这么多操作，是不是有点眼花缭乱？别怕，咱们慢慢来，先看个最简单的例子：

const target = {
  name: '张三',
  age: 30
};

const handler = {
  get: function(target, property, receiver) {
    console.log(`有人想看我的${property}啦！`);
    return target[property];
  }
};

const proxy = new Proxy(target, handler);

console.log(proxy.name); // 输出：有人想看我的name啦！  张三
console.log(proxy.age);  // 输出：有人想看我的age啦！   30

在这个例子中，我们创建了一个target对象，然后创建了一个handler对象，handler对象里定义了一个get方法。这个get方法会在每次读取proxy的属性时被调用。当我们访问proxy.name和proxy.age时，就会触发get方法，打印出日志。

解释一下：

target：这是你要代理的原始对象，也就是你的“保险箱”。
handler：这是一个对象，里面定义了各种“拦截器”，也就是你的“保镖”。每个拦截器对应一个操作，比如get、set等。
proxy：这是通过new Proxy(target, handler)创建的代理对象。以后，你访问对象就不是直接访问target了，而是访问proxy。

再来一个更复杂的例子，这次我们加上set拦截器：

const target = {
  name: '张三',
  age: 30
};

const handler = {
  get: function(target, property, receiver) {
    console.log(`有人想看我的${property}啦！`);
    return target[property];
  },
  set: function(target, property, value, receiver) {
    console.log(`有人想修改我的${property}，想改成${value}！`);
    if (property === 'age' && typeof value !== 'number') {
      throw new Error('年龄必须是数字！');
    }
    target[property] = value;
    return true; // 表示设置成功
  }
};

const proxy = new Proxy(target, handler);

proxy.name = '李四'; // 输出：有人想修改我的name，想改成李四！
proxy.age = 35;   // 输出：有人想修改我的age，想改成35！
console.log(proxy.age);
try {
  proxy.age = '二十八'; // 输出：有人想修改我的age，想改成二十八！
} catch (error) {
  console.error(error.message); // 输出：年龄必须是数字！
}

console.log(proxy.age); // 输出 35

在这个例子中，我们添加了set拦截器。当我们要设置proxy的属性时，set方法会被调用。我们可以在set方法里做一些验证，比如检查age属性的值是否是数字。如果不是数字，就抛出一个错误。

总结一下Proxy的优点：

控制访问： 可以限制对对象的访问，比如只允许读取某些属性，或者禁止修改某些属性。
数据验证： 可以在设置属性时进行数据验证，确保数据的有效性。
日志记录： 可以记录对对象的操作，方便调试和追踪问题。
扩展功能： 可以在不修改原始对象的情况下，给对象添加新的功能。
拦截并改变结果: 可以对返回结果进行拦截, 并且根据业务需要修改返回结果

二、Proxy在API代理中的应用：一个请求的“变形记”

现在，咱们来聊聊Proxy在API代理中的应用。API代理是指，你不是直接访问目标API，而是先访问一个代理服务器，代理服务器再帮你访问目标API，并将结果返回给你。

Proxy在API代理中可以做什么呢？可以做的事情太多了，比如：

修改请求： 可以在请求发送到目标API之前，修改请求的URL、Header、Body等。
修改响应： 可以在目标API返回响应之后，修改响应的状态码、Header、Body等。
缓存数据： 可以将目标API返回的数据缓存起来，下次再请求相同的数据时，直接从缓存中返回，减少对目标API的访问。
添加认证： 可以在请求中添加认证信息，比如Token，确保请求的安全性。
限流： 可以限制对目标API的访问频率，防止API被滥用。
监控： 可以监控API的访问情况，比如请求次数、响应时间等。

举个例子，假设我们要代理一个获取用户信息的API：

const targetAPI = 'https://api.example.com/user'; // 目标API

async function getUserInfo(userId) {
  const url = `${targetAPI}/${userId}`;
  const response = await fetch(url);
  const data = await response.json();
  return data;
}

// 使用Proxy进行API代理
const proxyHandler = {
  apply: async function(target, thisArg, argumentsList) {
    const userId = argumentsList[0];
    console.log(`准备获取用户ID为${userId}的信息...`);

    // 修改请求
    const modifiedUserId = userId.startsWith('test') ? userId.replace('test', 'demo') : userId;
    console.log(`修改后的用户ID为${modifiedUserId}...`);

    // 执行原始函数
    const data = await target(modifiedUserId);
    // 修改响应
    const modifiedData = {
      ...data,
      fromProxy: true // 添加一个标记，表示数据来自代理
    };

    console.log(`获取用户信息成功，数据为：${JSON.stringify(modifiedData)}`);
    return modifiedData;
  }
};

const proxyGetUserInfo = new Proxy(getUserInfo, proxyHandler);

async function main() {
  const userInfo1 = await proxyGetUserInfo(123);
  console.log("第一次调用结果", userInfo1);

  const userInfo2 = await proxyGetUserInfo('test456');
  console.log("第二次调用结果", userInfo2);

}

main();

//模拟fetch
global.fetch = async (url) => {
  let userId = url.split('/').pop();
  return new Promise((resolve) => {
      setTimeout(() => {
          resolve({
              json: () => Promise.resolve({id: userId, name: 'testUser'})
          })
      }, 100)
  });
}

在这个例子中，我们创建了一个proxyHandler对象，里面定义了一个apply方法。apply方法会在每次调用proxyGetUserInfo函数时被调用。在apply方法里，我们可以修改请求的URL，添加认证信息，缓存数据，修改响应等等。

在这个例子中，我们做了以下事情：

修改请求： 如果用户ID以test开头，就把它替换成demo。
修改响应： 在响应数据中添加一个fromProxy属性，表示数据来自代理。

三、Proxy在GraphQL中的应用：灵活的“数据变形金刚”

GraphQL是一种API查询语言，它允许客户端只请求自己需要的数据，而不是像REST API那样返回所有数据。Proxy在GraphQL中可以做什么呢？可以做的事情也很多，比如：

字段级别的权限控制： 可以控制客户端可以访问哪些字段。
数据转换： 可以将GraphQL API返回的数据转换成客户端需要的格式。
数据聚合： 可以将多个GraphQL API返回的数据聚合在一起。
缓存： 可以缓存GraphQL API返回的数据。

举个例子，假设我们有一个GraphQL API，返回用户的信息：

type User {
  id: ID!
  name: String!
  email: String
  age: Int
  address: String
  phoneNumber: String
}

type Query {
  user(id: ID!): User
}

现在，我们想对这个API进行一些限制：

只允许客户端访问id和name字段。
如果用户没有提供email，就返回一个默认值。
隐藏age字段。
如果用户提供了address，就对address进行加密。

我们可以使用Proxy来实现这些限制：

const originalResolver = (obj, args, context, info) => {
  // 假设这里是从数据库或者其他数据源获取数据的逻辑
  // 这里为了演示，直接返回一个mock数据
  const userId = args.id;
  return {
      id: userId,
      name: `User ${userId}`,
      email: `user${userId}@example.com`,
      age: 30,
      address: 'Some Address',
      phoneNumber: '123-456-7890'
  };
};

const proxyHandler = {
    apply: function(target, thisArg, argumentsList) {
        const obj = argumentsList[0];
        const args = argumentsList[1];
        const context = argumentsList[2];
        const info = argumentsList[3];

        const result = target(obj, args, context, info); // 调用原始的resolver
        // 使用 Proxy 进行数据转换和过滤
        const proxyResult = new Proxy(result, {
            get: function(target, property, receiver) {
                if (property === 'email' && !target[property]) {
                    return '[email protected]'; // 提供默认值
                }
                if (property === 'age') {
                    return undefined; // 隐藏 age 字段
                }
                if (property === 'address' && target[property]) {
                    return `Encrypted: ${target[property]}`; // 加密 address 字段
                }

                if (['id', 'name', 'email', 'address'].includes(property)){
                  return Reflect.get(target, property, receiver);
                }
                return undefined;
            },
            has: function(target, property) {
                // 限制可以访问的字段
                return ['id', 'name'].includes(property);
            },
            ownKeys: function(target) {
                return ['id', 'name'];
            }
        });

        return proxyResult;
    }
};

const proxiedResolver = new Proxy(originalResolver, proxyHandler);

// 模拟GraphQL查询
async function simulateGraphQLQuery(userId) {
    const query = `
        query {
            user(id: "${userId}") {
                id
                name
                email
                age
                address
                phoneNumber
            }
        }
    `;

    // 在实际应用中，你需要使用GraphQL服务器来执行查询
    // 这里我们只是模拟查询并调用proxiedResolver
    const args = { id: userId };
    const context = {};
    const info = { fieldName: 'user' }; // 模拟GraphQL的info对象

    const result = await proxiedResolver(null, {id: userId}, {}, info);
    console.log("模拟GraphQL查询结果:", result);
}

// 运行模拟查询
simulateGraphQLQuery(123);
simulateGraphQLQuery(456);

在这个例子中，我们创建了一个proxyHandler对象，里面定义了get、has和ownKeys方法。

get方法：用于拦截对字段的访问。如果字段是email，并且用户没有提供email，就返回一个默认值。如果字段是age，就返回undefined，表示隐藏该字段。如果字段是address，就对address进行加密。
has方法：用于限制可以访问的字段。只有id和name字段可以被访问。
ownKeys方法: 用于指定对象拥有的属性, 同样也限制可以访问的字段。

通过使用Proxy，我们可以灵活地控制GraphQL API返回的数据，满足不同的需求。

四、Proxy的注意事项：小心驶得万年船

Proxy虽然强大，但也有些需要注意的地方：

性能： Proxy会增加额外的开销，因为每次访问对象都要经过Proxy的拦截。如果Proxy的逻辑很复杂，可能会影响性能。
兼容性： Proxy是ES6的新特性，一些老版本的浏览器可能不支持。
调试： Proxy会使调试变得更加困难，因为你不知道什么时候Proxy会拦截你的操作。

五、总结：Proxy，你的JavaScript瑞士军刀

Proxy是JavaScript中一个非常强大的特性，它可以让你拦截和自定义对象的操作。它可以应用于很多场景，比如API代理、GraphQL、数据验证、日志记录等等。

虽然Proxy有一些需要注意的地方，但只要你小心使用，它就可以成为你的JavaScript瑞士军刀，帮助你解决各种问题。

希望今天的讲解对你有所帮助！下次再见！

发表回复 取消回复

发表回复取消回复