<commit_before>---
layout: post
title: Misuse $http service
---

*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.*

\# `req.body`

`req.body` contains key-value pairs of data submitted in the request body, which means when we sent parameters to the backend, the parameters should be formated into JSON data instead of pure `String`, `Number`, etc.

For example, in the service, we have method as follows which helps update the job information:

```javascript

// update files inforamtion
jobFactory.update = function(jobname, newjobname) {
  return $http.put('/api/jobs/' + jobname, newjobname);
};

```

while if we apply this method in controller like this

```javascript

// update job information
var newjobname = 'helloCalgary'

Job
  .update(jobname, newjobname)
  .then(function(data){
    // more processing
  });

```

then you will get an error. Instead, we should wrap data in JSON, like this

`var newjobname = {newjobname: 'helloCalgary'}`


\# DELETE request using ``$http` does not allow for data to be sent in the body of the request.  

The AngularJS shortcut method to perform DELETE request is `delete(url, [config]);` where
`url` is relative or absolute URL specifying the destination of the request and `[config]` is optional configuration object which does not include any params attrs.

For example, if we want to delete db/server data by providing the data label, i.e, we want to delete data with label '2016Salary', we may want to use this block:

```javascript

var label = '2016Salary';
dataFactory.delete = function(label) {
  return $http.delete('/api/data', {label: '2016Salary'});
};

```
then if you execute `console.log(req.body)` in the backend, then you will find only `{}` is printed.

Instead, if you really want to delete that data, the standard RESTful codes should be

```javascript

var label = '2016Salary';
dataFactory.delete = function(label) {
  return $http.delete('/api/data' + label);
};

```

then in the backend, '2016Salary' could be accessed by `req.param.label`.<commit_msg>new update for 20160204 blog<commit_after>---
layout: post
title: Misuse $http service
---

*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.*

\# `req.body`

`req.body` contains key-value pairs of data submitted in the request body, which means when we sent parameters to the backend, the parameters should be formated into JSON data instead of pure `String`, `Number`, etc.

For example, in the service, we have method as follows which helps update the job information:

```javascript

// update files inforamtion
jobFactory.update = function(jobname, newjobname) {
  return $http.put('/api/jobs/' + jobname, newjobname);
};

```

while if we apply this method in controller like this

```javascript

// update job information
var newjobname = 'helloCalgary'

Job
  .update(jobname, newjobname)
  .then(function(data){
    // more processing
  });

```

then you will get an error. Instead, we should wrap data in JSON, like this

`var newjobname = {newjobname: 'helloCalgary'}`


\# DELETE request using ``$http` does not allow for data to be sent in the body of the request.  

The AngularJS shortcut method to perform DELETE request is `delete(url, [config]);` where
`url` is relative or absolute URL specifying the destination of the request and `[config]` is optional configuration object which does not include any params attrs.

For example, if we want to delete db/server data by providing the data label, i.e, we want to delete data with label '2016Salary', we may want to use this block:

```javascript

var label = '2016Salary';
dataFactory.delete = function(label) {
  return $http.delete('/api/data', {label: '2016Salary'});
};

```
then if you execute `console.log(req.body)` in the backend, then you will find only `{}` is printed.

Instead, if you really want to delete that data, the standard RESTful codes should be

```javascript

var label = '2016Salary';
dataFactory.delete = function(label) {
  return $http.delete('/api/data' + label);
};

```

then in the backend, '2016Salary' could be accessed by `req.param.label`.

\# `$http` returns a `promise`

Demo first:

```javascript

// angularjs factory
dataFactory.all = function() {
  return 'hey';
}

// angularjs controller
console.log(Data.all());

```

Guess what we get printed in the console? 'hey'? Yes. This is normal method call as we do anywhere. let's continue!

```javascript

// server api
api.get('/api/hey', function(req, res){
  res.send{
    success: true,
    message: 'hey'
  }
})

// factory
dataFactory.all = function() {
  return $http.get('/api/hey');
};

// angularjs controller
console.log(Data.all());

```
Guess what we get printed in the console? `hey`? Nop. `{success: true, message: 'hey'}`, Nop....Why?

Actually we get a much more complicate object has these properties:

```
data – {string|Object} – The response body transformed with the transform functions.
status – {number} – HTTP status code of the response.
headers – {function([headerName])} – Header getter function.
config – {Object} – The configuration object that was used to generate the request.
statusText – {string} – HTTP status text of the response.

```

This object is called a `promise`. Wait, speak hunman language!

Ok, The CommonJS Promise proposal describes a promise as an **interface** for interacting with an object
that represents the result of an action that is performed **asynchronously**, and may or may not be finished at any given point in time.

Angularjs promise service worths a long independent article to explain. But now let's just remember `$http` returns a promise which wraps our actual return
data `{success: true, message: 'hey'}` in its `data` properties. And more important, this promise has a `.then()` method which could help us
unwrap the promise object and get our data.

So after we call `Data.all()`, just using the following chaining pattern to get the data:

```javascript

Data
  .all()
  .then(function(response){
    console.log(response.data.message); // this will print 'hey'
  })

```
{'fraction_non_alphanumeric': 0.10499359795134443, 'fraction_numerical': 0.0076824583866837385, 'mean_word_length': 4.318297872340426, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3373548', 'n_tokens_mistral': 1845, 'n_tokens_neox': 1739, 'n_words': 824}