多网络请求并发执行和顺序执行(方法梳理)

并发执行：多个请求全部结束进行后续操作。通过梳理体会Promise就是在说我内部的这部分代码是有异步操作的，不知道啥时候能返回结果，要想要等有结果干点啥啊，放在then里，我等有结果了，把结果抛在then里面，要干啥都都放在then就好了。Promise妙处就在于此，跟回调地狱说拜拜。

方法一：请求未发送执行函数时循环发送请求，简单用数组存储请求结果，请求顺序与结果存储顺序一致。

var promise1 = function(){return new Promise((reslove, reject)=>{
    setTimeout(()=>{
        console.log('promise1')
        reslove('promise1')
    },1000)
})}
var promise2 = function(){return new Promise((reslove, reject)=>{
    setTimeout(()=>{
        console.log('promise2')
        reslove('promise2')
    },500)
})}
var promise3 = function(){return new Promise((reslove, reject)=>{
    setTimeout(()=>{
        console.log('promise3')
        reslove('promise3')
    },1500)
})}

function allPromise(arrPromise, callback){  
    return new Promise((reslove)=>{
        let resArr = [], len = arrPromise.length, num=0;
        arrPromise.forEach((promise, i)=>{
            promise().then(res=>{
                resArr[i] = res;
                num++;
                 if(num === len){
                    reslove(resArr);
                 }
            })
        })
    })
}

allPromise([promise1, promise2, promise3]).then(res=>{
    console.log(res)
});

1587108462.jpg

方法二：apromise.all，请求已发送，apromise.all获取结果。

var promise1 = new Promise((reslove, reject)=>{
    setTimeout(()=>{
        console.log('promise1')
        reslove('promise1')
    },1000)
})
var promise2 = new Promise((reslove, reject)=>{
    setTimeout(()=>{
        console.log('promise2')
        reslove('promise2')
    },500)
})
var promise3 = new Promise((reslove, reject)=>{
    setTimeout(()=>{
        console.log('promise3')
        reslove('promise3')
    },1500)
})
Promise.all([promise1, promise2, promise3]).then(function(values){
  console.log(values)
})

//模拟Promise.all简单用数组存储请求结果，请求顺序与结果存储顺序一致。
function promiseAll(promiseArr){
    return new Promise((reslove)=>{
    let arr = [], num=0;
    promiseArr.forEach((promise, i)=>{
        promise.then(res=>{
            arr[i] = res;
            num++;
            if(promiseArr.length === num){
                reslove(arr)
            }
        })
    })
    })
}
promiseAll([promise1, promise2, promise3]).then(res=>{console.log(res)});

1587108462.jpg

顺序执行：一个请求返回结果后执行另一个请求

方法一：简单粗暴

function step1() {
    return new Promise(function (resolve, reject) {
        console.log('执行1')
        setTimeout(() => {
            resolve('1传递的参数')
        }, 1000);
    });
}
function step2(data) {
    return new Promise(function (resolve, reject) {
        console.log('执行2 ,接收的参数', data)
        setTimeout(() => {
            resolve('2传递的参数')
        }, 400);
    });
}
function step3(data) {
    return new Promise(function (resolve, reject) {
        console.log('执行3 ,接收的参数', data)
        setTimeout(() => {
            resolve('3传递的结果')
        }, 500);
    });
}
step1().then(step2).then(step3).then(res => {
    console.log('最后', res)//3传递的参数
});

1587113106(1).jpg

方法二：生成器（ generator）是能返回一个迭代器的函数。 生成器函数也是一种函数，最直观的表现就是比普通的function多了个星号*，在其函数体内可以使用yield关键字,函数会在每个yield后暂停，等待，直到这个生成的对象，调用下一个next（）,每调用一次next 会往下执行一次yieId，然后暂停。

function* main() {
    var result = yield step1("执行开始");
    var data2 = yield step2(result);
    var data3 = yield step3(data2);
    console.log('执行结束', data3);
}
 
function step1(data) {
    setTimeout(() => {
        console.log('第一个请求', data),
        it.next('第一个请求 result');
    }, 1000)
}
function step2(data) {
    setTimeout(() => {
        console.log('第二个请求', data),
            it.next('第二个请求 result');
    }, 500)
}
function step3(data) {
    setTimeout(() => {
        console.log('第三个请求 ', data),
            it.next('第三个请求 result');
    }, 400)
}
 
var it = main();
it.next();

1587113883(1).jpg