0

I have a spinner element in my view which is corresponding with vm.wuDataLoading. Spinner is displayed while vm.wuDataLoading is true. I want to stop displaying spinner when data is loaded using reportDataService.getStandardReportGridData . Is this a correct way to do it or I need to somehow ensure that vm.wuDataLoading is not changed to false before the data is fully loaded?

function changeTitle(title) {
 /////some code
 function getData() {
  vm.wuDataLoading = true;

  reportDataService.getStandardReportGridData(projectId, webreportIdWuSet).then(function(data3) {
   vm.setRowWu01 = (formatNumber(data3.Values[0][1]));
   vm.setRowWu02 = (formatNumber(data3.Values[0][2]));
  });

////some code
  vm.wuDataLoading = false;
 });

getData();

};
2
  • Just... put the vm.wuDataLoading = false; line inside the then callback?? Commented Nov 27, 2017 at 13:00
  • @NiettheDarkAbsol: And if the promise rejects? Commented Nov 27, 2017 at 13:01

1 Answer 1

1

Presumably reportDataService.getStandardReportGridData returns a promise for a reason: It's asynchronous. So naturally, you don't want to clear the loading flag until that asynchronous work is complete (e.g., within a then callback). Something like this:

function getData() {
    vm.wuDataLoading = true;

    reportDataService.getStandardReportGridData(projectId, webreportIdWuSet).then(function(data3) {
        vm.setRowWu01 = (formatNumber(data3.Values[0][1]));
        vm.setRowWu02 = (formatNumber(data3.Values[0][2]));
    })
    // "finally"
    .catch(e => {
        // Do something about the fact the promise was rejected, but don't throw
        // and don't return a rejected promise
    })
    .then(() => {
        // Because our `catch` above converts the rejection to resolution, this gets
        // called regardless of whether the original promise rejects or resolves
        vm.wuDataLoading = false;
    });

    ////some code <== This may or may not need to be in a callback above, depending on whether
    // you want it to run before or after the work is complete
});

or I need to somehow ensure that vm.wuDataLoading is not changed to false before the data is fully loaded

If other things are also going to use the same flag, I'd suggest using a counter instead:

function getData() {
    // Increment the counter, where >0 means "loading"
    ++vm.wuDataLoading;

    reportDataService.getStandardReportGridData(projectId, webreportIdWuSet).then(function(data3) {
        vm.setRowWu01 = (formatNumber(data3.Values[0][1]));
        vm.setRowWu02 = (formatNumber(data3.Values[0][2]));
    })
    // "finally"
    .catch(e => {
        // Do something about the fact the promise was rejected, but don't throw
        // and don't return a rejected promise
    })
    .then(() => {
        // Because our `catch` above converts the rejection to resolution, this gets
        // called regardless of whether the original promise rejects or resolves
        // Decrement the counter again
        --vm.wuDataLoading;
    });

    ////some code <== This may or may not need to be in a callback above, depending on whether
    // you want it to run before or after the work is complete
});

Note that you would only use the pattern above if, as in getData, you weren't going to pass on the promise to the calling code. If you did (by returning the result of calling then), it would be inappropriate to convert rejection to resolution via a catch handler like that.

In that case, isolate any code you want to run when the promise settles (regardless of how) in a local function, and use it both in your then handler and a catch handler that propagates the error:

function getData() {
    function cleanup() {
        // Decrement the counter
        --vm.wuDataLoading;
    }

    // Increment the counter, where >0 means "loading"
    ++vm.wuDataLoading;

    return reportDataService.getStandardReportGridData(projectId, webreportIdWuSet).then(function(data3) {
        vm.setRowWu01 = (formatNumber(data3.Values[0][1]));
        vm.setRowWu02 = (formatNumber(data3.Values[0][2]));
        cleanup();
    })
    .catch(e => {
        cleanup();
        throw e;
    });
});
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.