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
Copy file name to clipboardExpand all lines: adev-ja/src/content/ai/develop-with-ai.md
+1-1Lines changed: 1 addition & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -31,6 +31,6 @@ Several editors, such as <a href="https://studio.firebase.google.com?utm_source=
31
31
32
32
33
33
* <ahref="/llms.txt"target="_blank">llms.txt</a> - an index file providing links to key files and resources.
34
-
* <ahref="/llms-full.txt"target="_blank">llms-full.txt</a> - a more robust compiled set of resources describing how Angular works and how to build Angular applications.
34
+
* <ahref="/context/llm-files/llms-full.txt"target="_blank">llms-full.txt</a> - a more robust compiled set of resources describing how Angular works and how to build Angular applications.
35
35
36
36
Be sure [to check out the overview page](/ai) for more information on how to integrate AI into your Angular applications.
Copy file name to clipboardExpand all lines: adev-ja/src/content/guide/http/making-requests.en.md
+225-2Lines changed: 225 additions & 2 deletions
Original file line number
Diff line number
Diff line change
@@ -198,19 +198,242 @@ Each `HttpEvent` reported in the event stream has a `type` which distinguishes w
198
198
199
199
## Handling request failure
200
200
201
-
There are two ways an HTTP request can fail:
201
+
There are three ways an HTTP request can fail:
202
202
203
203
* A network or connection error can prevent the request from reaching the backend server.
204
+
* A request didn't respond in time when the timeout option was set.
204
205
* The backend can receive the request but fail to process it, and return an error response.
205
206
206
-
`HttpClient` captures both kinds of errors in an `HttpErrorResponse` which it returns through the `Observable`'s error channel. Network errors have a `status` code of `0` and an `error` which is an instance of [`ProgressEvent`](https://developer.mozilla.org/docs/Web/API/ProgressEvent). Backend errors have the failing `status` code returned by the backend, and the error response as the `error`. Inspect the response to identify the error's cause and the appropriate action to handle the error.
207
+
`HttpClient` captures all of the above kinds of errors in an `HttpErrorResponse` which it returns through the `Observable`'s error channel. Network and timeout errors have a `status` code of `0` and an `error` which is an instance of [`ProgressEvent`](https://developer.mozilla.org/docs/Web/API/ProgressEvent). Backend errors have the failing `status` code returned by the backend, and the error response as the `error`. Inspect the response to identify the error's cause and the appropriate action to handle the error.
207
208
208
209
The [RxJS library](https://rxjs.dev/) offers several operators which can be useful for error handling.
209
210
210
211
You can use the `catchError` operator to transform an error response into a value for the UI. This value can tell the UI to display an error page or value, and capture the error's cause if necessary.
211
212
212
213
Sometimes transient errors such as network interruptions can cause a request to fail unexpectedly, and simply retrying the request will allow it to succeed. RxJS provides several *retry* operators which automatically re-subscribe to a failed `Observable` under certain conditions. For example, the `retry()` operator will automatically attempt to re-subscribe a specified number of times.
213
214
215
+
### Timeouts
216
+
217
+
To set a timeout for a request, you can set the `timeout` option to a number of milliseconds along other request options. If the backend request does not complete within the specified time, the request will be aborted and an error will be emitted.
218
+
219
+
NOTE: The timeout will only apply to the backend HTTP request itself. It is not a timeout for the entire request handling chain. Therefore, this option is not affected by any delay introduced by interceptors.
// If the request times out, an error will have been emitted.
230
+
}
231
+
});
232
+
</docs-code>
233
+
234
+
## Advanced fetch options
235
+
236
+
When using the `withFetch()` provider, Angular's `HttpClient` provides access to advanced fetch API options that can improve performance and user experience. These options are only available when using the fetch backend.
237
+
238
+
### Fetch options
239
+
240
+
The following options provide fine-grained control over request behavior when using the fetch backend.
241
+
242
+
#### Keep-alive connections
243
+
244
+
The `keepalive` option allows a request to outlive the page that initiated it. This is particularly useful for analytics or logging requests that need to complete even if the user navigates away from the page.
245
+
246
+
<docs-codelanguage="ts">
247
+
http.post('/api/analytics', analyticsData, {
248
+
keepalive: true
249
+
}).subscribe();
250
+
</docs-code>
251
+
252
+
#### HTTP caching control
253
+
254
+
The `cache` option controls how the request interacts with the browser's HTTP cache, which can significantly improve performance for repeated requests.
255
+
256
+
<docs-codelanguage="ts">
257
+
// Use cached response regardless of freshness
258
+
http.get('/api/config', {
259
+
cache: 'force-cache'
260
+
}).subscribe(config => {
261
+
// ...
262
+
});
263
+
264
+
// Always fetch from network, bypass cache
265
+
http.get('/api/live-data', {
266
+
cache: 'no-cache'
267
+
}).subscribe(data => {
268
+
// ...
269
+
});
270
+
271
+
// Use cached response only, fail if not in cache
272
+
http.get('/api/static-data', {
273
+
cache: 'only-if-cached'
274
+
}).subscribe(data => {
275
+
// ...
276
+
});
277
+
</docs-code>
278
+
279
+
#### Request priority for Core Web Vitals
280
+
281
+
The `priority` option allows you to indicate the relative importance of a request, helping browsers optimize resource loading for better Core Web Vitals scores.
282
+
283
+
<docs-codelanguage="ts">
284
+
// High priority for critical resources
285
+
http.get('/api/user-profile', {
286
+
priority: 'high'
287
+
}).subscribe(profile => {
288
+
// ...
289
+
});
290
+
291
+
// Low priority for non-critical resources
292
+
http.get('/api/recommendations', {
293
+
priority: 'low'
294
+
}).subscribe(recommendations => {
295
+
// ...
296
+
});
297
+
298
+
// Auto priority (default) lets the browser decide
299
+
http.get('/api/settings', {
300
+
priority: 'auto'
301
+
}).subscribe(settings => {
302
+
// ...
303
+
});
304
+
</docs-code>
305
+
306
+
Available `priority` values:
307
+
-`'high'`: High priority, loaded early (e.g., critical user data, above-the-fold content)
308
+
-`'low'`: Low priority, loaded when resources are available (e.g., analytics, prefetch data)
309
+
-`'auto'`: Browser determines priority based on request context (default)
310
+
311
+
TIP: Use `priority: 'high'` for requests that affect Largest Contentful Paint (LCP) and `priority: 'low'` for requests that don't impact initial user experience.
312
+
313
+
#### Request mode
314
+
315
+
The `mode` option controls how the request handles cross-origin requests and determines the response type.
TIP: Use `redirect: 'manual'` when you need to handle redirects with custom logic.
385
+
386
+
#### Credentials handling
387
+
388
+
The `credentials` option controls whether cookies, authorization headers, and other credentials are sent with cross-origin requests. This is particularly important for authentication scenarios.
// Never send credentials (default for cross-origin)
399
+
http.get('https://api.example.com/public-data', {
400
+
credentials: 'omit'
401
+
}).subscribe(data => {
402
+
// ...
403
+
});
404
+
405
+
// Send credentials only for same-origin requests
406
+
http.get('/api/user-data', {
407
+
credentials: 'same-origin'
408
+
}).subscribe(data => {
409
+
// ...
410
+
});
411
+
412
+
// withCredentials overrides credentials setting
413
+
http.get('https://api.example.com/data', {
414
+
credentials: 'omit', // This will be ignored
415
+
withCredentials: true // This forces credentials: 'include'
416
+
}).subscribe(data => {
417
+
// Request will include credentials despite credentials: 'omit'
418
+
});
419
+
420
+
// Legacy approach (still supported)
421
+
http.get('https://api.example.com/data', {
422
+
withCredentials: true
423
+
}).subscribe(data => {
424
+
// Equivalent to credentials: 'include'
425
+
});
426
+
</docs-code>
427
+
428
+
IMPORTANT: The `withCredentials` option takes precedence over the `credentials` option. If both are specified, `withCredentials: true` will always result in `credentials: 'include'`, regardless of the explicit `credentials` value.
429
+
430
+
Available `credentials` values:
431
+
-`'omit'`: Never send credentials
432
+
-`'same-origin'`: Send credentials only for same-origin requests (default)
433
+
-`'include'`: Always send credentials, even for cross-origin requests
434
+
435
+
TIP: Use `credentials: 'include'` when you need to send authentication cookies or headers to a different domain that supports CORS. Avoid mixing `credentials` and `withCredentials` options to prevent confusion.
436
+
214
437
## Http `Observable`s
215
438
216
439
Each request method on `HttpClient` constructs and returns an `Observable` of the requested response type. Understanding how these `Observable`s work is important when using `HttpClient`.
0 commit comments