Agent React 入门指南：从零构建你的第一个智能代理系统

1次阅读

共计 2595 个字符，预计需要花费 7 分钟才能阅读完成。

在传统前端开发中，我们经常遇到需要处理复杂异步逻辑的场景。比如：

用户提交表单后需要等待多个 API 响应
实时数据更新导致界面频繁重绘
计算密集型任务阻塞主线程

Agent React 提供了一种全新的解决方案，它将业务逻辑从 UI 组件中抽离出来，通过独立的「代理」来处理这些任务。就像请了个专业管家，你只需要告诉它要做什么，具体怎么完成、什么时候完成，都由管家来操心。

// 传统回调写法
fetchUser(userId, function(user) {fetchOrders(user.id, function(orders) {updateUI(orders, function() {// 还有更多嵌套...});
  });
});

// Promise 链式调用
fetchUser(userId)
  .then(user => fetchOrders(user.id))
  .then(orders => updateUI(orders))
  .catch(handleError);

// 创建订单处理代理
const orderAgent = new Agent({async processOrder(userId: string) {const user = await fetchUser(userId);
    const orders = await fetchOrders(user.id);
    return {user, orders};
  }
});

// 在组件中调用
const result = await orderAgent.processOrder('123');

关键区别在于：Agent 是长期存在的独立处理单元，而 Promise 只是单次操作的包装器。

/**
 * 用户信息代理
 * @description 处理所有用户相关操作
 */
class UserAgent extends Agent {private users = new Map<string, User>();

  /**
   * 获取用户详情
   * @param userId 用户 ID
   * @returns 用户对象
   */
  async getUser(userId: string): Promise<User> {if (this.users.has(userId)) {return this.users.get(userId)!;
    }

    const user = await fetchUser(userId);
    this.users.set(userId, user);
    return user;
  }

  // 其他用户相关方法...
}

// 初始化代理
const userAgent = new UserAgent();

隔离性 ：每个 Agent 维护自己的内部状态
不可变性 ：对外返回的状态副本而非引用
响应式 ：通过事件通知状态变更

class CartAgent extends Agent {private _items: CartItem[] = [];

  get items(): ReadonlyArray<CartItem> {return [...this._items]; // 返回副本
  }

  addItem(item: CartItem) {this._items.push(item);
    this.emit('cart-updated', this.items);
  }
}

class PaymentAgent extends Agent {
  private retryCount = 0;

  async processPayment(payment: Payment) {
    try {return await pay(payment);
    } catch (error) {if (this.retryCount < 3) {
        this.retryCount++;
        return this.processPayment(payment);
      }
      this.emit('payment-failed', error);
      throw new PaymentError('支付处理失败');
    }
  }
}

定期清理不再使用的 Agent
大文件处理使用 Stream API
避免在 Agent 中保存大体积缓存

class ImageProcessor extends Agent {
  private cache = new LRU<string, ImageData>({maxSize: 100 // 最多缓存 100 张图片});
}

class DownloadAgent extends Agent {private activeDownloads = new Set<Promise<void>>();
  private MAX_CONCURRENT = 3;

  async download(url: string) {if (this.activeDownloads.size >= this.MAX_CONCURRENT) {await Promise.race(this.activeDownloads);
    }

    const task = downloadFile(url)
      .finally(() => this.activeDownloads.delete(task));

    this.activeDownloads.add(task);
    return task;
  }
}

常见场景：

AgentA 等待 AgentB 的响应
AgentB 同时也在等待 AgentA

解决方案：

设置超时机制
避免循环依赖
使用死锁检测工具

class LoggableAgent extends Agent {protected onError(error: Error) {logger.error(`[${this.constructor.name}]`, error);
  }

  protected onCall(method: string, args: any[]) {logger.debug(`[${this.constructor.name}] ${method}`, args);
  }
}

试着实现以下进阶功能：