JavaScript：関数内の実行シーケンス

Question

vm.wuDataLoadingに対応する私のビューにスピナー要素があります。 vm.wuDataLoadingがtrueの間、Spinnerが表示されます。 reportDataService.getStandardReportGridDataを使用して、データがロードされたときにスピナーの表示を停止したいこれを行う正しい方法ですか、またはデータが完全に読み込まれる前にvm.wuDataLoadingがfalseに変更されていないことをどうしても保証する必要がありますか？

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(); 

}; 

Answer 1

おそらくreportDataService.getStandardReportGridDataは、約束を返します。それは非同期です。当然、非同期作業が完了するまで（たとえば、thenコールバック内）、ローディングフラグをクリアしたくはありません。

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

他のものも同じフラグを使用しようとしている場合は、私が代わりにカウンターを使用してお勧めする：このような何か

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 
}); 

---

注意だけであろうとgetDataのように、あなたが約束を呼び出しコードに渡すつもりがない場合は、上記のパターンを使用してください。 が（thenの呼び出し結果を返すことによって）行った場合、そのようなハンドブックを使用して拒否を解決に変換することは不適切です。

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; 
    }); 
}); 

：その場合は

は、あなたが約束がローカル関数で（関係なく、どのように）安定すると実行して、あなたの thenハンドラおよびエラーを伝播 catchハンドラ内で両方を使用する任意のコードを分離します