What is the difference between $http and $q? - angularjs

a) What are the difference between $http and $q ?
b) When should $q be implement over $http and vice versa ?
c) When and best practice for implement $http and $q at the same time?

a) $http executes HTTP requests in an asynchronous manner, which means that you can not be sure about the time when you'll get an answer from the server. $q is a service that provides you the capability to execute multiple asynchronous tasks one after another. That being said they conceptionally do have nothing in common.
b) Consider a situation where you want to have multiple async HTTP calls to a server. You may have the possibility to nest each of those calls (for instance making the 2nd call in the success callback of the first call). However you find yourself in situations where you have various amounts of calls. You would then use $q to circumvent nesting code.
c) Whenever you have a single HTTP call you should use $http. Whenever you have numerous calls, you should use $q.

a)
$http = angular service for access a server via the http protocol.
$q = angular service implementing kris kowalkis q library https://github.com/kriskowal/q.
They are both angular service but have nothing else in common.
b)
$http uses $q to provide defered access (promises). But I know no situation where i would use $q over $http. As far as you want to make http requests.
c)
$http uses $q. So they are always used together. As long as you want to make http requests.

Related

making the same $http request simultaneously

What happens if I make the same $http request - same params, etc- simultaneously in the app? Does one wait for the others' response?
And if I make them back to back. If the first one is not resolved yet, do the others wait for that?
There is a limit for browsers request count See Max parallel http connections in a browser?
Think each request independent , angularjs $http service return a promise object and you register its success and error callbacks.
Read more about from here https://docs.angularjs.org/api/ng/service/$http
See my plunk below. If I call multiple calls I see them parallel in network tab. But this doesn't cause a conflict because we have different promises and their callbacks will be different. call 1 promise instance1 ... call N promise instance N
http://plnkr.co/edit/XUboyUiAs7KFcRhUu3LP?p=preview

Get raw request / response from $http call

I am writing an AngularJs app to test an API we developed. The app uses the $http object to make requests to the API. One of the asks is that after the call it's possible to review the raw HTTP (headers and bodies) Request/Response, similarly to what's available in Fiddler via Raw tabs.
Is it something that $http provides out of the box?
If not, it appears that the only challenge is gaining access to the actual request http headers. It's easy to get the response headers and request/response bodies, but not sure how to get the actual request headers.
Thanks.
If you are using $http service to make your API calls, you can use Interceptors to achieve what you want.
Here is what docs tell us about them:
For purposes of global error handling, authentication, or any kind of synchronous or asynchronous pre-processing of request or postprocessing of responses, it is desirable to be able to intercept requests before they are handed to the server and responses before they are handed over to the application code that initiated these requests. The interceptors leverage the promise APIs to fulfill this need for both synchronous and asynchronous pre-processing.
You can find more in depth explanation in the official docs. For example, here.
Also, there are some questions about interceptors on this site. There are some examples of their usage for displaying loading screen in applications: here, here and, probably, somewhere else.
Hope, this helps.
Yes, AngularJs is wrapped around some JQuery or internally JQlite if JQuery is not present and written in Javascript and it provides some pre-defined services. A typical service looks like the following.
AngularJS docs: tutorial step 5
$ Prefix Naming Convention You can create your own services, and in
fact we will do exactly that in step 11. As a naming convention,
Angular's built-in services, Scope methods and a few other Angular
APIs have a $ prefix in front of the name.
The $ prefix is there to namespace Angular-provided services. To
prevent collisions it's best to avoid naming your services and models
anything that begins with a $.
If you inspect a Scope, you may also notice some properties that begin
with $$. These properties are considered private, and should not be
accessed or modified.
angular.module('myApp')
.factory('myService', function ($http, $injector) {
'use strict';
return $http.get('/endpoint')
.then(function () {
return $injector.get('endpoint');
}
.error(function () {
// handle error
}
};
})
Have a look a the image in AngularJS docs which shows a number of services with the $ prefix. Mostly, wrappers over service. It is reserved. More at FAQ.

Restangular with angular-http-auth not working

I had been using Angular-HTTP-Auth with the basic http requests, but have since moved to Restangular and are now finding that 401's are no longer caught by HTTP-Auth. I'm assuming this is because the Angular http methods aren't used or are intercepted somehow. Is there a method for making these work together again? I know that Restangular has interceptor's exposed, but I'm not certain how the 2 need to operate.

providers with $http wrapper angularjs

I would like to know whether we can create a provider in angularjs which will replace the $http operation .which means where we can use this provider in other modules where we can make use of these $http operation.
The reason why provider has to be taken is because we can configure the http parameters like the api path, request type .
Also can we have logging/exception handling mechanism inside the provider so that the modules(eg: any other factories) which inherit the provider wont need to do any extra logging/exception mechanisms.
Is there any way to have some loading screen using this provider when http requests are made ?
For the things you mentioned, you don't need another provider, because $http has the concept of interceptors.
Interceptors can specify different callbacks to be executed at different phases:
request (runs before any request is sent): It can modify the configuration (e.g. the request URL, method etc). It could also be used to show some loading message/animation (e.g. using some property on the $rootScope).
requestError (runs when there is an error before sending the request): It can be used for logging, recovering, exception handling.
response (runs after any response is received): It can be used for logging. It could also be used to hide the loading message/animation. (Don't forget to also handle this on response error.)
responseError (runs when there is an error regarding the response (e.g. bad request)): It can be used for logging, recovering, exception handling.
If interceptors do not cover your needs, you could use $provide's decorator to monkey-patch, augment or totally replace the $http service:
.config(function ($provide) {
$provide.decorator('$http', function ($delegate) {
var newHttp = $delegate; // or a totally new object
// ...monkey-patch newHttp or define new methods or whatever
return newHttp;
});
});

Setting the JSONP callback function in AngularJS

I'm trying to fetch data from a web API via Angular $resource service. The service exposes JSONP interface, but does not allow setting the callback name. Everything works well, my requests goes out, the data returns, the script is injected and then it fails because the callback function is not defined.
Angular documentation is very sparse on this, but it seems that the default callback function Angular sets up is: JSON_CALLBACK, and there's no info how to change that so that it matches the function returned by the foreign API.
Thanks.
I don't think that there is any provision to override that callback.
$resource is high level Restful api based on $http service.
You can use $http apis which returns http promise object and letting you write your success callback wherein you can process data returned from ajax request.
e.g. http://docs.angularjs.org/api/ng.$http#jsonp

Resources