如何实现无需.get()的链式API调用自动触发请求？

Supabase的链式调用之所以不用额外的.get()，是因为它返回的查询构建对象实现了thenable接口——只要一个对象拥有then方法，JavaScript就会把它当成可等待的Promise处理，await时自动触发then方法里的请求逻辑。你完全可以复刻这个逻辑实现自己的API服务。

实现思路 #

1. 定义一个查询构建类，所有链式方法（比如whereIn、whereLowerThan）负责收集查询条件，每次调用都返回实例本身，维持链式调用能力。
2. 给类添加then方法，当await触发时，这个方法会自动执行，用之前收集的条件发起API请求，最终返回包含data、pending、error的结果对象。

代码示例 #

class ProductsQueryBuilder {
  constructor() {
    this.queryConditions = {};
    this.pending = false;
  }

  // 链式方法：收集id范围条件
  whereIn(field, values) {
    this.queryConditions[field] = { type: 'in', value: values };
    return this;
  }

  // 链式方法：收集价格小于条件
  whereLowerThan(field, value) {
    this.queryConditions[field] = { type: 'lt', value };
    return this;
  }

  // 核心：实现thenable接口，让await自动触发请求
  then(resolve) {
    this.pending = true;
    
    // 替换成你的实际API请求逻辑
    fetch('https://your-api-domain/products', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(this.queryConditions)
    })
    .then(async res => {
      this.pending = false;
      if (!res.ok) throw new Error(await res.text());
      const data = await res.json();
      resolve({ data, pending: false, error: null });
    })
    .catch(err => {
      this.pending = false;
      resolve({ data: null, pending: false, error: err.message });
    });
  }
}

// 工厂函数，返回查询构建实例
function useProductsService() {
  return new ProductsQueryBuilder();
}

// 使用示例
async function fetchFilteredProducts() {
  const { data, pending, error } = await useProductsService()
    .whereIn('id', [123, 12, 521])
    .whereLowerThan('price', 300);

  if (error) {
    console.error('请求失败:', error);
    return;
  }
  console.log('筛选后的产品:', data);
}

关键细节 #

• 链式方法必须返回this：确保每次调用方法后都能继续链式调用，持续收集查询条件。
• then方法是核心：await会自动识别thenable对象并调用其then方法，这一步就是发起请求的触发点。
• 状态处理：示例中通过pending变量跟踪请求状态，最终返回给调用方，符合你期望的返回结构。

可选扩展 #

• 支持try/catch：如果需要让异常直接抛出，可以在then方法里调用reject替代resolve错误对象，这样用户需要用try/catch包裹await。
• 扩展更多链式方法：比如whereEqual、orderBy、limit等，只要在方法里更新queryConditions并返回this即可。

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