如何基于动态更新的对象构造URL并触发新请求？

这个需求其实很常见，核心就是监听对象的属性变化，一旦有更新就自动触发URL构造和请求发送。我给你几个实用的方案，从基础到进阶都有：

方案一：使用ES6 Proxy（推荐，现代浏览器支持） #

Proxy是ES6引入的特性，可以完美监听对象的属性新增、修改，甚至数组的操作（比如push、pop），比传统的Object.defineProperty灵活太多。

步骤1：编写URL构造函数 #

首先我们需要把对象转换成符合要求的查询参数，尤其要处理数组转成10-39这种格式：

function buildUrl(obj) {
  const baseUrl = 'api/?conf';
  const params = [];
  
  // 遍历对象的每个属性
  for (const key in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
      let value = obj[key];
      // 数组特殊处理：转成连字符连接的字符串
      if (Array.isArray(value)) {
        value = value.join('-');
      }
      // 注意编码，避免特殊字符导致URL错误
      params.push(`${encodeURIComponent(key)}=${encodeURIComponent(value)}`);
    }
  }
  
  // 拼接基础URL、参数和固定额外数据
  return `${baseUrl}&${params.join('&')}&some_other_data`;
}

步骤2：编写请求发送函数 #

这里用原生fetch做示例，你也可以换成axios等库：

async function sendRequest(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
    const data = await response.json();
    console.log('请求成功，返回数据:', data);
    // 这里可以添加你的业务逻辑，比如更新页面
  } catch (error) {
    console.error('请求失败:', error);
  }
}

步骤3：用Proxy监听对象变化 #

把原始对象包裹在Proxy里，监听属性的设置和数组操作：

// 原始数据对象
let myObj = { val1: 'someVal1', val2: 'someVal2', val3: [10, 39] };

// 创建可监听的代理对象
const observableObj = new Proxy(myObj, {
  // 监听属性赋值操作
  set(target, prop, value) {
    // 先更新对象属性
    target[prop] = value;
    // 构造新URL并发送请求
    const newUrl = buildUrl(target);
    sendRequest(newUrl);
    // 返回true表示设置成功（必须）
    return true;
  },
  
  // 监听数组方法（比如push、pop、splice）
  get(target, prop) {
    // 如果当前属性是数组的方法，先包装一下
    if (Array.isArray(target) && typeof target[prop] === 'function') {
      return function(...args) {
        // 执行原数组方法
        const result = target[prop](...args);
        // 数组变化后触发请求
        const newUrl = buildUrl(target);
        sendRequest(newUrl);
        return result;
      };
    }
    // 普通属性直接返回
    return target[prop];
  }
});

测试一下 #

现在你修改代理对象的任何属性，或者操作数组，都会自动发送请求：

// 修改普通属性
observableObj.val1 = 'newVal1';
// 操作数组
observableObj.val3.push(50); // 此时val3变成[10,39,50]，URL里会是val3=10-39-50

进阶优化：添加防抖 #

如果对象会被频繁修改（比如用户快速输入），连续发送请求会浪费资源，我们可以给请求加个防抖，延迟一段时间再发送，确保只发最后一次更新的请求：

// 防抖函数：delay是延迟毫秒数，默认300ms
function debounce(func, delay = 300) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

// 把发送请求的函数防抖处理
const debouncedSendRequest = debounce(sendRequest);

// 然后把Proxy里的sendRequest替换成debouncedSendRequest即可

方案二：Object.defineProperty（兼容旧浏览器） #

如果需要兼容ES6之前的浏览器，可以用Object.defineProperty给每个属性单独设置setter，但这种方式只能监听已有的属性，新增属性需要手动处理，数组操作也需要额外监听，比较繁琐，这里给个简单示例：

let myObj = {};
// 监听val1属性
Object.defineProperty(myObj, 'val1', {
  get() { return this._val1; },
  set(newVal) {
    this._val1 = newVal;
    const newUrl = buildUrl(myObj);
    sendRequest(newUrl);
  },
  enumerable: true
});
// 其他属性需要重复这个过程...

显然Proxy方案更优雅，推荐优先使用。

内容的提问来源于stack exchange，提问作者Sasha Zoria