angularjs中如何在异步请求执行完以后再执行其他函数？
angularjs中如何在异步请求执行完以后再执行其他函数？
之前脑袋回路就是从上到下的执行js，直到有一次我的页面上已经显示了空才走到angularjs里的$http的成功回调函数里，然后才开始正视工程里异步请求对项目的影响。
第一反应是放回调就可以了：
var app = angular.module('myApp', []);
app.controller('testCtrl', function($scope, $http) {
$http({
method: 'GET',
url: 'xxx'
}).then(function succ(data) {
$scope.testSucc();
}, function err(data) {
$scope.testErr();
});
$scope.testSucc = function(){
console.log("success func");
}
$scope.testErr = function(){
console.log("error func");
}
});
但是如果其他函数($scope.testSucc、$scope.testErr())不是这个控制器里的呢？对，你可以使用广播事件，然后在其子控制器里监听这个回调结果，但是我不喜欢这种方法，因为一个函数还好，如果是整个页面都依赖这个这个结果，不会累死啊。
我使用了一个小技巧：angularjs的控制器执行是在页面加载这个控制器所对应的页面的时候才会执行，所以在异步请求前设置页面不加载，异步请求成功的函数里设置页面加载就可以了。这里就利用了ng-if的特点了：ng-if 在后面表达式为 true 的时候才创建这个 dom 节点。
html页面如下：
<body>
<div ng-app="myApp" ng-controller="fatherCtrl">
<div ng-if="succResult" ng-controller="childrenCtrl">
<p>{{data}}</p>
</div>
</div>
</body>
js:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.succResult = false;
$http({
method: 'GET',
url: 'xxx'
}).then(function succ(data) {
$scope.succResult = true;
$scope.data=data;
}, function err(data) {
$scope.testErr();
});
});
以上是我利用ng-if和$http实现异步回调的效果。
angularjs中如何在异步请求执行完以后再执行其他函数？的更多相关文章
- 用一个bat文件调用另外两个bat文件,当1.bat执行完后再执行2.bat
用一个bat文件调用另外两个bat文件,当1.bat执行完后再执行2.bat 摘自:https://zhidao.baidu.com/question/492732911.html @echo off ...
- iOS AFNetWorking中block执行完后再执行其它操作
需求:同时进行两次网络请求,网络请求是异步的,在网络请求成功后进行其它的操作.两个网络请求是这样,一个网络请求中block执行完之后,再进行其它操作,也是一样的原理,只是这时候不需要线程组了,只需要信 ...
- vue在一个方法执行完后再执行另一个方法
vue在一个方法执行完后执行另一个方法 用Promise来实现.Promise是ES6的新特性,用于处理异步操作逻辑,用过给Promise添加then和catch函数,处理成功和失败的情况 ES7中新 ...
- 使用Promise发送多个异步请求, 全部完成后再执行
const datas = idList .map(id => url+'/id') .map(url => fetch(url).then(res => res.json())); ...
- ES6(Promise)等一个函数执行完后再执行另一个函数
function text1(){ return new Promise((resolve, reject) => { setTimeout(function () { resolve(cons ...
- js 执行完setTimeout再接着执行函数
var counter = 0; function increase(){ var d = jQuery.Deferred(); var doIncrease = function() { if(co ...
- Vue--axios：vue中的ajax异步请求（发送和请求数据）、vue-resource异步请求和跨域
跨域原理: 一.使用axios发送get请求 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 & ...
- 在JQuery和Js中,如何让ajax执行完后再继续往下执行 async
async (默认: true) 默认设置下,所有请求均为异步请求.如果需要发送同步请求,请将此选项设置为 false.注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行. var t ...
- vue（6）—— vue中向后端异步请求
异步请求 其实什么是异步请求已经不用多说了,通俗的说,就是整个页面不会刷新,需要更新的部分数据做局部刷新,其他数据不变. 学到这里,你应该用过jquery里的ajax了,所以很能理解了,不多说了.详细 ...
随机推荐
- JSP中page，request，session，application四个域对象区别
page page指当前页面.只在一个jsp页面里有效 . page里的变量没法从index.jsp传递到test.jsp,只要页面跳转了,它们就不见了. pageContext 如果把变量放到pag ...
- 十三、springboot集成定时任务(Scheduling Tasks)
定时任务(Scheduling Tasks) 在springboot创建定时任务比较简单,只需2步: 1.在程序的入口加上@EnableScheduling注解. 2.在定时方法上加@Schedule ...
- linux查看内存、CPU占用资源最多的进程
[内存占用] #利用ps命令,默认使用ps参数会显示的结果 ps -aux USER PID %CPU %MEM VSZ RSS TTY STAT START TIME COMMAND root 1 ...
- Linux下实现ping功能
实现ping功能,就肯定要用到ping命令,那么在Linux下ping命令为: ping [-dfnqrRv][-c<完成次数>][-i<间隔秒数>][-I<网络界面&g ...
- 网络路径查询traceroute
Traceroute用法 网友:适兕 发布于: 2006.08.24 08:14 (共有条评论) 查看评论 | 我要评论 一.什么是Traceroute? In ...
- elasticsearch学习笔记--原理介绍
前言:上一篇中我们对ES有了一个比较大概的概念,知道它是什么,干什么用的,今天给大家主要讲一下他的工作原理 介绍:ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户 ...
- Unix IPC之互斥锁与条件变量
互斥锁 1.函数声明 #include <pthread.h> /* Mutex handling. */ /* Initialize a mutex. */ extern int pth ...
- ubuntu和windows双系统启动顺序的修改
ubuntu和windows双系统启动顺序的修改 说到启动就不得不说GRUB,Linux下大名鼎鼎的启动管理工具(曾经的LILO已经风光不再),当然现在已经是GRUB2了,GRUB2和GRUB最重要的 ...
- vim 中替换命令
vi/vim 中可以使用 :s 命令来替换字符串.以前只会使用一种格式来全文替换,今天发现该命令有很多种写法(vi 真是强大啊,还有很多需要学习),记录几种在此,方便以后查询. :s/vivian/s ...
- 20165203实验四 Andriod程序设计
20165203实验四 Andriod程序设计 实验内容 安装 Android Stuidio 学习Android Stuidio调试应用程序 实验要求 1.没有Linux基础的同学建议先学习< ...