Fetchr：通用数据访问层

Fetchr：通用数据访问层

fetchr Universal data access layer for web applications. 项目地址: https://gitcode.com/gh_mirrors/fe/fetchr

1. 项目介绍

Fetchr 是一个用于Web应用的通用数据访问层。在服务器端，我们通常会直接调用API或数据库来获取数据，但在客户端，由于跨域策略的限制，无法以同样的方式调用服务。Fetchr 提供了一个抽象层，使得在服务器端和客户端可以使用相同的API来获取数据。

2. 项目快速启动

以下是Fetchr的快速启动步骤，假设您正在使用Express框架。

服务器配置

1. 在服务器端，将Fetchr中间件添加到Express应用的定制API端点上。
2. 确保在Fetchr中间件之前使用 body-parser 中间件（或其它能填充 req.body 的中间件）。

const express = require('express');
const Fetcher = require('fetchr');
const bodyParser = require('body-parser');

const app = express();

// 在使用Fetchr中间件之前使用body-parser中间件
app.use(bodyParser.json());

// 在自定义API端点上使用Fetchr中间件
app.use('/myCustomAPIEndpoint', Fetcher.middleware());

客户端配置

在客户端，需要确保 xhrPath 选项与服务器端中间件挂载的路径相匹配。

const fetcher = new Fetcher({
  xhrPath: '/myCustomAPIEndpoint',
});

注册数据服务

需要在应用中注册任何想要使用的数据服务。服务接口必须定义一个 resource 属性和至少一个CRUD操作。

// dataService.js
export default {
  resource: 'data_service',
  read: async function({ req, resource, params, config }) {
    return {
      data: 'foo',
    };
  },
  // 可以定义其它CRUD操作
};

在应用中注册服务：

Fetcher.registerService(myDataService);

实例化Fetchr类

数据服务可能需要访问每个请求的详细信息，例如获取当前登录用户的会话。因此，Fetchr需要针对每个请求进行实例化。

在服务器端，这需要在Express中间件中为每个请求实例化Fetchr。

app.use(function(req, res, next) {
  const fetcher = new Fetcher({
    xhrPath: '/myCustomAPIEndpoint',
    req: req,
  });
  // 使用fetcher进行数据读取等操作
  next();
});

在客户端，实例化只需要在页面加载时进行一次。

3. 应用案例和最佳实践

请参考 Fetchr 的简单示例来了解如何在实际应用中使用它。

在使用Fetchr时，建议对常见的请求设置缓存头，可以在服务回调中通过提供第三个参数来实现。

export default {
  resource: 'data_service',
  read: async function({ req, resource, params, config }) {
    return {
      data: 'response',
      meta: {
        headers: {
          'cache-control': 'public, max-age=3600',
        },
        statusCode: 200,
      },
    };
  },
};

4. 典型生态项目

Fetchr 作为一个数据访问层，可以与许多Web应用框架和库一起使用，形成丰富的生态系统。例如，它可以与React、Vue等前端框架结合使用，为这些框架提供数据服务。同时，它也可以与各种后端技术栈集成，以支持复杂的数据操作需求。

fetchr Universal data access layer for web applications. 项目地址: https://gitcode.com/gh_mirrors/fe/fetchr