精华内容
下载资源
问答
  • 数据处理方法封装 var DataWatch=(function(){ var gWatch={},cursor= 0,callback_key = 'callback',gMap={}; var check=function(cursor,name){ var _watcher=gWatch[cursor...

    数据处理方法封装

    var DataWatch=(function(){
                var gWatch={},cursor= 0,callback_key = 'callback',gMap={};
                var check=function(cursor,name){
                    var _watcher=gWatch[cursor],itemCount = 0,resArr=[],flag=false;
                    if(!!map){
                        return;
                    }
                    if(name && typeof (_watcher[name]) === undefined){
                        return;
                    }
                    for(var key in _watcher){
                        if(key === callback_key){
                            continue;
                        }
                        if(gMap[key]){
                            _watcher[key]=true;
                            resArr.push(map[key]);
                        }
                        itemCount++;
                    }
                    if(resArr.length === itemCount){
                        _watcher[callback_key] && _watcher[callback_key].apply(this,resArr);
                    }
                    resArr=null;
                };
                return {
                    watch:function(name,callback){
                        //兼容watch单个内容
                        if(typeof(name) === 'string' ){
                            name=[name];
                        }
                        var _watcher={};
                        name.forEach(function(item){
                            _watcher[item]=false;
                        })
                        _watcher[callback_key]=callback;
                        cursor++;
                        gWatch[cursor]=_watcher;
                        check(cursor);
                    },
                    put:function(key,value){
                        gMap[key]=value;
                        for(var cursor in gWatch){
                            check(cursor,key);
                        }
                    }
                }
            })()

    使用方法可以下面这样

    func1.ajaxSucc:DataWatch.put(key1,value1)
    func2.ajaxSucc:DataWatch.put(key2,value2)
    func3.ajaxSucc:DataWatch.put(key3,value3)
    
    DataWatch.watch([key1,key2],function(value1,value2){
    })
    
    DataWatch.watch([key1,key3],function(value1,value3){
    })

     

    转载于:https://www.cnblogs.com/GongQi/p/5059890.html

    展开全文
  • 在前端项目中,经常会遇到页面有多个接口,后一个接口参数需要从前一个接口的返回数据中获取,这就存在接口必须按顺序一个一个执行。而Angular提供的Http服务请求接口都是异步请求,因此通常情况下会写成如下的代码...
  • Angular异步同步处理

    万次阅读 2018-03-19 17:54:50
    1. 背景在前端项目中,经常会遇到页面有多个接口,后一个接口参数需要从前一个接口的返回数据中获取,这就存在接口必须按顺序一个一个执行。而Angular提供的Http服务请求接口都是异步请求,因此通常情况下会写成...

    1. 背景

    在前端项目中,经常会遇到页面有多个接口,后一个接口参数需要从前一个接口的返回数据中获取,这就存在接口必须按顺序一个一个执行。而Angular提供的Http服务请求接口都是异步请求,因此通常情况下会写成如下的代码:

    funA(arg1,arg2,function(){
        funcB(arg1,arg2,function(){
            funcC(arg1,arg2,function(){
                 xxxx....
            })
        })   
    });

    这不仅造成页面代码混乱不易维护,也让开发者无法追踪代码的运行。本身嵌套就已经不容易理解,加上不知何时才能触发回调,这就相当于雪上加霜。

    2. Promise

    针对这中现象,Angular推出了Promise规范,它可以帮助开发者将异步变成同步,是一种对执行结果不确定的一种预先定义。例如以下代码中,当getData方法内的对象成功执行,就会调用success方法,如果失败,就会调用error方法。另外promise除了then方法之外,还有catch()finally()方法。

    defer. getData()
    .then( funcSuccess (){},  funcError (){} )
    .catch( function(){})
    .finally( function(){});

    Finally()方法一般用来处理不管promise是返回成功还是失败,都会执行的操作。例如ionic中的上拉加载,当获取数据后不管成功或者失败,都要广播结束这次上拉操作,便可将这个操作写在finally()方法中。

    3. $q服务

    q服务是AngularJs中自己封装实现的一种Promise实现,一般有如下三个常用方法:

    • defer() :创建一个deferred对象,这个对象可以执行几个常用的方法,比如resolverejectnotify等;
    • all() :传入Promise的数组,批量执行,返回一个Promise对象;
    • when() :传入一个不确定的参数,如果符合Promise标准,就返回一个Promise对象。

     

    3.1. defer() 方法

    $q服务中,用defer()方法创建一个deferred对象,然后这个对象可以调用resolve方法定义成功状态,使用reject方法定义失败状态,并且可以在这些方法中传递参数,一般接口返回的数据都是用这些方法传递出去最后通过deferred对象 .promise来返回一个promise对象,来定义then方法。then方法中有三个参数,分别是成功回调、失败回调、状态变更回调。

    定义方法:

    function funA(num){
      var defer = $q.defer();
      if(num<5){
        defer.resolve('funA success');
      }else{
        defer.reject('funA error');
      }
     return defer.promise;
    }
    

    方法调用(返回成功)

    funA(3).then(function(success){
      console.log(success);
    },function(err){
      console.log(err);
    })

    结果:

     


    方法调用(返回失败)

    funA(8).then(function(success){
      console.log(success);
    },function(err){
      console.log(err);
    })

    结果:

     


    3.2. 链式调用

    了解了defer()方法与then()方法,接下来就能解决多个接口嵌套调用的问题了。

    一般处理多个接口需要嵌套执行时,可采用angular的链式调用,即:

    FunA.then().then().then();

    then方法中return 要调用的下一个接口。如下funAfunBfunC都是返回了promise对象的方法,如果执行顺序为funAfunBfunC,则可用链式调用。

    function funA(num){
      var defer = $q.defer();
      if(num<5){
        defer.resolve('funA success');
      }else{
        defer.reject('funA error');
      }
      return defer.promise;
    }
    
    function funB(num){
      var defer = $q.defer();
      if(num<5){
        defer.resolve('funB success');
      }else{
        defer.reject('funB error');
      }
      return defer.promise;
    }
    
    function funC(num){
      var defer = $q.defer();
      if(num<5){
        defer.resolve('funC success');
      }else{
        defer.reject('funC error');
      }
      return defer.promise;
    }

    方法调用:

    funA(3).then(function(success){
      console.log(success);
      return funB(3);
    }).then(function(success){
      console.log(success);
      return funC(3);
    }).then(function(success){
      console.log(success);
    },function(err){
      console.log(err);
    });

    结果:

     

    上述方法调用中,then()方法中只写了成功参数的方法,如果其中一个方法调用返回失败,则该方法后边的方法都不会再执行,也就是只有前一个方法调用成功,才能调用后边的方法。如下为其中一个方法失败的示例,funB方法调用返回失败,则不会再执行funC,而错误的信息会在最后捕捉错误信息的参数方法中获取。

    方法调用:

    funA(3).then(function(success){
      console.log(success);
      return funB(8);
    }).then(function(success){
      console.log(success);
      return funC(3);
    }).then(function(success){
      console.log(success);
    },function(err){
      console.log(err); //打印funB()的错误信息
    });

    结果:

     

     

    如果在某些场景中,等前一个方法调用完毕,而不管这个方法是否调用成功,都要继续调用后边的方法,则需要在then()方法中增加错误回调并return 下一个执行的promise。如下:

    funA(3).then(function(success){
      console.log(success);
      return funB(8);
    },function(err){
      console.log(err);
      return funB(8);
    }).then(function(success){
      console.log(success);
      return funC(3);
    },function(err){
      console.log(err);
      return funC(3);
    }).then(function(success){
      console.log(success);
    },function(err){
      console.log(err);
    });

    结果:

     

     

    3.3. all() 方法

    all()方法可以把多个promise的数组合并成一个。当所有的promise执行成功后,会执行后面的回调,回调中的参数,是每个promise执行的结果。

    function funA(num){
      var defer = $q.defer();
      if(num<5){
        defer.resolve('funA success');
      }else{
        defer.reject('funA error');
      }
      return defer.promise;
    }
    
    function funB(num){
      var defer = $q.defer();
      if(num<5){
        defer.resolve('funB success');
      }else{
        defer.reject('funB error');
      }
      return defer.promise;
    }

    方法调用:

    $q.all([
        funA(3), 
        funB(3)
      ])
    .then(function(success){
      console.log(success);
    },function(err){
      console.log(err);
    })

    结果:

     

    all() 方法中的参数可以是上面的数组形式,也可以是json格式。相应的,如果参数是数组格式,那么返回的数据格式也是数组格式;如果参数是json格式,那么返回的数据格式也是json格式。json参数示例如下:

    $q.all(
      {
        funA:DeferService.funA(3),
        funB:DeferService.funB(3)
      })
    .then(function(success){
      console.log(success);
    },function(err){
      console.log(err);
    })

    结果:

     

    上面两个示例展示的都是获取数据成功的情况。而当all()方法的参数中存在一个promise失败,则整个任务都失败,返回的数据也只会返回该失败参数的失败信息。

    方法调用:

    $q.all(
      {
        funA:DeferService.funA(8), //调用失败
        //正常情况下是调用成功,但由于funA调用失败,固该方法也是失败
        funB:DeferService.funB(3)  
    })
    .then(function(success){
      console.log(success);
    },function(err){
      console.log(err);
    })

    结果:

     

     

    3.4. when() 方法

    when()方法中的参数可以是一个值,也可以是一个promise,这个方法是把传入的参数处理包装成一个promise。这个方法一般在你不确定所处理的对象或者调用的方法是不是一个promise时使用。

    例如在下面的例子中,val=10,并不是一个promise,但是经过when()方法包装之后,可以通过.then()方法去调用,像处理平常的promise一样。

    var val=10;
    $q.when(val)
      .then(function(success){
        console.log(success);
      },function(err){
        console.log(err);
      });

    结果:

     

    展开全文
  • 模拟两个成功的请求(不考虑reject) function request1() { return new Promise((resolve,reject)=>... resolve("数据1") },1000) }) } function request2() { return new Promise((resolve,reje

    模拟两个成功的请求(不考虑reject)

     function request1() {
            return new Promise((resolve,reject)=>{
                setTimeout(()=>{
                    resolve("数据1")
                },1000)
            })
        }
    function request2() {
            return new Promise((resolve,reject)=>{
                setTimeout(()=>{
                    resolve("数据2")
                },1000)
            })
        }
    

    实现同步请求方法1(回调)

    function fn1() {
        console.time("fn1")
        let data1 = null
        let data2 = null
        request1().then(d1=>{
            data1 = d1
            request2().then(d2=>{
                data2 = d2
                handel()
            })
        })
        function handel() {
            console.log(data1,data2)//数据1 数据2
            console.timeEnd("fn1")//fn1: 2001.43896484375ms
        }
    }
    fn1()
    

    这种方式效率低,以队列的形式逐个执行,耗时为n个队列耗时总和

    实现同步请求方法2(回调)es5推荐

    function fn2() {
        console.time("fn2")
        let data1 = null
        let data2 = null
        request1().then(d1=>{
            data1 = d1
            if (data2)
                handel()
        })
        request2().then(d2=>{
            data2 = d2
            if (data1)
                handel()
        })
        function handel() {
            console.log(data1,data2)//数据1 数据2
            console.timeEnd("fn2")// fn2: 1001.375ms
        }
    }
    fn2()
    

    很明显,这种方式效率比fn1方法效率高n倍(n为执行异步方法数)
    方法并列执行,在es5通常用这种方式处理异步信息
    耗时为队列最长一项的耗时

    实现同步请求方法3(async,await)

    async function fn3() {
            console.time("fn3")
            let data1 = null
            let data2 = null
            await request1().then(data=>{
                data1 = data
            });
            await request2().then(data=>{
                data2 = data
            });
            console.log(data1,data2)//数据1 数据2
            console.timeEnd("fn3")//fn3: 2002.31689453125ms
        }
    	fn3()
    

    这种方式效率低,以队列的形式执行,与fn1雷同
    调用wait函数时加上了await修饰符,导致主流程的执行必须要等待wait函数执行完才会陆续执行后续函数
    相当于 await wait() => promise -> wait() -> resolve()。
    但是wait函数本身又写了一个promise,整个promise会setTimeout才resolve
    相当于本身wait函数 => promise -> setTimeout(resolve)。
    那么整个串起来,流程有点类似下面这样子,promise的嵌套,只有等内部wait函数的promise -> resolve之后
    才会将外部的promise -> resolve掉。
    然后再去执行下一个wait函数。 main -> wait -> promise -> (promise -> setTimeout(resolve))(resolve)
    写入微任务队列,微任务队列里再写入任务队列,都是需要时间

    实现同步请求方法3(async,await)es6推荐

    async function fn4() {
            console.time("fn4")
            let data1 = null
            let data2 = null
            const r1 = request1()
            const r2 = request2()
            await r1.then(data=>{
                data1 = data
            });
            await r2.then(data=>{
                data2 = data
            });
            console.log(data1,data2)//数据1 数据2
            console.timeEnd("fn4")//fn4: 1001.7919921875ms
        }
    	fn4()
    

    这种方式效率高类似fn2方法,在es6中,使用这种方式处理异步信息是不二的选择
    异步请求会按顺序发起。而这个过程是不需要互相依赖等待的。
    等到wait的时候,其实是比较那个异步耗时最多。就会等待最长。最长的耗时就是整体的耗时。
    如果在业务中,两个异步没有依赖关系。应该是后面这种写法。

    return和promise

    function fn5() {
            console.time("fn5")
            let data1 = null
            let data2 = null
            request1().then((res) => {
                data1 = res
                return request2()
            }).then(res=>{
                data2=res
                console.log(data1, data2)//数据1 数据2
                console.timeEnd("fn5")//fn5: 2002.428955078125ms
            })
        }
        fn5()
    

    与fn1 fn3雷同,不建议这样使用
    Promise 实现了链式调用,也就是说每次 then 后返回的都是一个全新 Promise
    如果我们在 then 中 return ,return 的结果会被 Promise.resolve() 包装
    无法取消 Promise ,错误需要通过回调函数来捕获

    Promise.all方法

     function fn6() {
            console.time("fn6")
            let data1 = null
            let data2 = null
            const r1 = request1()
            const r2 = request2()
            Promise.all([r1, r2]).then((res) => {
                data1 = res[0]
                data2 = res[1]
                console.log(data1, data2)//数据1 数据2
                console.timeEnd("fn6")//fn6: 1002.2900390625ms
            })
        }
    fn6()
    

    在执行多个promise的时候,强烈推荐Promise.all方法

    还有更好的处理方法吗,讨论一下呗

    展开全文
  • 1. 背景在前端项目中,经常会遇到页面有多个接口,后一个接口参数需要从前一个接口的返回数据中获取,这就存在接口必须按顺序一个一个执行。而Angular提供的Http服务请求接口都是异步请求,因此通常情况下会写成如下...
  • 使用promise实现数组循环异步处理同步 //测试异步流程控制 let myData = ['a','b','c','d','e']; //异步处理方法,返回Promise对象 let f1 = function(i){ return new Promise(function (resolve, reject) { ...
  • //发送写入请求 auto *reply=client->... 错误用法-》用循环去等待它的数据返回 */ //增加事件循环点 QEventLoop eventLoop; connect(reply, &QModbusReply::finished,&eventLoop,&am.
  • 异步数据转化为同步数据处理的两种情况: 第一种:定点定时将异步转化为同步 举例:在A方法中的某处需要调用B方法,并且在拿到B方法的返回值后,才可以继续完成A方法中剩下的功能,但是js的代码是从上至下的运行,...
  • 问题:node.js环境,多个节点嵌套查询如何能同步获得数据返回前端? 如下示例因为异步原因,某些数据无法及时获得 例如:存在images(图片信息)、like(图片赞数)、user(用户信息)三个节点: //查询所有...
  • 项目需求:getAllElevatorInfo、reqDeviceStatus和reqDeviceFaultList是三个异步请求,需要请求后端并处理数据,这里getAllElevatorInfo需要处理大量的数据。此后执行initMap初始化地图。问题:这四个方法都是异步...
  • 异步数据管理一直是前端的一个重点和难点,可以这么说,80%的 web 应用会有异步数请求据并在 UI 中消费,并且在相当多的 web 应用中,处理异步数据是它的核心业务逻辑。在 React 的生态圈中,大部分人把异步数据使用...
  • 正常处理逻辑触发异步操作,然后传递一个唯一标识。等到异步结果返回,根据传入的唯一标识,匹配此次结果。如何转换为同步正常的应用场景很多,但是有时候不想做数据存储,只是想简单获取调用结果。即想达到同步操作...
  • 出处-同步与阻塞,异步与非阻塞的区别 - 晓月天城 - 博客园同步与阻塞,异步与非阻塞的区别同步异步是对应的,它们是线程之间的关系,两个线程之间要么是同步的,要么是异步的。阻塞与非阻塞是对同一个线程来说的...
  • 有的时候可能会涉及大量数据同步处理,但是我们知道同步处理的一个很严重的问题就是阻碍进程,就是卡顿,比如下面的这段代码: data.map(val=>{ console.log(val * 2); }) 如果数据量只有几千、几万的时候或许...
  • 譬如 axios.post() 调完接口返回的数据接着给下面的接口调用 使用Promise解决问题 letpromiseSource=this.getPersonPhoto(sourceRoutePoints.slice(0,2),sourcePvid,0) letpromiseTarget=this.getPersonPhoto...
  • 正常处理逻辑触发异步操作,然后传递一个唯一标识。等到异步结果返回,根据传入的唯一标识,匹配此次结果。如何转换为同步正常的应用场景很多,但是有时候不想做数据存储,只是想简单获取调用结果。即想达到同步操作...
  • 正常处理逻辑触发异步操作,然后传递一个唯一标识。等到异步结果返回,根据传入的唯一标识,匹配此次结果。如何转换为同步正常的应用场景很多,但是有时候不想做数据存储,只是想简单获取调用结果。即想达到同步操作...
  • 使用ExtJs处理批量数据时,使用for循环通过Ext Ajax调用后台,代码如下: for(var i=0; i; i++){ Ext.Ajax.request({ url:this.url, params:params[i], method:'POST', success:function(response) { },...
  • 同步可以避免出现死锁,读脏数据的发生,一般共享某一资源的时候用,如果每个人都有修改权限,同时修改一个文件,有可能使一个人读取另一个人已经删除的内容,就会出错,同步就会按顺序来修改。 异步则是可以提高...
  • 抽离出处理数据的方法,用异步处理方式返回 返回的之中存在空值。。。 所以。。。。。在外层调用时同样需要异步操作 因为获取详情地址的方法是逐条处理的,所以在调用的外层进行了遍历 。。。。。。。。最终解决...
  • Linux内核异步数据处理--kfifo

    千次阅读 2017-06-01 16:29:23
    在驱动编程中,经常会遇到异步数据处理的情况,比如采用中断或定时器处理数据输入输出等情况 此时数据的采集与处理往往不同步,于是驱动编程中数据采集方需要将采集的数据暂时放到一个缓冲区中,使用方在需要...
  • 同步传输、异步传输、阻塞和非阻塞、同步处理异步处理  同步方式指的是发送方不等接收方响应,便接着发下个数据包的通信方式;而异步指发送方发出数据后,等收到接收方发回的响应,才发下一个数据包的通信...
  • Dubbo异步同步

    2021-02-01 18:54:54
    Dubbo是一款开源RPC框架,底层使用Netty作为默认的数据传输方式,那么请求处理理论上是异步的,但是我们在使用Dubbo时,是同步拿到结果的,这是因为Dubbo框架帮我们做了异步同步的操作。 ​ 构造一个...
  • 异步信号的同步处理——慢时钟域到快时钟域一、什么是亚稳态1.亚稳态发生原因2.亚稳态发生场合3.亚稳态危害二、理论分析1、信号传输中的亚稳态三、异步信号的同步处理,慢时钟域到快时钟域1、程序2、适用条件 一、...
  • [img=https://img-bbs.csdn.net/upload/201509/06/1441513185_419016.jpg][/img] [img=https://img-bbs.csdn.net/upload/201509/06/1441513059_680479.jpg][/img] 直接编辑有问题所以截图了

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,938
精华内容 1,575
关键字:

异步数据同步处理