mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
323ffc98eb
un-commented tags are responsible for rendering problem of markdown document. This commit fixes the http make jsonp request guide. fixes #49151 PR Close #49152
47 lines
2.5 KiB
Markdown
47 lines
2.5 KiB
Markdown
# HTTP: Make a JSONP request
|
|
|
|
“JSON with Padding” (JSONP) is a method to deceive a web browser into carrying out requests with a `<script>` tag that uses the SRC attribute to make a special API request.
|
|
|
|
Apps can use the `HttpClient` to make [JSONP](https://en.wikipedia.org/wiki/JSONP) requests across domains when a server doesn't support [CORS protocol](https://developer.mozilla.org/docs/Web/HTTP/CORS).
|
|
|
|
Angular JSONP requests return an `Observable`.
|
|
Follow the pattern for subscribing to observables and use the RxJS `map` operator to transform the response before using the [async pipe](api/common/AsyncPipe) to manage the results.
|
|
|
|
In Angular, use JSONP by including `HttpClientJsonpModule` in the `NgModule` imports.
|
|
In the following example, the `searchHeroes()` method uses a JSONP request to query for heroes whose names contain the search term.
|
|
|
|
<code-example format="typescript" language="typescript">
|
|
|
|
/* GET heroes whose name contains search term */
|
|
searchHeroes(term: string): Observable {
|
|
term = term.trim();
|
|
|
|
const heroesURL = `${this.heroesURL}?${term}`;
|
|
return this.http.jsonp(heroesUrl, 'callback').pipe(
|
|
catchError(this.handleError('searchHeroes', [])) // then handle the error
|
|
);
|
|
}
|
|
|
|
</code-example>
|
|
|
|
This request passes the `heroesURL` as the first parameter and the callback function name as the second parameter.
|
|
The response is wrapped in the callback function, which takes the observables returned by the JSONP method and pipes them through to the error handler.
|
|
|
|
## Request non-JSON data
|
|
|
|
Not all APIs return JSON data.
|
|
In this next example, a `DownloaderService` method reads a text file from the server and logs the file contents, before returning those contents to the caller as an `Observable<string>`.
|
|
|
|
<code-example header="app/downloader/downloader.service.ts (getTextFile)" linenums="false" path="http/src/app/downloader/downloader.service.ts" region="getTextFile"></code-example>
|
|
|
|
`HttpClient.get()` returns a string rather than the default JSON because of the `responseType` option.
|
|
|
|
The RxJS `tap` operator lets the code inspect both success and error values passing through the observable without disturbing them.
|
|
|
|
A `download()` method in the `DownloaderComponent` initiates the request by subscribing to the service method.
|
|
|
|
<code-example header="app/downloader/downloader.component.ts (download)" linenums="false" path="http/src/app/downloader/downloader.component.ts" region="download"></code-example>
|
|
|
|
<a id="error-handling"></a>
|
|
|
|
@reviewed 2022-11-03
|