AngularJS - Promise解析和更新视图
AngularJS是一种流行的前端开发框架，它使用了一种称为Promise的概念来解决异步编程的问题。Promise是一种表示异步操作结果的对象，它可以有三种状态：pending（进行中）、fulfilled（已完成）和rejected（已拒绝）。
当使用Promise解析和更新视图时，通常会涉及到以下几个步骤：
- 创建Promise对象：使用
$q服务的defer()方法创建一个Promise对象。例如：var deferred = $q.defer(); - 执行异步操作：在Promise对象中执行异步操作，例如发送HTTP请求或执行数据库查询。在操作完成时，根据操作结果调用
resolve()或reject()方法。例如：$http.get('/api/data').then(function(response) { deferred.resolve(response.data); }, function(error) { deferred.reject(error); }); - 处理异步操作结果：使用Promise对象的
then()方法来处理异步操作的结果。then()方法接收两个回调函数作为参数，第一个回调函数用于处理操作成功的情况，第二个回调函数用于处理操作失败的情况。例如：deferred.promise.then(function(data) { // 处理操作成功的情况 $scope.data = data; }, function(error) { // 处理操作失败的情况 console.error(error); });
通过以上步骤，AngularJS可以利用Promise解析和更新视图。当异步操作完成时，Promise对象的状态将从pending变为fulfilled或rejected，触发相应的回调函数来更新视图或处理错误。
AngularJS还提供了其他一些与Promise相关的服务和指令，例如$q.all()用于并行执行多个Promise对象，$q.race()用于获取最先完成的Promise对象的结果等。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）提供了稳定可靠的云计算基础设施，适用于部署和运行AngularJS应用程序。您可以通过以下链接了解更多信息：
请注意，以上答案仅供参考，实际情况可能因产品版本和技术发展而有所不同。
相关·内容
我是AngularJS的新手，所以这实际上可能指向一些我还不完全理解的核心概念。我尝试使用$q和promise对象来处理“远程数据”，就像对待本地数据一样。在未获取远程数据之前，promise对象不会解析，但一旦解析，我希望视图中的所有依赖数据绑定都得到更新。但是，以下方法会导致无限循环，其中remote_total会被重复调用，即使之前的remote_total调用导致解析的promise对象也是如此。
下面是我的视图
<div ng-controller="MyController">
{{ remote_total() }}
</div>
下面
浏览 2提问于2013-01-21得票数 2
回答已采纳
2回答
我正在创建我的第一个AngularJS应用程序。
我的索引页面有点问题。根据用户是否经过身份验证，可以有两个不同的模板。
我的想法是在ng视图之前定义一个MainController和一个视图控制器(indexController，aboutController，.)取决于所显示的视图。
我已经做了一个服务UserService，它的任务是从我的服务器上获取用户的数据，并将它们服务于控制器。
问题是我想让我的MainController获得用户的数据。
我读过关于resolve和promise的内容，但是它只适用于视图控制器，因为它是在$routeProvider中定义的。
我的问题是如何在执
浏览 2提问于2014-09-24得票数 1
回答已采纳
1回答
我正在学习angularjs，并试图使用h3标记附加问候。但是它不起作用(没有错误日志)。
angular.module('app', []).controller('test', function ($scope) {
$scope.greeting = 'Hello world!';
let p1 = new Promise(r => r('Hi'));
let p2 = new Promise(r => r('Im Gosu'));
Promise.all([p
浏览 0提问于2017-06-04得票数 1
回答已采纳
1回答
我这里有个柱塞-
我在这里使用演示json -
我使用ng视图和ngRoute显示两页。
第一个是从json文件中提取的故事/帖子列表。这将显示json文件中的部分内容--我限制了文本的数量。
我希望能够点击这些，并打开一个新的视图，显示该故事的全部内容/点击后。
我添加了一个story.html，当点击第一个视图时会打开这个故事/帖子。
我的问题是将范围与story.html视图联系起来。我需要知道要加载的josn的正确部分，以匹配单击的故事/帖子。
var app = angular.module('myApp', ['ngRoute']);
app.
浏览 2提问于2015-05-12得票数 0
回答已采纳
我一直在寻找一些方法来知道何时有两个或更多的ajax调用完成了使用AngularJS，但我只能使用jQuery找到它：
$.when(promise3, promise5).done(
function(threeSquare, fiveSquare) {
console.info(threeSquare, fiveSquare);
}
);
和：
var promises = [
$.getJSON('square/2'),
$.getJSON('square/3'),
$.getJSON('sq
浏览 0提问于2013-07-02得票数 3
回答已采纳
Angular 1.3问题:我已经阅读了很多Stack Overflow问题和教程，但还不能让我的特定代码正常工作。我想要一个带按钮的视图(page1.html)。单击该按钮时，它将从服务器获取数据并将其呈现在第二个视图(page2.html)中。
下面是基本代码：
var app = angular.module("app", ["ngRoute", "ngResource"]);
app.config(["$routeProvider", function ($routeProvider) {
var baseTem
浏览 0提问于2014-12-18得票数 0
1回答
$scope.clickfunction = function(arg){
var url ="";
var httppromise = $scope.promiseufunction(arg); // return a http promise
httppromise.then(function(res){
if(res){
url ="path/"
$('#htmlelement').attr('href', url);
}else{
浏览 0提问于2016-12-04得票数 0
1回答
我正试图在我创建的工厂中使用$stateProvider解析。
出于某种原因，工厂的承诺是一个空对象。
但是，当我从$http调用中记录数据时，我从.json文件中获得数据。
知道为什么我的defer.promise是一个空对象吗？
playlistsService.js
(function () {
'use strict';
angular
.module('app.core')
.factory('playlistsService', playlistsService);
pl
浏览 0提问于2015-07-18得票数 2
回答已采纳
2回答
我无法思考异步请求的概念。
我的视图有一个控制器，它从提供程序创建对象实例：
va.controller('VaCtrl',function($scope,$shipment){
$scope.shipment = $shipment.Shipment();
});
提供者：
Shipment.provider('$shipment',function(){
this.$get = function($http){
function Shipment(){
}
Shipment.pr
浏览 1提问于2013-07-23得票数 4
回答已采纳
由于某些原因，当我从一个作用域函数返回一个$q promise时，这个值永远不会在解析时传播：
app.controller('MainCtrl', function($scope, $q) {
var deferred = $q.defer();
deferred.resolve("hello");
var promise = deferred.promise;
$scope.promiseReturn = function() {
return promise;
};
});
视图：
<body
浏览 8提问于2013-03-19得票数 2
回答已采纳
我有以下几点：
<div ng-repeat="m in model">
{{m.prop1}}{{m.prop2}}
</div>
内部控制器是一个被撤销的承诺，从服务器获取一个对象。
promise.then(function(e){
$scope.model.push(e); // e is an object, which is pushed into the array.
$scope.$apply(); // causes digest already in progress error so put inside $
浏览 0提问于2015-01-18得票数 0
2回答
我有以下代码
function onpagechange(page, limit)
{
var deferred = $q.defer();
loadUsers(deferred);
return deferred.promise;
}
这使我通过eslint获得以下错误：You should not create a new promise with this syntax. Use the $q(function(resolve, reject)
迁移到新的$q语法的最佳方法是什么。我想，如果我100%肯定函数返回的话，我会更好地处理这个问题。
浏览 2提问于2016-02-12得票数 1
回答已采纳
我不知道为什么第一个州起作用，但第二个州不行：
工作状态：
.state('app.pages.invoice', {
url: '/invoice',
templateUrl: "assets/views/pages_invoice.html",
title: 'Invoice',
resolve: {
"currentAuth": ["Auth", function(Auth) {
浏览 6提问于2016-10-12得票数 1
回答已采纳
1回答
出厂时未加载JSON
、、、
我是AngularJS的新手，几天来一直在尝试从工厂获取JSON。我一直收到相同的错误，没有给我太多的信息：
TypeError: Cannot read property '1' of null
我的模块：
var app = angular.module('app', ['ngRoute']);
这是我的控制器：
app.controller('homePageController', function ($scope, projectsFactory) {
$scope.projects = projectsFact
浏览 2提问于2014-02-28得票数 0
2回答
我是AngularJS和Javascript的新手。我正在创建一个应用程序，其中我计划使用一个函数来做所有的ajax相关的操作(工厂在angularjs)。此函数将只是所有ajax操作的一个网关。当我将promise作为成功返回时，它会正常工作。但是返回错误承诺不起作用。
下面是一个示例代码。如果promise失败，我希望在错误函数中返回promise，但它会成功
var myApp = angular.module('myApp', []);
myApp.controller('FirstController, function($scope, util){
浏览 4提问于2016-08-09得票数 2
回答已采纳
4回答
我有一个问题，当数组改变时，ng-repeat不会更新列表。
我使用JavaScript promise来计算一个计算，然后返回一个包含2个数组的对象。然后，这些数组将显示在以下代码片段的视图中。
<button class="btn" data-toggle="modal" data-target="#tableModal" ng-click="vm.compareTables(vm.table)">Some text</button>
<!-- Modal -->
<div class
浏览 21提问于2017-01-08得票数 4
迭代CoffeScript中的对象，我希望计算并显示每个条目的某个值(池中的资产数量)
控制器功能：
archivedBidParts = []
for day in BidService.activeDays(bid) when DateService.isBetween(day, from, to, true, true)
splitBidPart = angular.copy(bid_part)
splitBidPart.hours = BidService.hoursActiveOnDay(day, bid)
splitBidPart.number_of_assets_in
浏览 1提问于2015-04-20得票数 1
1回答
我想在AngularJS中链接资源。
目标是资源B在启动之前等待重新源A的结束。
我试过这个：
var p = $q.when(true);
p = p.then(function() {
return $resource(...).query().$promise;
});
p = p.then(function() {
return $resource(...).query().$promise;
});
p = p.then(function() {
return $resource(...).query().$promise;
});
关键是调用不是同步的。
浏览 1提问于2013-11-03得票数 3
回答已采纳
使用AngularJS，我有一个historicalDataController
angular.module('armsApp').controller('historicalDataController', ($scope, $historicalFactory) => {
$scope.histogram = new Histogram('#histogram');
historicalFactory.getHistorycalData().then((data) => {
$scope.histogram.u
浏览 0提问于2017-09-21得票数 0
回答已采纳
2回答
正如标题已经说过的，我想在指令模板函数中返回一个承诺，即：
angular.module('someModule', [])
//...
.directive('someDirective', function() {
return {
//...
restrict: 'E',
template: function() {
var deferred = $q.defer();
//Some Async function which will call defer
浏览 4提问于2014-03-05得票数 2
回答已采纳
1回答
我有这样的代码：
var geocode = function(value) {
var request;
.....
var dResult = Q.defer();
geocoder.geocode(request, function (results) {
dResult.resolve(results);
});
return dResult.promise;
};
var cancelWatch;
$scope.$watch('value', function (value) {
$timeout.cancel(update);
update
浏览 0提问于2013-07-03得票数 0
回答已采纳
2回答
我想知道$q是如何在角度上工作的，让我说我有几行代码要执行。
var app = angular.module('app', []);
app.controller('HelloCtrl', function ($q, $scope) {
$scope.Title = "Promise Demo";
function asyncGreetings(name) {
var deferred = $q.defer();
setTimeout(function() {
d
浏览 4提问于2014-07-17得票数 1
回答已采纳
3回答
AngularJS:超时承诺调用
、、、、
在我的AjaxPromiseService.js工厂中，我一直试图将超时机制整合到承诺调用中(通常是$http.get/post对远程服务的调用)。我目前所做的方式是在$timeout事件和实际的承诺调用之间创建一个竞赛。示例代码如下(来自我的AjaxPromiseService.js工厂的AngularJS代码)：
var timeoutObj = {"isTimeout": true};
function timeoutPromise(deferredObj) {
$timeout(function() {
console.log("p
浏览 4提问于2015-04-15得票数 2
回答已采纳
1回答
这是一个关于角1.4的新问题。
我的主要问题
我有以下搜索视图：
'use strict';
var module = angular.module('myapp.search', ['ngRoute', 'ngResource']);
module.config(function ($routeProvider) {
$routeProvider.when('/search', {
templateUrl: 'search/search.html',
c
浏览 0提问于2015-12-16得票数 0
回答已采纳
我尝试在中止REST调用后获取已解析的promise对象(使用{timeout: canceller.promise})，但无法获取已解析的promise对象。
工厂：
angular.module('RestModule').factory('abc', function ($http, $rootScope) {
var canceller = $q.defer();
$rootScope.$on('CANCEL_REQUESTS', function () {
canceller.resolve({'
浏览 2提问于2014-08-28得票数 0
2回答
，亲爱的，我的$scope的范围和我该怎么说都有问题。
我正在成功地从我的服务中检索数据，但我在访问$scope.players和$scope.tournament方面遇到了困难，我认为这与在服务调用中有关。如果我在服务调用中使用console.out()，那么一切都很好。如何才能访问服务调用中的数据。
版本1:这里的控制台日志只是声明未定义的状态。
.controller('SelectCtrl', ['$scope','$stateParams', '$location', '$window','pla
浏览 1提问于2014-02-18得票数 0
回答已采纳
这是我的观点(很抱歉，变量和函数名称太长了)：
<tr ng-repeat="passation in passations " >
<td ng-init=" passation.stats_quota_campagnes = get_stats_quota_campagnes(passation)">{{passation.stats_quota_campagnes}}</div></td>
</tr>
这是我的angularjs函数，它应该返回结果：
$scope.get_stats_qu
浏览 1提问于2017-02-09得票数 0
回答已采纳
因此，当我在$timeout或$interval中使用angularJS时，清理是很好的做法。我看到这个谈到了应该如何清理它(即$scope.$on("destroy" ... ))。我的问题是，在执行回调之后清理它可以吗？我有一个返回超时承诺的服务，如下所示：
service.foo = function(){
var timeout = $timeout(function(){
// .. do something .. //
}, 5000);
return timeout;
};
因此，如果我称之为这项服务，我做的事情如下：
var promis
浏览 1提问于2015-02-15得票数 3
回答已采纳
1回答
AngularJS中的取消请求
、、、、
我浏览了一些链接： How to cancel an $http request in AngularJS? Cancelling ongoing Angular $http requests when there's a new request How to cancel a $http call from controller in Angular JS? http://embed.plnkr.co/gkvxRj/ 但在我的代码中不起作用 如何取消之前的申请？在我的请求服务代码中。 function PostData (url, data,cancelPrevious, auth
浏览 43提问于2021-01-19得票数 0
我刚接触angularjs，我正在学习angular中的promise。我制作了一个简单的示例来理解promise是如何工作的
<body ng-controller="sampleController">
<div>{{one}}</div>
<br/>
<br/>
<div>Status - {{two}}</div>
<br/>
<br/>
<div ng-click="callback()">click&l
浏览 1提问于2014-03-21得票数 1
我有一个很简单的场景，
应用程序从主视图(/main)开始，然后单击右上角按钮到子视图(/sub)。
在应用程序启动app.run()期间，用户的配置文件将被加载到服务userService中，一旦用户进入service，这个配置文件将从服务userService中读取，然后显示，下面是代码，
app.run(function($http, $rootScope, userService){
$http.get('/profile').then(function(result){
userService.setProfile(result.data.
浏览 5提问于2015-09-07得票数 2
回答已采纳
我有这个html代码：
<table class="table table-striped table-condensed table-hover">
<tbody>
<tr ng-repeat="doc in container.Documents ">
{{doc.Status.Message}}
</td>
<!-- .... -->
</tr>
</t
浏览 1提问于2015-01-21得票数 0
回答已采纳
提到，我也遇到了同样的问题。
如何设置多个解析，一个使用currentAuth，另一个使用加载控制器和脚本的加载序列？
这是我的state config：
.state('app.example', {
url: "/example",
templateUrl: "assets/views/example.html",
resolve:{
loadSequence: loadSequence('jquery-sparkline', 'exampleCt
浏览 0提问于2016-10-15得票数 2
我和$q.defer();有一些问题
当我使用回调时，我的代码正在运行(视图已被更新)，但是使用而不是。
这是我的密码：
服务：
eventsApp.factory('eventData', function($http, $q) {
return {
getEvent: function(callback) {
var deferred = $q.defer();
$http({method: 'GET', url: '/node/nodejsserver/server.js
浏览 0提问于2014-08-23得票数 5
回答已采纳
我有一个功能，我需要从AngularJs移动到VueJs，但它把我难倒了！如有任何帮助，我们将不胜感激:) items = {
one: {...details here...},
two: {},
} AngularJs var promises = [];
var deferred = $q.defer();
angular.forEach(items, function(details) {
promises.push(details.promise);
});
$q.all(promises).finally(function() {
deferr
浏览 18提问于2021-11-05得票数 1
回答已采纳
1回答
我不理解AngularJS中承诺的概念。我有两个函数:一个用于获取远程设置配置，另一个用于获取此远程配置(存储在$scope中)。我需要将它们分开，因为我在应用程序的其他部分对每个超时或调用使用不同的超时或调用。
我认为，通过这些承诺，一切都是一个接一个地运行的，在这里，我发现函数fetch在加载函数之前就开始了。为什么？为什么系统正在等待下载我的安装程序，然后开始获取？
/* ----- $scope.sea.funcs.seaInit(); ----- */
$scope.sea.funcs.seaInit = function() {
// PROMISE
浏览 0提问于2015-02-15得票数 0
回答已采纳
在$resource remove()之后，我在更新视图时遇到问题。元素get已删除，但您只能在刷新页面后才能看到更改。
控制器
this.getData = function() {
var query = SomeService.query()
query.$promise.then(function(res) {
this.data = res; // Gets the data into view
}.bind(this));
}
this.removeData = function(id) {
var query = SomeService.remove({
浏览 0提问于2015-08-03得票数 2
2回答
我想在我的页面中用AngularJS.But显示一个json，Json有sub，我尝试了一些东西，但不起作用。我可以显示文本和id，但它不能用正位名称标记lat和lon，我不知道如何在列表中显示这些数据
var app = angular.module("VarnaApp",[]);
app.service("varnaService",function($http, $q)
{
var deferred = $q.defer();
$http.get('api/station.json').then(function(data)
{
浏览 2提问于2015-10-21得票数 4
回答已采纳
2回答
使用Angularjs的动态网格
、、、、
我将代码放在不同的层中: 1.一个包含所有$http请求的工厂，并返回promise。2.一个控制器，它通过一个then来处理这个promise，然后将它赋给一个$scope变量，然后在网格视图上显示它。
现在，我正在尝试创建一个指令来处理Gridview，并将数据作为attr传递给link函数进行处理并显示它。通过这种方式，我试图实现代码的可重用性。问题是，由于异步调用，作用域上的数据变量变得空了。当然，有什么更好的方法来解决这个问题呢？
angular.module('parametrosModule').factory('apiMethods', [
浏览 0提问于2016-03-10得票数 0
这似乎是对的承诺。这是愚蠢的海事组织，但很好，我有工作，在适当的地方(控制器)。
现在我所处的情况是，我有一个服务，它可以不关心应用程序中的任何作用域，它所做的只是从服务器返回一些数据，但是这个承诺似乎并没有得到解决。
app.service('myService', function($q) {
return {
getSomething: function() {
var deferred = $q.defer();
deferred.resolve('test');
return deferred.promi
浏览 4提问于2014-06-03得票数 48
回答已采纳
我似乎想不出为什么在使用了承诺之后，它仍然没有等待，所以$scope.return_message返回null。
function getRandomCommit()
{
var d = $q.defer();
$scope.repos = Repos.query({username: 'octocat'}).$promise.then(function ( value )
{
var ranNum = Math.floor((Math.random()*value.length) + 1);
浏览 2提问于2014-04-17得票数 1
回答已采纳
我的视图变量似乎没有更新onSubmit事件。在控制台中，我可以看到对API执行的调用得到了正确的结果，但是我没有正确地显示它们。
JS
angular.module('FooApp')
.controller('FooListController', ['$scope', 'FooMapper', 'moment', 'APP_URL', '$location', function($scope, FooMapper, moment, APP_URL, $loc
浏览 3提问于2014-10-06得票数 1
在加载控制器和模板之前，我正在尝试解析JSON promise。
var app = angular.module('app', []);
app.config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'index-ctrl-test.html',
controller: 'IndexCtrl',
resolve: {
event: function ($http) {
浏览 1提问于2013-10-01得票数 0
我使用的是AngularJS和Typescript。在我的控制器构造函数中，我调用了一个获取数据并返回promise的函数。promise存储在变量x中。
x.then((data) => {
//displays data
}, (err) => {
//sends error message
});
现在，如果promise从未解析，则不会显示任何内容。我想使用$timeout，这样如果x的解析时间太长，它将显示另一条消息。我不知道我该怎么做才能得到承诺。调用this.$timeout(3000,true).then(() => {});只会延迟内容，我也可以
浏览 8提问于2017-02-22得票数 0
1回答
我正在使用AngularJs，我在视图上遇到了一个问题。这是我的代码和结果。
任何帮助都将不胜感激。
.service("SubjectService", function ($http, $q)
{
var deferred = $q.defer();
$http.get('http://genext-it.net/sma/api/subjects').then(function (response)
{
deferred.resolve(response);
});
this.getSubjects
浏览 1提问于2016-04-13得票数 2
我正在使用AngularJS 1.2.6
我正在使用$http.get()给一个服务打电话。我希望处理服务中的响应，以保持控制器的干净，然后只返回相关数据。我认为我可以直接绑定到承诺，当异步调用完成时，我的$scope对象上的一个属性将被更新，这将自动更新我的视图。
在这个例子中，我调用了生命API百科全书来获取多媒体对象的列表。我只对图像感兴趣(这些图像总是与mimeType: 'image/jpeg'一起返回)，这样我就可以将它们输入到图像旋转指令中。
注意:为了减少杂乱，我省略了长URL
服务
.factory('GetEOL', ['$http&
浏览 2提问于2014-04-18得票数 1
回答已采纳
2回答
我是新的角和热爱it...coming从一个10年的PHP背景，有许多新的条件为我。这是我想要做的，不确定是否可能，如果是，也不确定怎么做。我已经创建了一个属性列表和，该部分可以很好地工作。列表显示每个属性的有限详细信息，所有详细信息都可用于详细视图。
因此，我的问题是，如何通过id访问数据，而不再次访问DB，并在新模板中显示详细视图？
下面是我到目前为止掌握的代码：
propApp.controller('propertyCrtl', function ($scope, $routeParams, $timeout, getProperty ) {
var promis
浏览 2提问于2015-06-01得票数 1
回答已采纳
使用此服务执行承诺：
使用此服务执行承诺：
我不明白，为什么我在使用ng-model指令和promises时会出错。
TypeError: Cannot assign to read only property 'favourite'
单击时
<div ng-controller="DishCtrl">
<input type="checkbox" name="favourite" ng-model="dish.favourite" required smart-float ng-cli
浏览 7提问于2013-10-21得票数 0
2回答
有人能给我解释一下这个密码是干什么的吗？我知道它会把国家拉到网页上显示的名单上，但为什么呢？我认为$scope.countries = service.query()就足够了，或者这样可以避免异步问题吗？
$q.all([$scope.address.$promise, $scope.countrys.$promise]).then(function() {
if (!$scope.address.country.id) {
return $q.reject();
}
return Country.get({id : $s
浏览 10提问于2015-09-01得票数 0
回答已采纳
我有一个嵌套的承诺如下。我只是编写伪代码来反映我的用例。
$scope.result="";
Promise1.then(function1(value1){
Promise2.then(function2(value2) {
forloop() {
Promise3.then(function3(value3){
$scope.result += value3;
}//end of function3
}//end of forloop
}//end of function2
}//end of function1.
如何在Promise1之外获取"result
浏览 0提问于2016-12-12得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
