2020年11月03日(请求的串行和并行)

请求的串行和并行

1.有三个ajax请求，如何让这三个ajax请求串行执行，即第一个执行完成后在执行另一个？

2.如何让他们并行执行，然后三个请求都执行完成后，再执行某个操作？

// 用同步模式async: false
$.ajax({  
    url: "ajax请求1",  
    async: false,  
    success: function (data) {  
        console.log("ajax请求1 完成");  
    }  
});  
$.ajax({  
    url: "ajax请求2",  
    async: false,  
    success: function (data) {  
        console.log("ajax请求2 完成");  
    }  
});  
$.ajax({  
    url: "ajax请求3",  
    async: false,  
    success: function (data) {  
        console.log("ajax请求3 完成);  
    }  
});  

也可以使用async和await来实现串行

那么async和await到底帮我们做了什么呢？

1.async

async function testAsync() {
    return "hello async";
}
 
const result = testAsync();
console.log(result);

输出一个promise对象，所以async会返回一个 Promise 对象，如果在函数中 return 一个直接量，async 会把这个直接量通过 Promise.resolve() 封装成 Promise 对象。如果async没有返回值呢？可想而知会返回Promise { undefined }

2.await

await 等待的是一个表达式，这个表达式的计算结果是 Promise 对象或者其它值，等到之后，他会干嘛呢？

如果它等到的不是一个 Promise 对象，那 await 表达式的运算结果就是它等到的东西。

如果它等到的是一个 Promise 对象，await 就忙起来了，它会阻塞后面的代码，等着 Promise 对象 resolve，然后得到 resolve 的值，作为 await 表达式的运算结果。嘿嘿，说到这里想到了洋葱模型，这就是 await 必须用在 async 函数中的原因。async 函数调用不会造成阻塞，它内部所有的阻塞都被封装在一个 Promise 对象中异步执行

---

//并行执行就只能用异步模式。并设置变量进行计数  
var num = 0;  
function isAllSuccess() {  
    num++;  
    if (num>=3)  
        console.log("三个ajax请求全部完成");  
}  
$.ajax({  
    url: "ajax请求1",  
    async: true,  
    success: function (data) {  
        console.log("ajax请求1 完成");  
        isAllSuccess();  
    }  
});  
$.ajax({  
    url: "ajax请求2",  
    async: true,  
    success: function (data) {  
        console.log("ajax请求3 完成");  
        isAllSuccess();  
    }  
});  
$.ajax({  
    url: "ajax请求3",  
    async: true,  
    success: function (data) {  
        console.log("ajax请求3 完成");  
        isAllSuccess();  
    }  
});

实现并行可以使用Promise.all()

Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组,一一对应，而失败的时候则返回最先被reject失败状态的值。

题目原文连接https://juejin.im/post/6865962560363167758/

/** ===================== 题目 ================================**/
const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

const subFlow = createFlow([() => delay(1000).then(() => log("c"))]);

createFlow([
  () => log("a"),
  () => log("b"),
  subFlow,
  [() => delay(1000).then(() => log("d")), () => log("e")],
]).run(() => {
  console.log("done");
});

// 需要按照 a,b,延迟1秒,c,延迟1秒,d,e, done 的顺序打印