Угловая обработка не ждет на http.get. Then

Question

У меня проблема, когда кажется, что мой контроллер не ждет на http.get '.then'. Я возвращаю данные правильно, но кажется, что другая функция обрабатывает до получения данных. Я прошел через многие сообщения и попробовал много вещей, упомянутых в этих сообщениях, но, похоже, это не помогает. Я использую PHP для извлечения данных.

У меня есть HTML-файл, который вызывает две функции (я пытался с одним, но когда это не сработало, я попытался разделить функциональность).

HTML звонков

<form editable-form name="editableForm" onaftersave="fetch();updateDetailsData()" > 

функции контроллера

$scope.fetch = function() { 
    $http.get("api/checkSave/"+ JSON.stringify($scope.programDetails)) 
     .then(function(data) { 
       $scope.okToSave = data.data.save; 
       $scope.missFields = data.data.fields; 
       console.log($scope.okToSave); // line #194 
       console.log($scope.missFields); // line #195 
     }); 
} 

$scope.updateDetailsData = function(){ 
    console.log($scope.okToSave); // line #202 
} 

Что отображается в консоли показывает:

undefined // line 202 
false  // line 194 - correct data 
Object  // line 195 - correct data 

Как вы можете видеть, как представляется, обработки функции updateDetailsData до завершения функции выборки. Я подумал, что тогда нужно сделать обработку до тех пор, пока не закончится получение - обещание вернулось.

Мне нужно сделать некоторую обработку в функции updateDetailsData, основанной на значениях переменных $ scope, но когда она доберется туда, они не определены.

Может кто-нибудь помочь? Я уверен, что это что-то малое, что мне не хватает, но я думаю, что я пробовал практически все решения, представленные на этих форумах, и все равно получаю те же результаты.

Answer 1

Проблема возникает из: onaftersave="fetch(); updateDetailsData()". Функция update выполняется, как только fetch возвращается, а не только fetch - разрешено.

Ремонтное ваша функция немного:

function fetch() { 
    return $http.get("api/checkSave/"+ JSON.stringify($scope.programDetails)) 
     .then(function(data) { 
      // ...  
     }); 
} 

$scope.fetchAndUpdate = function() { 
    fetch().then(updateDetailsData); 
} 

В шаблоне:

<form editable-form name="editableForm" onaftersave="fetchAndUpdate()"> 

Answer 2

Вы с помощью обещаний, так что вы должны проволоки в них, они не блокируют:

<form editable-form name="editableForm" onaftersave="fetch().then(updateDetailsData)" > 

Функции контроллера

$scope.fetch = function() { 
    return $http.get("api/checkSave/"+ JSON.stringify($scope.programDetails)) 
     .then(function(data) { 
       $scope.okToSave = data.data.save; 
       $scope.missFields = data.data.fields; 
       console.log($scope.okToSave); // line #194 
       console.log($scope.missFields); // line #195 
     }); 
} 

$scope.updateDetailsData = function(){ 
    console.log($scope.okToSave); // line #202 
} 

Answer 3

Функция fetch вызывает вызов $http.get, который делает асинхронный вызов на ваш сервер. Это означает, что вызов вернется сразу же, он не будет блокировать (т. Е. Остановить выполнение кода), пока он ждет ответа сервера. Вот почему вы предоставляете обратный вызов с помощью функции .then.

Так поступил так, как вы его в настоящее время написали, он работает как разработанный. Если вы хотите, чтобы функция updateDetailsData выполнялась после вашего кода then, вам необходимо либо поместить ее внутри, либо объединить функции вместе, как и Майкл П. Базос или Мэтью Берг.