How to get status code from URL

Question

Hello I'm new with javascript and AngularJS.This is my function to get the .json from the server (the server returns a JSON):

function getProducts() {
        return $http.get(urlProducts).then(
            //Success
            function(response) {
                products= response.data.result;
                return products;
             },
            //Error
            function(response) {
                //put best way to return an error
                return something;
            }
        );
    }

My question is: which is the best way to fetch data from the web server I want to know not only if was success the response, also if the status code was 200.

Then I wanna know if was error what I really want to return (I want to show a image with a text : "Not possible connect with the server. Try it again"). But I making the app with Ionic (HTML5, CSS3 and javascript with AngularJS). So... what is the best way to return a error which I wanna show a image with a text taking about that I'm programming in apache cordova. Thanks!

Answer 1

As per the AngularJS documentation:

The $http service is a core Angular service that facilitates communication with the remote HTTP servers

The response object from the $http call has these properties (amongst others):

data – {string|Object} – The response body transformed with the transform functions.

status – {number} – HTTP status code of the response. You can use this to formulate logic based on different codes

statusText – {string} – HTTP status text of the response.

In your example you have implemented the Promise.protorype.then() function, which allows you to delegate the success (first argument) and error (second argument) for further processing once the promise is fufilled (the $http.get call has completed).

This is how I would do it based on your example:

function getProducts() {
    // Call the http get function
    return $http.get(url).then(

        //The request succeeded - 200 status code
        function(response) {
            products= response.data.result;
                return products;
        },

        //The request failed
        function(response) {

           // Here you can access the status property and the statusText
           console.log("Http Status: " + response.status + " Description: " +   response.statusText);

           // Return a false result
           return false;
});

I would typically use a library like Angular-UI-Notification and to clean it up a bit I implement it like this:

//The success handler function
function handle_response_success(response) {
    // Do processing here based on the response then show a success notification
    Notification.success('Success notification');
};

// The error handler function
function handle_response_error(error) {
     Notification.error('Something went wrong with that request. More Info: ' + 'Http Status: ' + error.status + ' Description: ' +   error.statusText);
}

// Then finally bind it to your getProducts call

function getProducts() {

    // More elegant proto imho
    return $http({ method: 'GET',
        url: 'http://example.com'
     });
};

// More elegant way to handle this imho
getProducts.then(handle_response_success.bind(this), handle_response_error.bind(this);