#网络

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

#使用 Fetch

Lynx 提供了用法和 Web 标准完全一致的 Fetch API，供熟悉 Web 开发的开发者使用。你可以查阅 MDN 文档的使用 Fetch 了解更多信息。

下面是一个使用 JSONPlaceholder API 获取并显示用户帖子的示例应用。应用启动后，在组件挂载（mounted）后触发 Fetch API 来请求帖子数据。获取的数据随后展示在一个可滚动的列表中，每个帖子都会显示其 id 和 title。如果请求仍在进行中，则界面上会显示 "Loading..." 消息。

networkingsrc/fetch/index.tsx

预览

#发起请求

通过 fetch 从任意 URL 获取内容：

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 可能抛出的任何错误。

#使用其他网络库

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

需要注意的是，Lynx 的 Fetch API 与 Web Fetch API 存在细微差异。你可以查阅 Fetch API Reference - Compatibility 了解更多关于这些差异的信息。因此，你可能需要调整 Web 生态中的库以确保兼容性。如果你在 Lynx Fetch API 上遇到任何问题，欢迎提交功能请求或贡献帮助 Lynx 更好地支持 Web 生态。

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