一次异步处理

前言

今天回忆了一下在做项目的时候遇到的一个小问题。就是当两个接口请求的数据相互没有影响时,而你却需要这两个接口的所有数据,你会怎么做呢?

第一种方案

当我处理这个的时候想到的第一个方案是这样的。由于两个接口相互没有影响,我使用了一个中间量进行判断。代码是这样写的。

 var flag=2;
    //请求数据1
    function ajax(callback) {
        //开始请求数据
        setTimeout(()=> {
            //请求接收,假设数据是 
            let data = {
                result:1,
                txt: '请求成功',
                name: '小小坤'
            }
            flag--;
            if(!flag){
                callback();
            }
        }, 1000);
    }
    //请求数据2
    function ajax1(callback) {
        //开始请求数据
        setTimeout(()=> {
            //请求接收,假设数据是 
            let data = {
                result:1,
                txt: '请求成功',
                age: 18
            }
            flag--;
            if(!flag){
                callback();
            }
        }, 2000);
    }
    ajax(show);
    ajax1(show); 
    function show(datas) {
        console.log('-- 在这里再进行处理 --');
    }

简单粗暴的解决掉了,同时这种方式耗时是 max(ajax,ajax1);

第二种方案(算是优化)

 let toString=Object.prototype.toString;
    /**
    * timer {Number} 次数
    * callback {Function} 回掉函数
    */
    function after(timer, callback) {
        if(toString.call(timer)!=="[object Number]") throw ('timer is Number');
        if(timer<=0)  throw ('timer minimum is 1');
        if(toString.call(callback)!=="[object Function]") throw ('callback is Function');
        let results=[];//结果
        return (...arg) =>{
            results.push(arg);
            if (--timer == 0) {
                callback(results);
                results.length=0;
            }
        }
    }
    let out = after(2, (allResults)=> {
        show(allResults);
    });
    //请求数据1
    function ajax(callback) {
        //开始请求数据
        setTimeout(()=> {
            //请求接收,假设数据是 
            let data = {
                result:1,
                txt: '请求成功',
                name: '小小坤'
            }
            out(data);
        }, 1000);
    }
    //请求数据2
    function ajax1() {
        //开始请求数据
        setTimeout(()=> {
            //请求接收,假设数据是 
            let data = {
                result:1,
                txt: '请求成功',
                age: 18
            }
            out(data);
        }, 2000);
    }
    ajax();
    ajax1(); 
    function show(datas) {
       console.log(datas[0],'-- 所有结果,在这里再进行处理 --');
       console.log(datas[1],'-- 所有结果,在这里再进行处理 --')
    }

总结

以上方案算是最基本的解决方案,比如 观察者模式、Generator 函数、Promise、async/await
都可以处理这样的业务。

原文地址:https://www.cnblogs.com/xiaoxiaokun/p/9565694.html