Angular promise with a async/await failure

Question

So far, the suggestions I've seen to remedy my issue don't seem to apply, or I have a big misunderstanding (I haven't touched full stack in quite a while). I've got a service that successfully hits a Spring Boot backend to get a list of processes:

function getReportProcesses(){
        var deferred =  $q.defer();
        var url = "fermentationReports/processes";
        httpService.get(url).then(function (data){
            deferred.resolve(data);
        }, function(msg){
            var errMsg  = "failed to get report processes: " +  msg;
            deferred.reject(errMsg);
        });
        return deferred.promise;
    }

My objective is to hit the service from a dropdown factory, turn the list into JSON, and pass it to the dropdown as populated by the dropdown directive. When the directive calls the following line to get the JSON:

var data = ReportDdlFactory.getReportName();
            addAllTo(data, $scope.addAll);

it doesn't wait for the httpService in getReportName() to return before adding data as undefined to the scope. This is the original method in the factory:

function getReportName() {

            try {
                FermentationReportsService.getReportProcesses().then(function (data) {
                    if (data.processes !== undefined) {

                        var output = {"data": []};
                        for (var i = 0; i < data.processes.length; i++) {
                            var currentLine = {"value": data.processes[i], "label": data.processes[i]};
                            output.data.push(currentLine);
                        }
                        return output;

                    } else {
                        return {
                            "data": [
                                {"value": "ERROR OBTAINING PROCESSES", "label": "ERROR OBTAINING PROCESSES"}]
                        };
                    }
                });
            } catch (err) {
                console.log("error caught: " + err);
            }
        }

I tried to change it to use async/await since getReportProcesses() already returns a promise:

async getReportName() {

            try {
                await FermentationReportsService.getReportProcesses().then(function (data) {
                    if (data.processes !== undefined) {

                        var output = {"data": []};
                        for (var i = 0; i < data.processes.length; i++) {
                            var currentLine = {"value": data.processes[i], "label": data.processes[i]};
                            output.data.push(currentLine);
                        }
                        return output;

                    } else {
                        return {
                            "data": [
                                {"value": "ERROR OBTAINING PROCESSES", "label": "ERROR OBTAINING PROCESSES"}]
                        };
                    }
                });
            } catch (err) {
                console.log("error caught: " + err);
            }
        }

But I always get this from jshint:

 14 |            async getReportName() {
                 ^ Expected an assignment or function call and instead saw an expression.
 14 |            async getReportName() {
                      ^ Missing semicolon.
 14 |            async getReportName() {
                                      ^ Missing semicolon.
 17 |                    await FermentationReportsService.getReportProcesses().then(function (data) {
                         ^ Expected an assignment or function call and instead saw an expression.
 17 |                    await FermentationReportsService.getReportProcesses().then(function (data) {
                              ^ Missing semicolon.
  8 |                getReportName: getReportName,
                                    ^ 'getReportName' is not defined.
 14 |            async getReportName() {
                       ^ 'getReportName' is not defined.
 14 |            async getReportName() {
                 ^ 'async' is not defined.

I feel like I may be making this harder than it needs to be, or maybe I'm missing something simple?

EDIT:

After more research I determined that the app is running as 'strict', forcing ECMA 5. Is there an approach to force the response before continuing without using an ES6 approach?

user_3980621 · Answer

by using async/await you no longer need to use then

async function getReportName() {
  try {
    const data = await FermentationReportsService.getReportProcesses();
    if (data.processes !== undefined) {
      var output = { data: [] };
      for (var i = 0; i < data.processes.length; i++) {
        var currentLine = {
          value: data.processes[i],
          label: data.processes[i],
        };
        output.data.push(currentLine);
      }
      return output;
    } else {
      return {
        data: [
          {
            value: 'ERROR OBTAINING PROCESSES',
            label: 'ERROR OBTAINING PROCESSES',
          },
        ],
      };
    }
  } catch (err) {
    console.log('error caught: ' + err);
  }
}

check this article for more info javascript.info async/await

user_1913729 · Answer

I would probably do something like this:

function getReportName() {
  return FermentationReportsService
    .getReportProcesses()
    .then(function(data) {
      if (data.processes === undefined) {
        return { data: [
          { value: "ERROR OBTAINING PROCESSES", label: "ERROR OBTAINING PROCESSES" }
        ]};
      }
      
      return {
        data: data.processes.map(function(process) {
                return { value: process.value, label: process.value };
              })
      };
    })
    .catch(function(err) {
      console.log("error caught: " + err);
    });
}

Angular promise with a async/await failure

2 Answers