

If you have come to this point you are already pretty close to displaying them, so let’s not only log but display them inside our view! 2. You can simply add this Chrome extension and enable it, then the requests should also work inside your browser! This is an CORS issue that you will get inside the browser (but not later inside a real app!). Origin ‘ is therefore not allowed access. NOTE: It can happen that you get a message like this inside your browser:įailed to load : Redirect from ‘’ to ‘’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If you now open your app, it takes a short time after the start (remember: async!) and inside your debugging area you should see a log message where we can find and inspect different objects of the call we made. Now open your src/pages/films/films.ts and change it to: We use the standard Angular Http service to make a classic GET request.Ī classic promise was handled with then(), which was triggered once when the result came in.Īs we now have an observable, we need to subscribe() to the stream of data that might come back! Inside that block we finally get the result of our call. So the request we make to the Swapi returns us an observable which we can assign to a local variable. You can imagine it as more like a stream of events where a promise was only one click. Observables are a bit newer and allow more control, for example you can cancel an observable or receive multiple return values. If you have used AngularJS you might already know about Promises, which are called and at some point return either a result or an error. With Angular we can use Promises and Observables.

Whatever you are trying to call takes time, and this happens in the background of our app and at some point returns data. If we want to use external resources like this, the operation is asynchronous. Now we are ready to make HTTP calls to anywhere we want!
