js多个异步请求

一，两个（或多个）js异步并发执行，怎么在两个AJax异步操作之后执行一个新的操作 原题来自

ES6 方法

1.Promise 包装异步ajax操作，
2.定义async 函数，
3.用await等待promise数据异步获取完成
这一种方法简洁高效，下面请看我专门给你写的示例代码
我懒得用ajax获取数据了，就用settimeout这个函数模拟获取数据吧，这个函数是异步的，原理效果一样。

//模拟ajax异步操作1
function ajax1() {
    const p = new Promise((resolve, reject) => {
        setTimeout(function() {
            resolve('ajax 1 has be loaded!')
        }, 1000)
    })
    return p

}
//模拟ajax异步操作2
function ajax2() {
    const p = new Promise((resolve, reject) => {
        setTimeout(function() {
            resolve('ajax 2 has be loaded!')
        }, 2000)
    })
    return p
}
//等待两个ajax异步操作执行完了后执行的方法
const myFunction = async function() {
    const x = await ajax1()
    const y = await ajax2()
        //等待两个异步ajax请求同时执行完毕后打印出数据
    console.log(x, y)
}
myFunction()

用jQ的话直接：jQuery.when()方法源码分析

$.when($.ajax("page1"), $.ajax("page2")).done(function(){});

以及原生仿when

function ajax(callback){
    callback = callback || function(){};
    var xhr = new XMLHttpRequest();
    xhr.open("get","");
    xhr.onload = function(res){ callback(res) };
    xhr.send(null); 
}

var when = (function(){
    var i = 0,
        len = 0,
        data = [];
    return function(array,callback){
        callback = callback || function(){};
       len = len || array.length;
        var fn = array.shift();
       
       fn(function(res){
            i++;
            data.push(res);
            if(i < len){
                when(array,callback);
            } else {
                callback(data);
            } 
       });   
    };
})();

when([ajax,ajax],function(data){
    console.log(data);
});

二，js多个异步请求，按顺序执行next

在js里面，偶尔会遇见需要多个异步按照顺序执行请求，又不想多层嵌套，，这里和promise.all的区别在于，promise或者Jquery里面的$.when 是同时发送多个请求，一起返回，发出去的顺序是一起；这里是按照顺序发请求

首先创建一个迭代器，接收任意多个函数参数

function nextRegister(){
            var args = arguments;
            var count = 0;
            var comm = {};
            function nextTime(){
                count++;
                if(count < args.length){
                    if(args[count] && Object.prototype.toString.call(args[count]) == '[object Function]'){
                        args[count](comm,nextTime);
                    }
                }
            }
            if(args[count] && Object.prototype.toString.call(args[count]) == '[object Function]'){
                args[count](comm,nextTime);
            }  
        }

创建多个异步的函数，注入到迭代器中

/*
         comm:多个函数，公用的变量
         next:调用下一个函数
         * */
        function fn1(comm,next){
            console.log('1');
            comm.age = 20;
            next();
        }
        function fn2(comm,next){
            next();
            console.log('2');
            console.log(comm.age);
        }
        function fn3(comm,next){
            console.log('3');
        }
 
//开始执行迭代
nextRegister(fn1,fn2,fn3);

在这里，fn1-fn3函数中，做异步操作，知道在异步成功的时候调用next()就可以继续执行下一个函数，同时可以将前面函数返回的结果，绑定在comm上，带到下一个函数中

猜你喜欢