Questions tagged [angular-http]

AngularJS tag for $http service is a core Angular service that facilitates communication with the remote HTTP servers via the browser's XMLHttpRequest object or via JSONP.

The $http service is a core Angular service that facilitates communication with the remote HTTP servers via the browser's XMLHttpRequest object or via JSONP.

For unit testing applications that use $http service, see $httpBackend mock.

For a higher level of abstraction, please check out the $resource service.

The $http API is based on the deferred/promise APIs exposed by the $q service. While for simple usage patterns this doesn't matter much, for advanced usage it is important to familiarize yourself with these APIs and the guarantees they provide.

General usage

The $http service is a function which takes a single argument — a configuration object — that is used to generate an HTTP request and returns a promise with two $http specific methods: .then and .catch.

// Simple GET request example :
$http.get('/someUrl')
  .then(function(response) {
    var data = response.data;
    // this callback will be called asynchronously
    // when the response is available
}).catch(function(response) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
});
// Simple POST request example (passing data) :
$http.post('/someUrl', {msg:'hello word!'})
  .then(function(response) {
    // this callback will be called asynchronously
    // when the response is available
}).catch(function(response) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
});

Since the returned value of calling the $http function is a promise, you can also use the then method to register callbacks, and these callbacks will receive a single argument – an object representing the response. See the API signature and type info below for more details.

A response status code between 200 and 299 is considered a success status and will result in the success callback being called. Note that if the response is a redirect, XMLHttpRequest will transparently follow it, meaning that the error callback will not be called for such responses.

970 questions
33
votes
3 answers

How to catch error in Observable.forkJoin(...)?

I use Observable.forkJoin() to handle the response after both HTTP calls finishes, but if either one of them returns an error, how can I catch that error? Observable.forkJoin( this.http.post(URL, jsonBody1, postJson) .map((res) => res), …
matchifang
  • 5,190
  • 12
  • 47
  • 76
33
votes
6 answers

How to make an http call every 2 minutes with RXJS?

I have a service that will make a call to my rest service every 2 minutes. On my service I have the following function getNotifications(token: string) { const body = 'xxxxxxxxx=' + token; return…
Ennio
  • 1,147
  • 2
  • 17
  • 34
33
votes
7 answers

How to read response headers in angularjs?

My server returns this kind of header: Content-Range:0-10/0: I tried to read this header in angular with no luck: var promise = $http.get(url, { params: query }).then(function(response) { console.log(response.headers()); return…
DarkLeafyGreen
  • 69,338
  • 131
  • 383
  • 601
29
votes
1 answer

Angular 2 : No provider for ConnectionBackend

Get this "No provider for ConnectionBackend!" error when trying to use http with a promise. main.ts // ... tl;dr import a bunch of stuff platformBrowserDynamic().bootstrapModule(MyModule); myModule.ts // ... tl;dr import a bunch of…
jmbmage
  • 2,487
  • 3
  • 27
  • 44
25
votes
1 answer

How to propagate errors through catchError() properly?

I wrote a function that is pipe-able: HandleHttpBasicError() { return ((source:Observable) => { return source.pipe( catchError((err:any) => { let msg = ''; if(err && err instanceof…
dc-p8
  • 784
  • 1
  • 6
  • 19
25
votes
2 answers

How does HTTP error-handling work with observables?

I see a lot of tutorials doing something like this: http.get("...").subscribe( success => console.log('hello success'), error => console.log('bye error') ); I don't know how this works, since there aren't any types or anything, however I tried…
codepleb
  • 10,086
  • 14
  • 69
  • 111
23
votes
5 answers

Download a file from asset folder when clicking on a button

I am working on an angular2 project, I have a file in assets folder and I have created a button to download the file while running the app. I see there are quite a many solutions to the above problem so i got confused. Can you please help.
Sunil Bishnoi
  • 509
  • 3
  • 5
  • 13
22
votes
2 answers

Change detection not registering data changes

I have an html structure with a component inside a component (forgot the proper word for it). working basicly like this (largely simplified): main html:
m41n
  • 403
  • 1
  • 5
  • 16
19
votes
3 answers

AngularJS using an interceptor to handle $http 404s - promise not defined error

I have an Angular app, for which I want to handle 404s form an API end point. The key components are like so: // app.js var myApp = angular.module('myApp', ['ngRoute',]); myApp.config( function ($httpProvider, $interpolateProvider, $routeProvider)…
Darwin Tech
  • 18,449
  • 38
  • 112
  • 187
18
votes
3 answers

are lastValueFrom and firstValueFrom equivalent in Angular HTTP?

In angular, we use HttpClient to make HTTP calls which return an observable, if we wanna use promises we can use lastValueFrom/firstValueFrom. Let's say we have: async getLast() { const get$ = this.http.get(url); const res1 = await…
Matias
  • 1,070
  • 2
  • 6
  • 14
18
votes
5 answers

Angular 2 http post params and body

I'm trying to do an API call from my angular app. What I want to do is send a post request to the API with a command param. I have done a lot of server-side testing as well as going through the outgoing request, and the $_POST nor body data is never…
SlyOtis
  • 577
  • 1
  • 5
  • 20
18
votes
1 answer

JsonP returning "Uncaught SyntaxError: Unexpected token :" AngularJS - routingnumbers.info

I've researched this question a ridiculous amount and would hope that someone can help diagnose what is wrong. I've already tried looked at the following SO questions: (SO wouldn't let me post more than 2 links due to reputation, so i've just…
dannypaz
  • 1,294
  • 1
  • 12
  • 16
18
votes
3 answers

$http post in Angular.js

I've just started learning Angular.js. How do I re-write the following code in Angular.js? var postData = " " + "GetPersons " + ""; var req = new XMLHttpRequest(); …
tempid
  • 7,838
  • 28
  • 71
  • 101
17
votes
2 answers

Angular 2 http request with Access-Control-Allow-Origin set to *

I'm using angular2 and typescript. I'm trying to post to my mail chimp subscription list. My code so far: constructor(router: Router, http: Http){ this.router = router; this.http = http; this.headers = new Headers(); …
AngularM
  • 15,982
  • 28
  • 94
  • 169
16
votes
2 answers

How can I make $httpBackend insensitive to the order of URL query parameters?

I am using the Angular.js $httpBackend to test some services that wrap $http calls (this is in ngMock, not ngMockE2E). It seems that things like expect and when are sensitive to the order of URL query parameters. E.g. if I do…
1
2
3
64 65