You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Many mobile apps need to load resources from remote URLs. You might want to make a POST request to a REST API, or you might need to fetch a large amount of static content from another server.
3
+
Many mobile apps need to load resources from remote URLs. You might want to make a POST request to a REST API or fetch a large amount of static content from another server.
4
4
5
5
## Using Fetch
6
6
7
7
:::tip
8
8
9
-
This feature depends on the http service provided by the integrated [Lynx Service](/guide/start/integrate-with-existing-apps).
9
+
This feature depends on the HTTP service provided by the integrated [Lynx Service](/guide/start/integrate-with-existing-apps).
10
10
11
11
:::
12
12
13
-
Lynx provides the[Fetch API](/api/lynx-api/global/fetch)with the same usage as the Web. You can refer to the MDN guides on [Using Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) for more information.
13
+
Lynx provides a[Fetch API](/api/lynx-api/global/fetch)that is compatible with the standard Web API. You can refer to the MDN guide on [Using Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) for more information.
14
14
15
-
This is an example app that fetches and displays user posts provided by the [JSONPlaceholder API](https://jsonplaceholder.typicode.com/). It initializes with a loading state and, upon mounting, triggers a Fetch API request to retrieve posts. The fetched data is then displayed in a scrollable list where each post is shown with its ID and title. If the request is still in progress, a "Loading..." message appears.
15
+
This example app fetches and displays user posts from the [JSONPlaceholder API](https://jsonplaceholder.typicode.com/). It initializes with a loading state andtriggers a Fetch API request to retrieve posts upon mounting. The fetched data is then displayed in a scrollable list, showing each post's ID and title. A "Loading..." message appears if the request is still in progress.
16
16
17
17
import { Go } from'@lynx';
18
18
@@ -24,15 +24,15 @@ import { Go } from '@lynx';
24
24
entry="src/fetch"
25
25
/>
26
26
27
-
### Making requests
27
+
### Making Requests
28
28
29
-
In order to fetch content from an arbitrary `URL`, you can pass the `URL` to `fetch`:
29
+
To fetch content from an arbitrary `URL`, you can pass the `URL` to `fetch`:
`fetch` also takes an optional second argument that allows you to customize the HTTP request. You may want to specify additional `headers`, make a `POST` request, or provide JSON-based`body`:
35
+
`fetch` also takes an optional second argument that allows you to customize the HTTP request. You may want to specify additional `headers`, make a `POST` request, or provide a JSON `body`:
Take a look at the [Fetch Request](/api/lynx-api/global/fetch#request) for the properties supported by Lynx.
52
52
53
-
### Handling the response
53
+
### Handling the Response
54
54
55
55
The above examples show how you can make a request. In many cases, you will want to do something with the response.
56
56
57
-
Networking is an inherently asynchronous operation. `fetch` method will return a `Promise` that makes it straightforward to write code that works in an asynchronous manner. You can use the `async/await` syntax to wait the `promise` to end:
57
+
Networking is an inherently asynchronous operation. The `fetch` method returns a `Promise`, which makes it straightforward to write code that works asynchronously. You can use the `async/await` syntax to await the promise's resolution:
Take a look at the [Fetch Response](/api/lynx-api/global/fetch#response) for the properties supported by Lynx.
74
74
75
-
Don't forget to catch any errors that may be thrown by `fetch`, otherwise they will be dropped silently.
75
+
Don't forget to catch any errors that `fetch` may throw; otherwise, they will be silently ignored.
76
76
77
-
## Fetch chunk streaming
77
+
## Chunked Transfer Encoding
78
78
79
-
Chunked encoding is useful when larger amounts of data are sent to the Front-End. Front-End can process each chunk
80
-
when the chunk is received, to reduce waiting duration.
79
+
Chunked Transfer Encoding is ideal for streaming large amounts of data to the client. This method allows the client to process data in chunks as they arrive, reducing overall latency.
81
80
82
-
You can refer to the MDN guides on [Transfer-Encoding chunked](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Transfer-Encoding#chunked)
83
-
to know more about chunk streaming standard.
81
+
To learn more about this standard, see the MDN guide on [Chunked transfer encoding](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Transfer-Encoding#chunked).
84
82
85
83
:::tip
86
84
87
-
To facilitate Front-End development, the http response body is split by Lynx:
85
+
To facilitate front-end development, the HTTP response body is processed by Lynx:
88
86
89
-
The chunk size and '\r\n' delimiters are removed, only the chunk contents are returned as `arraybuffer`.
87
+
The chunk size and `\r\n` delimiters are removed, and only the chunk's content is returned as an`arraybuffer`.
90
88
91
89
:::
92
90
93
-
To enable chunk streaming, you can mark switch `useStreaming`as`true` inside `lynxExtension`.
91
+
To enable chunked transfer encoding, set the `useStreaming`option to`true` inside `lynxExtension`.
You can refer to the MDN guides on [Response: body](https://developer.mozilla.org/en-US/docs/Web/API/Response/body)
113
101
to know more about how to process streaming body.
114
102
115
103
## Using TextCodecHelper
116
104
117
-
Due to lack of support of `TextEncoder/TextDecoder` in `PrimJS`, to support
118
-
basic usages of encoding and decoding, Lynx provides `TextCodecHelper`. This
119
-
class supports conversions between `string` and `arraybuffer` under `utf-8`.
120
-
How to use:
105
+
Due to the lack of `TextEncoder`/`TextDecoder` support in `PrimJS`, Lynx provides
106
+
`TextCodecHelper` for basic encoding and decoding operations. This class
107
+
supports `UTF-8` conversions between `string` and `arraybuffer`.
108
+
109
+
Usage:
121
110
122
-
convert`arraybuffer` to `string`
111
+
Convert`arraybuffer` to `string`:
123
112
124
113
```typescript
125
114
const str =TextCodecHelper.decode(arraybuffer);
126
115
```
127
116
128
-
convert`string` to `arraybuffer`
117
+
Convert`string` to `arraybuffer`:
129
118
130
119
```typescript
131
120
const arraybuffer =TextCodecHelper.encode(str);
132
121
```
133
122
134
123
## Using Other Networking Libraries
135
124
136
-
Since The Fetch API is built into Lynx. This means that you can use thirdparty libraries that depend on it.
125
+
The Fetch API is built into Lynx, which means you can use third-party libraries that rely on it.
137
126
138
-
It is important to note that Lynx's Fetch API has subtle differences compared to the [Web Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API). You can check the [Fetch API Reference - Compatibility](/api/lynx-api/global/fetch#compatibility) section to learn more about these differences. As a result, you may need to adapt libraries from the Web ecosystem to ensure compatibility. If you encounter any issues on Lynx Fetch API, you are welcome to submit feature requests or [contribute](https://github.com/lynx-family/lynx/blob/develop/CONTRIBUTING.md) to help Lynx better support the Web ecosystem.
127
+
It is important to note that Lynx's Fetch API has subtle differences compared to the [Web Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API). You can check the [Fetch API Reference - Compatibility](/api/lynx-api/global/fetch#compatibility) section to learn more about these differences. As a result, you may need to adapt libraries from the web ecosystem to ensure compatibility. If you encounter any issues with the Lynx Fetch API, you are welcome to submit feature requests or [contribute](https://github.com/lynx-family/lynx/blob/develop/CONTRIBUTING.md) to help Lynx better support the web ecosystem.
139
128
140
-
For frontend framework-specific data fetching solutions, such as using [TanStack Query (React Query)](https://tanstack.com/query/latest) in ReactLynx, you can refer to the [Data Fetching](/react/data-fetching) chapter of ReactLynx guide.
129
+
For front-end framework-specific data fetching solutions, such as using [TanStack Query (React Query)](https://tanstack.com/query/latest) in ReactLynx, you can refer to the [Data Fetching](/react/data-fetching) chapter of the ReactLynx guide.
Lynx 提供了用法和 Web 标准完全一致的[Fetch API](/api/lynx-api/global/fetch)，供熟悉 Web 开发的开发者使用。你可以查阅 MDN 文档的[使用 Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)了解更多信息。
13
+
Lynx 提供了与 Web 标准兼容的[Fetch API](/api/lynx-api/global/fetch)，用法与 Web 平台保持一致。你可以查阅 MDN 的[使用 Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)指南了解更多信息。
14
14
15
-
下面是一个使用[JSONPlaceholder API](https://jsonplaceholder.typicode.com/)获取并显示用户帖子的示例应用。应用启动后，在组件挂载（mounted）后触发 Fetch API 来请求帖子数据。获取的数据随后展示在一个可滚动的列表中，每个帖子都会显示其`id` 和 `title`。如果请求仍在进行中，则界面上会显示 "Loading..." 消息。
15
+
以下示例展示了一个从[JSONPlaceholder API](https://jsonplaceholder.typicode.com/)获取并显示用户帖子的应用。该应用在启动后会显示加载状态，并在组件挂载（mounted）后触发 Fetch API 请求以获取帖子数据。获取的数据将显示在一个可滚动的列表中，其中每个帖子都包含其`id` 和 `title`。如果请求仍在进行中，界面将显示 “Loading...” 消息。
需要注意的是，Lynx 的 Fetch API 与 [Web Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)存在细微差异。你可以查阅 [Fetch API Reference - Compatibility](/api/lynx-api/global/fetch#compatibility) 了解更多关于这些差异的信息。因此，你可能需要调整 Web 生态中的库以确保兼容性。如果你在 Lynx Fetch API 上遇到任何问题，欢迎提交功能请求或[贡献](https://github.com/lynx-family/lynx/blob/develop/CONTRIBUTING.md)帮助 Lynx 更好地支持 Web 生态。
125
+
值得注意的是，Lynx 的 Fetch API 与 [Web Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)相比存在细微差异。你可以查阅 [Fetch API 参考 - 兼容性](/api/lynx-api/global/fetch#compatibility)部分以了解更多信息。因此，你可能需要调整来自 Web 生态系统的库以确保兼容性。如果你在使用 Lynx Fetch API 时遇到任何问题，欢迎提交功能请求或通过[贡献](https://github.com/lynx-family/lynx/blob/develop/CONTRIBUTING.md)来帮助 Lynx 更好地支持 Web 生态系统。
0 commit comments