JS异步回调（第二篇）

最新推荐文章于 2024-01-31 16:12:50 发布

is me monday

最新推荐文章于 2024-01-31 16:12:50 发布

阅读量202

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/qq_44742816/article/details/119930539

版权

看本篇时默认已经看完JS异步回调（第一篇）

一：异步回调的理解

异步：什么是异步？为什么要异步？怎么实现异步？

	1.js是单线程的语言（同一时间只能干一件事）
	2.如果某件事情需要干很久，同时我又不想一直等着它干完，怎么办？
			我可以在设计js这门语言的时候设计两个桶（队列）A和B，当我要执行某个方法时，我并不真的执行，而是把这
		个方法放到A或者B桶中，等我把所有的要执行的方法都加载到桶A或者B时，我再去遍历A中的所有方法开始执行，
		然后再遍历B中的方法再去执行。这样A中的任务总是优先被执行，我们把它叫**主队列**。B中的任务总是滞后执
		行，我们把它叫**异步队列**。-----这样就用单线程解决了异步执行的问题。
	3.那js在解析要执行的任务时怎么知道要把当前任务放到桶A还是桶B中呢？
			其实js在设计的时候就已经给特定的任务做了标记，当在执行时检测到此类标记就将它丢到桶B中，这些标记常
			见的有settimeout(),process.nextTick(),setImmediate,setinterval(),xmlhttprequest,vue中用到的axios等，一般网络请求都有异步。
	4.如何自定义一个方法并把他加入异步队列中呢？

回调：为什么要回调？实现回调的方式有哪些？

	1.回调的原因--我们执行一件任务但是不知道任务的终点发生时间，当这个任务有结果后我们需要做点什么，像js中
			的经常用到的点击事件，敲击一个键盘，给出什么反馈。再入上面的异步任务，当任务加载完成了，我们应该
			做什么，这就是为什么要用到回调
	2.实现回调的方式有哪些？
			监听事件，普通方法回调，使用Promise, 使用async/await等。

二:Promise对象使用和理解

1.为什么会出现promise？

官话-Promise是异步编程的解决方案，比传统的解决方案-回调函数和事件-更合理，且更强大

接下来我们就探索一下它合理，强大在哪儿？

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>promise合理性和强大性探索</title>
</head>
<body>
</body>
<script>
    //一.promise合理性和强大性探索
    //1简单的异步回调
    //1.1故事情景，小明先吃完一个苹果3s，再吃完一个橘子2s,总共用时5s
    const eatApple = function () {
        let now = new Date().getTime();
        while ((new Date()).getTime() - now < 3000) {
            continue;
        }
        console.log("我吃了一个苹果用时3s");
    }
    const eatOrange = function () {
        let now = new Date().getTime();
        while ((new Date()).getTime() - now < 2000) {
            continue;
        }
        console.log("我吃了一个橘子用时2s");
    }
    console.log("小明开始吃")
    eatApple();
    eatOrange();
    console.log("小明都吃完了")

    //1.2故事情景，吃完一个苹果需要3s,吃完一个橘子需要2s;让小明吃苹果吃完了告诉我，同时小红吃橘子吃完了也告诉我,当他们都吃完时我开始去吃蛋糕。
    //先用回调的方式
    let overApple = false;
    let overOrange = false;
    const eatCheck = function () {
        if (overApple && overOrange) {
            console.log("他们两个都吃完了所以我要吃蛋糕了")
        }
    }
    const asynceatApple = function (callback) {
        setTimeout(() => {
            console.log("小明苹果吃完了");
            overApple = true;
            callback();
        }, 3000)
    }
    const asynceatOrange = function (callback) {
        setTimeout(() => {
            console.log("小红吃完橘子了");
            overOrange = true;
            callback();
        }, 2000)
    }
    console.log("开始让小红和小明吃苹果和橘子")
    asynceatApple(eatCheck);
    asynceatOrange(eatCheck);
    //再使用promise
    const asyncEatApple = function () {
        return new Promise(resolve => {
            setTimeout(() => {
                console.log("小明苹果吃完了");
                resolve();
            }, 3000)
        });
    }
    const asyncEatOrange = function () {
        return new Promise(resolve => {
            setTimeout(() => {
                console.log("小红橘子吃完了");
                resolve();
            }, 2000)
        })
    }
    console.log("开始让小红和小明吃苹果和橘子")
    Promise.all([asyncEatApple(), asyncEatOrange()]).then(resp => {
        console.log("他们两个都吃完了所以我要吃蛋糕了")
    })

    //简单的异步回调体现不出promies和普通异步回到的区别，从代码的编写上甚至传统的异步方法回调更接近习惯的同步代码方法调用的写法。

    //2复杂的异步回到，带特定参数
    var data1={"result":1,"score":66};
    var data2={"result":0,"score":88};
    //2.1故事情景，异步获取学生a和学生b的成绩，当成绩都为60分以上时，老师被评为优秀教师;
    //原始回调方法：
    const stu1=function(goodScore){
        setTimeout(()=>{
           let result=data1;
           if(result.score>goodScore){
               stu2(goodScore);
           }else{
               console.log("当前学生分数小于,不能继续评选")
           }
        },3000)
    }
    const stu2=function(goodScore){
        setTimeout(()=>{
           let result=data2;
           if(result.score>goodScore){
              console.log("此老师是优秀教师")
           }else{
            console.log("当前学生分数小于,不能继续评选")
           }
        },3000)
    }
    const goodTeacher=function(goodScore){
        stu1(goodScore);
    }
    goodTeacher(60);
    //promise方法：
    const getStu1=function(){
        return new Promise(resolve=>{
            setTimeout(()=>{
                let result=data1;
                resolve(result);
            },3000)
        })
    }
    const getStu2=function(){
        return new Promise(resolve=>{
            setTimeout(()=>{
                let result=data2;
                resolve(result);
            },3000)
        })
    }
    const goodTeacher2=function(goodScore){
        Promise.all([getStu1(),getStu2()]).then(res=>{
            console.log(res)
            if(res[0].score>goodScore&&res[1].score>goodScore){
                console.log("此老师是优秀教师")
            }else{
                console.log("此老师不是优秀教师")
            }
        })
    }
    goodTeacher2(60)
    //2.2故事情景，异步获取学生a和学生b的成绩，当成绩都为80分以上时，老师被评为优秀教师;
    //原始回调方法
    goodTeacher(80);
    //promise
    goodTeacher2(80)
     //2.3故事情景，异步获取学生a和学生b的成绩，当成绩都为80分以上且result为1时，老师被评为优秀教师;
     //原始回调方法
     const stu1=function(goodScore){
        setTimeout(()=>{
           let result=data1;
           if(result.score>goodScore&&result.result==1){
               stu2(goodScore);
           }else{
               console.log("当前学生分数小于,不能继续评选")
           }
        },3000)
    }
    const stu2=function(goodScore){
        setTimeout(()=>{
           let result=data2;
           if(result.score>goodScore&&result.result==1){
              console.log("此老师是优秀教师")
           }else{
            console.log("当前学生分数小于,不能继续评选")
           }
        },3000)
    }
    const goodTeacher=function(goodScore){
        stu1(goodScore);
    }
    goodTeacher(80);
     //promise
     const goodTeacher2=function(goodScore){
        Promise.all([getStu1(),getStu2()]).then(res=>{
            console.log(res)
            if(res[0].score>goodScore&&res[1].score>goodScore&&res[0].result==1&&res[1].result==1){
                console.log("此老师是优秀教师")
            }else{
                console.log("此老师不是优秀教师")
            }
        })
    }
    goodTeacher2(80)
</script>
</html>

2.promise优势点

异步调用过程可以返回一个Promise对象，可以让异步代码像同步代码编写，当需求变更时使用promise可以更改较少的代码，使代码的维护性和扩展性更好。

is me monday

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫