JavaScript异步和单线程

2018-06-24 01:58:32来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

一,同步和异步的区别:
同步会阻塞代码执行,而异步不会。(比如alert是同步,setTimeout是异步)
二,前端使用异步的场景:
1,定时任务:setTimeout,setInterval
2,网络请求:ajax请求,动态<img>加载
3,事件绑定
三,什么是单线程,和异步有什么关系
1,什么是单线程:只有一个线程,同一时间只能做一件事情,从上到下执行
例:
    // 循环执行期间,JS 执行和DOM渲染暂时卡顿
    var i, sum = 0;
    for(var i = 0; i < 1000000000; i++) {
        sum += 1;
    }
    console.log(sum);

    // alert 不处理,JS 执行和DOM渲染暂时卡顿
    alert('hello');
    console.log(2);
2,为什么是单线程:避免DOM渲染的冲突:
(1),浏览器需要渲染DOM
(2),JS可以修改DOM结构
(3),JS执行的时候,浏览器DOM渲染会暂停
(4),两段JS也不能同时执行
(5),为了利用多核CPU的计算能力,HTML5提出Web Worker标准,允许JavaScript脚本创建多个线程,但是子线程完全受主线程控制,且不得操作DOM。所以,这个新标准并没有改变JavaScript单线程的本质
 
3,JS单线程解决方案:异步
    console.log(100)
    setTimeout(function() {
        console.log(200)   //反正1000ms 之后执行
    },1000)                //先不管它,先让其他JS代码执行
    console.log(300);
var ajax = $.ajax({
        url: './data.json',
        success: function(result) {  //ajax加载完才执行
            console.log(result);     //先不管它,先让其他JS代码执行
        }
    })
    console.log(ajax) //{readyState: 1, getResponseHeader: ?, getAllResponseHeaders: ?, setRequestHeader: ?, overrideMimeType: ?, …}
    console.log(200); //200 
1,异步的问题:
问题一,没按照书写方式顺序执行,可读性差
问题二,callback中不容易模块化
四,什么是event-loop(异步方案的实现方式)
event-loop:事件轮询,JS实现异步的具体解决方案。
-同步代码,直接执行
-异步函数先放在 异步队列 中
-待同步函数执行完毕,轮询执行 异步队列 中的函数
(定时任务,网络请求,事件绑定)
例1:
例2:
例3:
五,jquery的Deferred
1, jQuery1.5的变化:使用jQuery Deferred,初步引入Promise概念。
(1)仍不会也无法改变js异步和单线程的本质
(2)只能从写法上杜绝callback这种形式
(3)它是一种语法糖形式,但是解耦了代码
(4)很好地体现:开放封闭原则(对扩展开放,对修改封闭)(多人开发协作不相互干扰,减少回归测试的成本)
    // jQuery1.5之前
    var ajax = $.ajax({
        url: './data.json',
        success: function(result) {
            console.log('success1');
            console.log('success2');
            console.log('success3');
        },
        error:function(){
            console.log('error');
        }
    })
    console.log(ajax) //返回一个XHR对象
    // jquery1.5之后
    var ajax = $.ajax('./data.json');
    ajax.done(function() {
            console.log('success1');
        })
        .fail(function() {
            console.log('error1');
        })
        .done(function() {
            console.log('success2')
        })
    console.log(ajax); //返回一个deferred对象,可以进行链式操作

    // 还可以使用很像promise写法
    var ajax = $.ajax('./data.json');
    ajax.then(function(){
        console.log('success1');
    },function(){
        console.log('error1');
    }).then(function(){
        console.log('success2');
    },function(){
        console.log('error2');
    })

2,jQuery Deferred应用

看一个简单的例子:

   // 给出一段非常简单的异步操作代码,使用setTimeout函数
    var wait = function() {
        var task = function() {
            console.log('执行完成');
            // 1
            // 2
            // 3
        }
        setTimeout(task, 1000)
    }
    wait()
    // 新增需求:要在执行完成之后进行某些特别复杂的操作,代码可能会很多,而且分好几个步骤

使用Deferred:(开放封闭原则)

   function waitHandler() {
        // 定义
        var dtd = $.Deferred(); //创建一个deferred对象
        var wait = function(dtd) { //要求传入一个deferred对象
            var task = function() {
                console.log('执行完成');
                // 成功
                dtd.resolve(); //表示异步任务已经完成
                // 失败
                // dtd.reject();  //表示异步任务失败或出错
            }
            setTimeout(task, 1000)
            // wait返回
            return dtd; //要求返回deferred对象
        }
        // 最终返回  注意这里一定要有返回值
        return wait(dtd);
    }

    var w = waitHandler();
    w.then(function() {
        console.log('ok1');
    }, function() {
        console.log('err1');
    }).then(function() {
        console.log('ok2');
    }, function() {
        console.log('err2');
    })

    // 还有 w.done  w.fail

执行reject

  function waitHandler() {
        // 定义
        var dtd = $.Deferred(); //创建一个deferred对象
        var wait = function(dtd) { //要求传入一个deferred对象
            var task = function() {
                console.log('执行完成');
                // 成功
                // dtd.resolve(); //表示异步任务已经完成
                // 失败
                dtd.reject(); //表示异步任务失败或出错
            }
            setTimeout(task, 1000)
            // wait返回
            return dtd; //要求返回deferred对象
        }
        // 最终返回  注意这里一定要有返回值
        return wait(dtd);
    }

    var w = waitHandler();
    w.then(function() {
        console.log('ok1');
    }, function() {
        console.log('err1');
    })
    w.then(function() { //reject需要分开,不然执行顺序就错啦
        console.log('ok2');
    }, function() {
        console.log('err2');
    }) 

这里注意一个原则:开放封闭原则

总结,dtd的API可分成两类,用意不同

第一类(主动执行):dtd.resolve dtd.reject
第二类(监听):dtd.then dtd.done dtd.fail
这两类应该分开,否则后果很严重
可在上面代码最后执行dtd.reject()试下结果

使用dtd.promise()

  function waitHandler(){
        var dtd = $.Deferred();//Deferred 
        var wait = function(dtd) {
            var task = function(){
                console.log('执行完成');
                dtd.resolve();
            }
            setTimeout(task,2000);
            return dtd.promise();//注意,这里返回的是promise,而不是直接返回deferred对象
        }
        return wait(dtd);
    }
    var w = waitHandler();//经过上面的改动,w接收的就是一个promise对象
    $.when(w)
    .then(function(){
        console.log('ok1');
    })
    .then(function(){
        console.log('ok1');
    })
    w.reject()//执行这句会报错 w.reject is not a function  promise不能使用,只有监听的方法了,使用者只能监听,开发人员封装的时候才能用

 

 说明promise和deferred区别: promise只能被动监听,不能主动执行

六,Promise的基本使用和原理

1,基本语法回顾(备注:现在高级浏览器基本都支持promise,如果有些不支持,可以在cdn上找,引入 bluebird )

<script src="https://cdn.bootcss.com/bluebird/3.5.1/bluebird.min.js"></script>

 

   function loadImg(src) {
        const promise = new Promise(function(resolve, reject) { //new Promise实例
            var img = document.createElement('img');
            img.src = src;

            img.onload = function() {
                resolve(img);
            }
            img.onerror = function() {
                reject('图片加载失败');
            }
        });
        return promise; //返回 Promise实例
    }
    var src = "https://shared-https.ydstatic.com/dict/v2016/result/logo.png";
    var result = loadImg(src); //Promise实例
    result.then(function(img) { //then监听结果,成功时执行resolve(), 失败时执行reject()
        console.log(1, img.width); //1 164
        return img;
    }, function(img) {
        console.log('failed');
        return img;
    }).then(function(img) {
        console.log(2, img.height) //2 36
    })

2,异常捕获

    // 规定:then只接受一个参数(成功的处理函数),最后统一用catch捕获异常
    // var src = "https://shared-https.ydstatic.com/dict/v2016/result/logo.png";
    var src = "https://shared-https.ydstatic.com/dict/v2016/result/logo_1.png";//写一个不存在的地址
    var result = loadImg(src);
    result.then(function(img) {
        console.log(img.width);
        return img;
    }).then(function(img) {
        console.log(img.height);
    }).catch(function(ex) {
        // 最后统一用catch捕获异常
        console.log(ex); //图片加载失败  (logo_1.png:1 GET https://shared-https.ydstatic.com/dict/v2016/result/logo_1.png 404 (Not Found))
    })

自定义错误:

function loadImg(src) {
        const promise = new Promise(function(resolve, reject) { //new Promise实例
            var img = document.createElement('img');
            // 模拟抛出错误 模拟语法错误,逻辑之外的bug
            throw new Error('自定义错误');
            img.src = src;

            img.onload = function() {
                resolve(img);
            }
            img.onerror = function() {
                reject('图片加载失败');
            }
        });
        return promise; //返回 Promise实例
    }

     // 规定:then只接受一个参数(成功的处理函数),最后统一用catch捕获异常
    var src = "https://shared-https.ydstatic.com/dict/v2016/result/logo.png";
    // var src = "https://shared-https.ydstatic.com/dict/v2016/result/logo_1.png"; //写一个不存在的地址
    var result = loadImg(src);
    result.then(function(img) {
        console.log(img.width);
        return img;
    }).then(function(img) {
        console.log(img.height);
    }).catch(function(ex) {
        // 最后统一用catch捕获异常
        console.log(ex); 
    })

3,多个串联

   // 多个串联 图片只是用来模拟,实际可能更多的不是用图片,比如处理用户信息啥的,加载用户信息的时候,先拿到用户信息,再去处理其他信息等
    var src1 = 'https://shared-https.ydstatic.com/dict/v2016/result/logo.png';
    var result1 = loadImg(src1);
    var src2 = 'https://img.mukewang.com/user/57b98e990001351004400440-100-100.jpg';
    var result2 = loadImg(src2);

    // 链式操作
    result1.then(function(img1) {
        console.log('第一个图片加载完成', img1.width);
        return result2; //重要!!!
    }).then(function(img2) {
        console.log('第二个图片加载完成', img2.width);
    }).catch(function(ex) {
        // 最后统一用catch捕获异常
        console.log(ex);
    })

4,Promise.all (全部promise实例完成后) 和 Promise.race (只要有一个promise实例完成)

   // Promise.all 接收一个包含多个promise实例的数组,待全部完成之后,统一执行success
    var src1 = 'https://shared-https.ydstatic.com/dict/v2016/result/logo.png';
    var result1 = loadImg(src1); //pending
    var src2 = 'https://img.mukewang.com/user/57b98e990001351004400440-100-100.jpg';
    var result2 = loadImg(src2);
    Promise.all([result1, result2]).then(datas => {
        // 接收到的datas是一个数组,依次包含了多个promise返回的内容
        console.log('all', datas[0]); //all <img src=?"https:?/?/?shared-https.ydstatic.com/?dict/?v2016/?result/?logo.png">?
        console.log('all', datas[1]); //all <img src=?"https:?/?/?img.mukewang.com/?user/?57b98e990001351004400440-100-100.jpg">?
    })

Promise.race (只要有一个promise实例完成)

    // Promise.race 接收一个包含多个promise实例的数组
    // 只要有一个完成,就执行success
    Promise.race([result1, result2]).then(data => {
        // data即最先执行完成的promise的返回值
        console.log('race', data); //race <img src=?"https:?/?/?shared-https.ydstatic.com/?dict/?v2016/?result/?logo.png">?
    })

promise标准

1,关于“标准”的闲谈

任何技术推广使用都需要一套标准来支撑 
如html css js等,无规矩不成方圆
任何不符合标准的东西,终将会被用户抛弃
不要挑战标准,不要自造标准

2,状态变化

三种状态:pending fulfilled rejected
pending:   初始状态
fulfilled: 成功
rejected:失败

pending到fulfilled,或者pending到rejected,状态不可逆

3,then

Promise实例必须实现then方法
then()必须可以接收两个函数作为参数
then()返回的必须是一个Promise实例
如果then中没有返回promise实例,则默认返回的是上一个promise实例,如果返回了一个promise实例,那就默认为返回的promise实例

七,async/await(和promise区别、联系等)(babel已经支持,koa也已经支持)

1,then只是将callback拆分了

    // then只是将callback拆分了
    var w = waitHandler();
    w.then(function() {
        console.log('ok1');
    }, function() {
        console.log('err1');
    }).then(function() { 
        console.log('ok2');
    }, function() {
        console.log('err2');
    })

 


2,async/await是最直接的同步写法

   // async/await是最直接的同步写法
    const load = async function() {
        const result1 = await loadImg(src1);
        console.log(result1);
        const result2 = await loadImg(src2);
        console.log(result2);
    }
    load()

完整的:

    import 'babel-polyfill'; //引入babel-polyfill 

    // async/await是最直接的同步写法
    function loadImg(src) {
        const promise = new Promise(function(resolve, reject) {
            var img = document.createElement('img');
            img.src = src;

            img.onload = function() {
                resolve(img);
            }
            img.onerror = function() {
                reject('图片加载失败');
            }
        });
        return promise;
    }
    var src1 = 'https://shared-https.ydstatic.com/dict/v2016/result/logo.png';
    var src2 = 'https://img.mukewang.com/user/57b98e990001351004400440-100-100.jpg';
    // async/await是最直接的同步写法
    const load = async function() { //函数必须用async标识
        const result1 = await loadImg(src1); //await后面跟的是一个Promise实例
        console.log(result1);
        const result2 = await loadImg(src2); //await后面跟的是一个Promise实例
        console.log(result2);
    }
    load()

 

用法:
要在函数体内使用await,函数必须用async标识
await后面跟的是一个Promise实例
需要安装babel-polyfill

npm i --save-dev babel-polyfill 

3,总结

使用了Promise,并没有和Promise冲突
完全是同步的写法,再也没有回调函数
但是:改变不了js单线程,异步的本质

 
八,当前 JS 解决异步的方案总结

1,jquery Deferred
2,Promise
3,Async/await

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:JavaScript原型与原型链,原型的实际应用

下一篇:Head First HTML与CSS、XHTML (中文版).(Elisabeth Freeman) PDF