AngularJS - скрипт перестает работать при заводской функции с возвратом обещания
Я учился / работал над проектом для новичков, который в основном представляет собой простой диспетчер задач (похожий на эти проекты списка дел). И я разработал страницу входа в систему для этого проекта, и вот как это работает.
Итак, у меня есть две функции siteLogin() для входа в систему, и внутри нее я хочу использовать вторую функцию showTasks() после входа в систему, которая возвращает пользовательские задачи, полученные от API (обещания, которые я знаю).
Итак, сначала мне нужно было вернуть значение из $ http внутри функции showTasks(), но в итоге я вернул что-то вроде $$state, поэтому я поискал и нашел несколько решений на этом веб-сайте, и до сих пор я узнал, что $ http не возвращает значение, а возвращает обещания. Итак, после пары попыток и неудач мой код теперь работает до showTasks() и останавливается на нем.
Итак, вот мой код.
Фабрика
app.factory('userTaskList', function ($http) {
return {
showTasks: function (userName) {
var tasks = { K_ADI: userName }; //UserName of the per
var $promise = $http({
method: 'POST',
url: 'http://localhost:5169/api/Isler/' + userName + '/IstenilenKayitCek',
headers: {
'Content-Type': 'application/json'
},
data: tasks
});
$promise.then(function successCallback(response) {
var data = response.data;
console.info("Factory data:", response);
return success(data);
}, function errorCallback(response) {
error("Error");
});
}
}
});
И мой контроллер:
app.controller('myCtrl', ['$scope', '$http', function ($scope, $http,userTaskList ) {
$scope.siteLogin = function () {
var loginMember = {
K_ADI: $scope.panel.loginUserName,
PAROLA: $scope.panel.loginPassword // HTML input
};
console.info(loginMember);
$http({
method: 'POST',
url: 'http://localhost:5169/api/Kullanicilar/KullaniciDogrula',
headers: {
'Content-Type': 'application/json'
},
data: loginMember
}).then(function successCallback(response) {
console.info("Message sent", response);
$scope.data = response.data.error.data;
if ($scope.data === true) {
console.info("User exists in database");
//RUNS UNTIL HERE AND STOPS
userTaskList.showTasks($scope.panel.loginUserName)
.then(function (res) {
$scope.gorev = res;
console.info("Fonk ici : ", $scope.gorev);
console.info("222222", res);
}, function (err) {
console.info(err);
});
console.info("outside func : ", $scope.gorev);
}
}, function errorCallback(response) {
console.info("Error: ", response);
});
}
}]);
Это можно рассматривать как дубликат, и в стеке есть много похожих проблем, но я пробовал эти решения (я свяжу их позже), но все же не решил мою проблему, плюс некоторые из них создали другие проблемы, подобные этой. Я попытался использовать $q, вложенный .then и, наконец, определил код в factory, затем вызвал его экземпляр в модуле и так далее. Но все равно не работает.
ПРИМЕЧАНИЕ: извините за мой плохой английский.
@SumamaWaheed никаких ошибок по этому поводу. Последнее, что я вижу в консоли, - это "User exists in database, и я не вижу остальных журналов консоли. насчет response.data.error.data, это потому, что его группа Project и мой друг плохо кодировали API. Так что мне нужно было получить такие данные. Я использовал его в других функциях, которые не размещал здесь, поэтому я знаю, что это не так.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
В функции showTasks есть несколько ошибок:
app.factory('userTaskList', function ($http) {
return {
showTasks: function (userName) {
var tasks = { K_ADI: userName }; //UserName of the per
var $promise = $http({
method: 'POST',
url: 'http://localhost:5169/api/Isler/' + userName + '/IstenilenKayitCek',
headers: {
'Content-Type': 'application/json'
},
data: tasks
});
var derivedPromise = $promise.then(function successCallback(response) {
var data = response.data;
console.info("Factory data:", response);
̶r̶e̶t̶u̶r̶n̶ ̶s̶u̶c̶c̶e̶s̶s̶(̶d̶a̶t̶a̶)̶;̶
//IMPORTANT
return data;
}, function errorCallback(response) {
̶e̶r̶r̶o̶r̶(̶"̶E̶r̶r̶o̶r̶"̶)̶;̶
console.info(response.status);
//IMPORTANT
throw response;
});
//IMPORTANT
return derivedPromise;
}
}
});
Требуемые данные должны быть возвращены обработчику успешного выполнения метода .then.
Ошибки в обработчике ошибок нужно перебросить. В противном случае отклоненное обещание будет преобразованный для успеха со значением undefined.
Наконец, производное обещание нужно вернуть в функцию showTasks.
Обновлять
Do you think I call the function correctly inside the
$scope.siteLogin?
Внедрение зависимости неверно:
̶a̶p̶p̶.̶c̶o̶n̶t̶r̶o̶l̶l̶e̶r̶(̶'̶m̶y̶C̶t̶r̶l̶'̶,̶ ̶[̶'̶$̶s̶c̶o̶p̶e̶'̶,̶ ̶'̶$̶h̶t̶t̶p̶'̶,̶ ̶
function ($scope, $http,userTaskList ) {
Должно быть
app.controller('myCtrl', ['$scope', '$http', 'userTaskList',
function ($scope, $http,userTaskList ) {
ИЛИ ЖЕ
app.controller('myCtrl', function ($scope, $http,userTaskList ) {
Спасибо, что решили мою проблему! Я выбираю ваш ответ в качестве ответа, и это немного не по теме, но, как я упоминал в своем вопросе, я все еще не могу получить доступ к данным вне функции, хотя console.info("outside func : ", $scope.gorev); по-прежнему выводит undefined на консоль. Можете ли вы дать мне какие-нибудь советы по этому поводу?
Так работают асинхронные операции. Операции не блокируются, что означает, что движок JavaScript немедленно выполняет следующие строки. Код внутри блока .then хранится до тех пор, пока с сервера не будут получены результаты.
Неблокирующие операции - одна из самых мощных функций функциональное программирование, которая часто неправильно понимается начинающими программистами на JavaScript.
Что значит остановки? Есть ошибки в консоли? Как выглядит ответ? У вас есть
response.data.error.data, может ли это вызвать исключение с нулевым указателем?