Javascript Promises on Angular Controller

Question

I don't familiar with JavaScript Promises function.

Currently I have this code on my Angular Controller

$http.get('pages/about.html').then(function(response) {
    var raw_html = response.data;
    $scope.aboutHTML = raw_html.replace(/</g,"&lt;");
});

I want to re-write the code so I could do something like this

$scope.indexHTML = getHTML('pages/index.html');
$scope.aboutHTML = getHTML('pages/about.html');
...

with function like this

function getHTML(url){
    $http.get(url).then(function(response) {
        var raw_html = response.data;
        return = raw_html.replace(/</g,"&lt;");
    });
}

How to write the the code properly for the function above?

[Update #1]

Temporary Solution by @charlietfl

function getHTML(url){
    // return the promise
    return $http.get(url).then(function(response) {
        var raw_html = response.data.replace(/</g,"&lt;");
        return  raw_html;
    });
}

getHTML('pages/index.html').then(function(raw_html){
    $scope.indexHTML = raw_html;
});

I wanna to write this function to reduce the manual work, with this way I still need to write down $scope.{page} for each page, so anyone know better way?

[Update #2]

Solution by @joeytwiddle

function getHTML(url){
    // return the promise
    return $http.get(url).then(function(response) {
        var raw_html = response.data.replace(/</g,"&lt;");
        return  raw_html;
    });
}

getHTML('pages/index.html').then(function(raw_html){
    $scope.indexHTML = raw_html;
});

If you are using angular ui router there's a clean way to achieve this using resolve. If you are using the ui router then check this out: bguiz.github.io/js-standards/angularjs/… — Darin Dimitrov
– Darin Dimitrov, Commented Apr 10, 2016 at 11:00

joeytwiddle · Accepted Answer · 2016-04-10 13:08:39Z

1

There is no way to just return the result, because the result will not be available until some time in the future. #asynchronous

You can only handle the result using a callback function.

If you want to minimize the work from outside, I would suggest something like this:

getHTMLAndStore('pages/index.html', $scope, 'indexHTML');
getHTMLAndStore('pages/about.html', $scope, 'aboutHTML');

function getHTMLAndStore(url, object, property) {
    $http.get(url).then(function(response) {
        var raw_html = response.data;
        var weird_html = raw_html.replace(/</g,"&lt;");
        object[property] = weird_html;
    }).catch(console.error.apply(console));
}

This is pure JS and not really related to Angular.

Note that these two requests will fire in parallel, not in sequence.

answered Apr 10, 2016 at 13:08

joeytwiddle

31.6k14 gold badges130 silver badges115 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

charlietfl · Accepted Answer · 2016-04-10 12:33:25Z

1

$http returns a promise so you need to return that promise from the function and use another then() to assign the scope variable:

function getHTML(url){
    // return the promise
    return $http.get(url).then(function(response) {
        var raw_html = response.data.replace(/</g,"&lt;");
        return  raw_html;
    });
}

getHTML('pages/index.html').then(function(raw_html){
    $scope.indexHTML = raw_html;
});

Currently your function doesn't return anything

answered Apr 10, 2016 at 12:33

charlietfl

172k14 gold badges125 silver badges154 bronze badges

1 Comment

charlietfl Over a year ago

No... You can't return an asynchronous data response from a function

Collectives™ on Stack Overflow

Javascript Promises on Angular Controller

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related