js 判断异步执行完成方法总汇,比如多个ajax执行完毕后执行其他方法

时间: 2018-01-11阅读: 5451标签: ajax

在多个异步操作中,由于不确定异步操作的执行顺序,如何判断异步操作在已经执行完成的情况下,再执行一个新的操作,有哪些方法可以实现?


方法一、函数回调:

js中把函数当做对象来传递,是异步编程最基本的方法,在异步执行完成后,在执行里面的回调方法,这样不会出现程序堵塞的情况,例如:

function fn(callback){
   setTimeout(function(){
      callback("异步后执行");
   }, 1000);
}
function fn_1(data){
	console.log('执行:'+data)
}
fn(fn_1);

说明:

优点:使用简单、设计灵活、比较容易理解。
缺点:不利于代码的阅读和维护,各个部分之间高度耦合,流程会很混乱,而且每个任务只能指定一个回调函数。  


方式二、事件监听:

采用事件驱动模式,方法的执行是根据某个事件的发生来决定的,在异步执行完成后触发事件,来执行新的操作:

var _listeners={};
Function.prototype.on=function(name,fn) { //监听事件:[事件名称,执行方法]
	if(typeof fn === "function") {
        _listeners[name]=fn;
    }  
};
Function.prototype.trigger=function(name,data){ //执行事件:[事件名称,传递数据]
	if(name && _listeners[name]){  
	   _listeners[name](data);
	}
};
function fn(){
  setTimeout(function(){ 
    fn.trigger('done',"异步后执行");//fn发起done的事件
  }, 1000);
}
function fn_1(data){
	console.log('执行:'+data);
}
fn.on('done', fn_1);
fn();

说明:

采用这种方法可以绑定多个事件,指定多个操作,有利于模块化,但是程序都变成了事件驱动,对运行流程变的不那么清晰。


方法三:Promises对象

采用Promise来包装异步操作,然后定义async 函数,用await等待promise异步执行完成后,执行新的操作

function fn() {
    return new Promise((resolve, reject) => {
        setTimeout(function() {
            resolve('异步后执行')
        }, 1000)
    })
}
var fn_1 = async function() {
    var data = await fn();//等待异步操作执行完了后执行的方法
    console.log('执行:'+data);
}
fn_1();

说明:

实现起来简洁高效,不仅实现了回调逻辑的解耦,还实现了基础的异步流程控制


ajax是什么?如何创建一个ajax?

ajax(asynchronous javascript and xml)主要用来实现客户端与服务器端的异步通信,实现页面的局部刷新。XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

如何等待ajax完成再执行相应操作

ajax广泛应用于异步请求,对于大多数业务来说,这是十分方便的,但对于一些特殊的业务,ajax的异步性会起到相反的作用。例如在ajax请求成功后,后续的操作需要依赖ajax执行成功后的相应操作。

纯Js实现ajax

这是一个纯js向后台进行post请求的前端实现,未考虑考虑的问题。创建对象,并兼容各种浏览器;请求数据,这里写了两种方法,方法一最开始写的,但是后来发现灵活性不够

Content-Type属性的取值和作用

Content-Type 的值类型:application/json:消息主体是序列化后的 JSON 字符串,application/x-www-form-urlencoded:数据被编码为名称/值对。这是标准的编码格式

Ajax原理以及优缺点

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理,我们必须对 XMLHttpRequest有所了解。

Ajax 解决浏览器的缓存问题

ajax能提高页面载入的速度主要的原因是通过ajax减少了重复数据的载入,也就是说在载入数据的同时将数据缓存到内存中,一旦数据被加载其中,只要我们没有刷新页面,这些数据就会一直被缓存在内存中,当我们提交 的URL与历史的URL一致时

关于ajax请求数据,并将数据赋值给全局变量的一些解决方法

在使用ajax请求数据是,开始的时候是打算将ajax的数据取出,并赋予给全局变量,但是在实际编码过程中发现并不能将数据赋予给最开始定义的全局变量,出现这个问题的原因是由于ajax异步加载的原因,所以只能用其他方法来解决,下来是解决的方法

ajax的优缺点

ajax异步的js和XML:以前更多的是使用XML的数据格式,现在数据格式更多的是json.;ajax的优势:单页面应用(SPA)无刷新更新数据(局部刷新);异步与服务器通信

web项目通过ajax提交数据太大报错

ajax提交数据很多的时候报错,web后端没有接收到数据解决方案:经查为tomcat默认限制post提交2M数据。这里需要修改tomcat中大配置文件server.xml文件

解决ajax跨域访问sessionid不一致问题

根据浏览器的保护规则,跨域的时候我们创建的sessionId是不会被浏览器保存下来的,这样,当我们在进行跨域访问的时候,我们的sessionId就不会被保存下来,也就是说,每一次的请求服务器就会以为是一个新的人

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全