zoukankan      html  css  js  c++  java
  • JavaScript的异步处理

    Javascript语言的执行环境是"单线程"(single thread,就是指一次只能完成一件任务。如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务,以此类推)。

    为了解决这个问题,Javascript语言将任务的执行模式分成两种:同步(Synchronous)和异步(Asynchronous)。

    “同步模式" 就是上一段的模式,后一个任务等待前一个任务结束,然后再执行,程序的执行顺序与任务的排列顺序是一致的、同步的;"异步模式"则完全不同,每一个任务有一个或多个回调函数(callback),前一个任务结束后,不是执行后一个任务,而是执行回调函数,后一个任务则是不等前一个任务结束就执行,所以程序的执行顺序与任务的排列顺序是不一致的、异步的。

    “异步模式" 非常重要。在浏览器端,耗时很长的操作都应该异步执行,避免浏览器失去响应,最好的例子就是Ajax操作。在服务器端,"异步模式"甚至是唯一的模式,因为执行环境是单线程的,如果允许同步执行所有http请求,服务器性能会急剧下降,很快就会失去响应。

    回调

    回调是 JS 中最原始,也是最古老的异步通知机制。

    function asyncFn(callback) {
      // 利用setTimeout模拟异步
      setTimeout(function () {
        console.log('执行完毕');
        callback(); // 发通知
      }, 2000);
    }
    
    asyncFn(function () {
      console.log('我会在2s后输出');
    });
    

    事件监听

    任务的执行不取决代码的顺序,而取决于某一个事件是否发生。

    监听函数有:on,bind,listen,addEventListener,observe

    还是以f1和f2为例。首先,为f1绑定一个事件(采用jquery写法)。
    f1.on('done',f2);
    上面代码意思是,当f1发生done事件,就执行f2。

    发布订阅

    promise

    (1)promise对象是commonJS工作组提出的一种规范,一种模式,目的是为了异步编程提供统一接口。

    (2)promise是一种模式,promise可以帮忙管理异步方式返回的代码。他讲代码进行封装并添加一个类似于事件处理的管理层。我们可以使用promise来注册代码,这些代码会在在promise成功或者失败后运行。

    (3)promise完成之后,对应的代码也会执行。我们可以注册任意数量的函数再成功或者失败后运行,也可以在任何时候注册事件处理程序。

    (4)promise有两种状态:1、等待(pending);2、完成(settled)。

    promise会一直处于等待状态,直到它所包装的异步调用返回/超时/结束。

    (5)这时候promise状态变成完成。完成状态分成两类:1、解决(resolved);2、拒绝(rejected)。

    (6)promise解决(resolved):意味着顺利结束。promise拒绝(rejected)意味着没有顺利结束。

    //promise
    var p=new Promise(function(resolved))
    //在这里进行处理。也许可以使用ajax
    setTimeout(function(){
       var result=10*5;
       if(result===50){
          resolve(50);
       }else{
         reject(new Error('Bad Math'));
      }
    },1000);
    });
    p.then(function(result){
        console.log('Resolve with a values of %d',result);
    });
    p.catch(function(){
       console.error('Something went wrong');
    });
    

    (1)代码的 关键在于setTimeout()的调用。

    (2)重要的是,他调用了函数resolve()和reject()。resolve()函数告诉promise用户promise已解决;reject()函数告诉promise用户promise未能顺利完成。

    (3)另外还有一些使用了promise代码。注意then和catch用法,可以将他们想象成onsucess和onfailure事件的处理程序。

    (4)巧妙地方是,我们将promise处理与状态分离。也就是说,我们可以调用p.then(或者p.catch)多少次都可以,不管promise是什么状态。

    (5)promise是ECMAscript 6管理异步代码的标准方式,javascript库使用promise管理ajax,动画,和其他典型的异步交互。

    简单的说,它的思想是:每一个异步任务返回一个promise对象,该对象有一个then方法,允许指定回调函数。

    f1.then(f2);

    Promise.all

     //使用场景,同时从不同地方请求多条数据时
        Promise.all([
            $.ajax({
                url:"1.txt"
            }),
            $.ajax({
                url:"2.txt"
            })
        ]).then(
            (data)=>{
                console.log(data)
            }
        )
    

    generator

    生成器函数 可以暂停

     //1.生成器函数  优点 先等待异步完成 再执行下面的代码
            //yield 后面的值给了下一个next() 
        function *show(){
            alert(1);
           let data= yield new Promise((resolve,reject)=>{
                setTimeout(() => {
                    resolve(100);
                }, 5000);
            })
            console.log(data);
            alert(2);
        }
            //2.调用next() 完整
            //3.变量去接 生成器函数
        //生成器函数调用必须配合 .next
        let s=show();
        let p=s.next();
        console.log(p);
        console.log(p.value);
        let m= p.value.then((data)=>{
            s.next(data)
            console.log(data);
        })
        
       
        // p.value.then((data)=>{
        //     s.next(data);
        // })
    
        //参数  变量.next(参数) =>let 变量 =>yield
        //返回 yield()===> 变量.next() 
    

    async/await

    当前 JavaScript 中,处理异步的最佳方案。

    async函数返回一个 Promise 对象,可以使用then方法添加回调函数。当函数执行的时候,一旦遇到await就会先返回,等到异步操作完成,再接着执行函数体内后面的语句。
    async函数内部return语句返回的值,会成为then方法回调函数的参数。

     async function show() {
            alert(1);
            let data = await new Promise((resolve,reject)=>{
                //网络请求时间来决定的
                setTimeout(() => {
                    resolve(100)
                }, 3000);
            })
            console.log(data)
            let Data = await new Promise((resolve,reject)=>{
                //网络请求时间来决定的
                setTimeout(() => {
                    resolve({
                        name:"heson",
                        age:12
                    })
                }, 3000);
            })
            console.log(Data)
            alert(2);
        }
        show();
    
  • 相关阅读:
    [LeetCode] 714. Best Time to Buy and Sell Stock with Transaction Fee
    [LeetCode] 309. Best Time to Buy and Sell Stock with Cooldown
    [LeetCode] 1291. Sequential Digits
    [LeetCode] 188. Best Time to Buy and Sell Stock IV
    [LeetCode] 123. Best Time to Buy and Sell Stock III
    [LeetCode] 581. Shortest Unsorted Continuous Subarray
    [LeetCode] 1041. Robot Bounded In Circle
    [LeetCode] 1110. Delete Nodes And Return Forest
    [LeetCode] 421. Maximum XOR of Two Numbers in an Array
    [LeetCode] 1109. Corporate Flight Bookings
  • 原文地址:https://www.cnblogs.com/heson/p/10017916.html
Copyright © 2011-2022 走看看