【学习前端第四十七课】ES6异步编程与模块化开发

ES6异步编程与模块化开发

在之前的ES5里面，我们已经解决了关于异步的概念，并得到了一个口诀：同步等待，异步执行

异步最大的缺点无法得到返回值

在ES5中要解决返回值的问题我们一般使用回调函数来进行，在ES6中为了解决这个问题，又出了好几种处理方案

1、回调函数

2、生成器函数

3、Promise

4、async / await

异步一直是ES6里面的难点，所以w3c针对异步编程做优化

回调函数处理异步

在ES5里面，最典型的异步Ajax以及 定时器 setTimeout / setinterval ，那么我们现在通过setTimeout来实现一个异步场景

下面我们模拟驾照考试现场，我们全程使用回调函数来进行

//科目一考试
function kemu1(callBack){
   
   
    console.log("张三在考科目一");
    //3秒之后得到结果
    setTimeout(()=>{
   
   
        let result1 = parseInt(Math.random() * 30) + 70;
        if(typeof callBack == "function"){
   
   
            callBack(result1);
        }
    },3000)
}

//科目二考试
function kemu2(callBack){
   
   
    console.log("张三在考科目二");
    //3秒之后得到结果
    setTimeout(()=>{
   
   
        let result2 = parseInt(Math.random() * 20) + 80;
        if(typeof callBack == "function"){
   
   
            callBack(result2);
        }
    },3000)
}

//科目三考试
function kemu3(callBack){
   
   
    console.log("张三在考科目三");
    //3秒之后得到结果
    setTimeout(()=>{
   
   
        let result3 = parseInt(Math.random() * 20) + 80;
        if(typeof callBack == "function"){
   
   
            callBack(result3);
        }
    },3000)				
}


kemu1(result1 => {
   
   
    if(result1 > 89){
   
   
        console.log(`你的科目一考试成绩为${
     
     result1},请继续开始考试`) 
        kemu2(result2 => {
   
   
            if(result2 > 79){
   
   
                console.log(`你的科目二考试成绩为${
     
     result2},请继续开始考试`);
                kemu3(result3 => {
   
   
                    if(result3 >89){
   
   
                        console.log(`你的科目三考试成绩为${
     
     result3},请继续开始考试`);
                    }else{
   
   
                        console.log(