网络

许多移动应用需要从远程 URL 加载资源。你可能想要向 REST API 发出 POST 请求，或者可能需要从另一台服务器获取大量静态内容。

使用 Fetch

TIP

本功能依赖于已集成的 Lynx Service 所提供的 HTTP 服务。

Lynx 提供了与 Web 标准兼容的 Fetch API，用法与 Web 平台保持一致。你可以查阅 MDN 的使用 Fetch 指南了解更多信息。

以下示例展示了一个从 JSONPlaceholder API 获取并显示用户帖子的应用。该应用在启动后会显示加载状态，并在组件挂载（mounted）后触发 Fetch API 请求以获取帖子数据。获取的数据将显示在一个可滚动的列表中，其中每个帖子都包含其 id 和 title。如果请求仍在进行中，界面将显示 “Loading...” 消息。

发起请求

要从任意 URL 获取内容，你可以将 URL 传递给 fetch：

fetch('https://jsonplaceholder.typicode.com/todos/1');

fetch 还接受第二个可选参数，用于自定义 HTTP 请求。你可以指定额外的 header、发起 POST 请求或提供 JSON 格式的 body：

fetch('https://jsonplaceholder.typicode.com/todos/1', {
  method: 'POST',
  headers: {
    'some-header': 'header',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    firstParam: 'yourValue',
    secondParam: 'yourOtherValue',
  }),
});

请参阅 Fetch Request 了解 Lynx 支持的属性。

处理响应

以上示例展示了如何发起请求。在许多情况下，你还需要处理响应。

网络请求是一项异步操作。fetch 方法会返回一个 Promise，这使得编写异步代码变得非常简单。你可以使用 async/await 语法来等待 Promise 的解析：

const getDataFromApiAsync = async () => {
  try {
    const response = await fetch(
      'https://jsonplaceholder.typicode.com/todos/1',
    );
    const json = await response.json();
    return json;
  } catch (error) {
    console.error(error);
  }
};

请参阅 Fetch Response 了解 Lynx 支持的属性。

不要忘记捕获 fetch 可能抛出的任何错误，否则它们将被静默忽略。

分块传输编码

对于流式传输大量数据到客户端的场景，分块传输编码（Chunked Transfer Encoding）是理想的选择。该方法允许客户端在数据块到达时进行处理，从而减少整体延迟。

要了解有关此标准的更多信息，请参阅 MDN 关于分块传输编码的指南。

TIP

为了简化前端开发，Lynx 会对 HTTP 响应体进行处理：

块大小和 \r\n 分隔符会被移除，仅将块内容返回。

要启用分块传输编码，请在 lynxExtension 中将 useStreaming 选项设置为 true。

你可以查阅 MDN 文档的 Response: body 了解如何处理 streaming body。

使用 TextCodecHelper

由于 PrimJS 缺少对 TextEncoder/TextDecoder 的支持，Lynx 提供了 TextCodecHelper 以满足基本的编解码需求。该类支持在 UTF-8 编码下 string 与 arraybuffer 之间的转换。

用法如下：

将 arraybuffer 转换为 string：

const str = TextCodecHelper.decode(arraybuffer);

将 string 转换为 arraybuffer：

const arraybuffer = TextCodecHelper.encode(str);

使用其他网络库

Fetch API 已内置于 Lynx，这意味着你可以使用依赖于它的第三方库。

值得注意的是，Lynx 的 Fetch API 与 Web Fetch API 相比存在细微差异。你可以查阅 Fetch API 参考 - 兼容性部分以了解更多信息。因此，你可能需要调整来自 Web 生态系统的库以确保兼容性。如果你在使用 Lynx Fetch API 时遇到任何问题，欢迎提交功能请求或通过贡献来帮助 Lynx 更好地支持 Web 生态系统。

对于特定于前端框架的数据获取解决方案，例如在 ReactLynx 中使用 TanStack Query (React Query)，你可以参考 ReactLynx 指南的数据获取一章。

除非另有说明，本项目采用知识共享署名 4.0 国际许可协议进行许可，代码示例采用 Apache License 2.0 许可协议进行许可。

#网络

#使用 Fetch

#发起请求

#处理响应

#分块传输编码

#使用 TextCodecHelper