Angular 5 (Ionic) JSONP request
I would like to connect to http://api.themoviedb.org in order to do GET requests. Since I'm using the browser (ionic serve -l) I get CORS error. To circumvent the CORS error I try to use JSONP without success.
Here is what I did:
In app.module.ts :
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
...
imports: [ BrowserModule, IonicModule.forRoot(MyApp) , HttpClientModule, HttpClientJsonpModule ],
...
In the .ts file of the component:
import { Observable } from 'rxjs/Observable';
import { HttpClient } from '@angular/common/http';
...
//In the class
films: Observable< any >;
constructor(public navCtrl: NavController, public navParams: NavParams, public http: HttpClient)
{
const url = "https://api.themoviedb.org/3/movie/550?api_key= [MY_API_KEY]&callback=JSONP_CALLBACK";
this.films = this.http.jsonp(url, 'callback');
}
...
In the .html of the component:
<ion-content padding>
<ion-list>
<button ion-item>
{{(films | async)?.title}}
</button>
</ion-list>
</ion-content>
I get an error telling it cannot parse the response:
Here are the errors ([MY_API_KEY] is the actual API_KEY in the error codes):
Uncaught TypeError: ["ng_jsonp_callback_0","JSONP_CALLBACK"] is not a function
at 550?api_key=[MY_API_KEY]&callback=ng_jsonp_callback_0&callback=JSONP_CALLBACK:1
(anonymous) @ 550?api_key=[MY_API_KEY]&callback=ng_jsonp_callback_0&callback=JSONP_CALLBACK:1
core.js:1350 ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "JSONP Error", url: "https://api.themoviedb.org/3/movie/550?api_key=303…lback=ng_jsonp_callback_0&callback=JSONP_CALLBACK", ok: false, …}
And here is the received response:
["ng_jsonp_callback_0", "JSONP_CALLBACK"]({"adult":false,"backdrop_path":"/87hTDiay2N2qWyX4Ds7ybXi9h8I.jpg","belongs_to_collection":null,"budget":63000000,"genres":[{"id":18,"name":"Drama"}],"homepage":"http://www.foxmovies.com/movies/fight-club","id":550,"imdb_id":"tt0137523","original_language":"en","original_title":"Fight Club","overview":"A ticking-time-bomb insomniac and a slippery soap salesman channel primal male aggression into a shocking new form of therapy. Their concept catches on, with underground "fight clubs" forming in every town, until an eccentric gets in the way and ignites an out-of-control spiral toward oblivion.","popularity":61.167619,"poster_path":"/adw6Lq9FiC9zjYEpOqfq03ituwp.jpg","production_companies":[{"name":"Twentieth Century Fox Film Corporation","id":306},{"name":"Regency Enterprises","id":508},{"name":"Fox 2000 Pictures","id":711},{"name":"Taurus Film","id":20555},{"name":"Linson Films","id":54050},{"name":"Atman Entertainment","id":54051},{"name":"Knickerbocker Films","id":54052}],"production_countries":[{"iso_3166_1":"DE","name":"Germany"},{"iso_3166_1":"US","name":"United States of America"}],"release_date":"1999-10-15","revenue":100853753,"runtime":139,"spoken_languages":[{"iso_639_1":"en","name":"English"}],"status":"Released","tagline":"Mischief. Mayhem. Soap.","title":"Fight Club","video":false,"vote_average":8.300000000000001,"vote_count":11124})
To my knowledge it should return the name of a javascript function to process the data. But I seem to have something wrong in the way I pass the callback and cannot find an example on how to do it with the new HttpClient.
链接地址: http://www.djcxy.com/p/47568.html