js异步处理

Posted ShareAndCreate

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js异步处理相关的知识,希望对你有一定的参考价值。

一、什么是异步?

我们一般喜欢把异步和同步、并行拿出来比较,我以前的理解总是很模糊,总是生硬地记着“同步就是排队执行,异步就是一起执行”,现在一看,当初简直就是傻,所以我们第一步先把这三个概念搞清楚,我不太喜欢看网上有些博客里很含糊地说“xxxx是同步,xxxx是异步”,还有举什么通俗的例子,其实对不懂的人来说还是懵逼。

首先我们要知道这一切的根源都是“Javascript是单线程”,也就是一次只能做一件事,那么为什么是单线程呢?因为js渲染在浏览器上,包含了许多与用户的交互,如果是多线程,那么试想一个场景:一个线程在某个DOM上添加内容,而另一个线程删除这个DOM,那么浏览器要如何反应呢?这就乱套了。

单线程下所有的任务都是需要排队的,而这些任务分为两种:同步任务和异步任务,同步任务就是在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务;异步任务指的是,不进入主线程、而进入任务队列(task queue)的任务,只有任务队列通知主线程,某个异步任务可以执行了,该任务才会进入主线程执行。所以说同步执行其实也是一种只有主线程的异步执行。这里有一个视频关于异步操作是如何被执行的,讲得非常好《what the hack is event loop》,我给大家画个图再来理解一下。

event-loop.png

这里补充说明下不同的异步操作添加到任务队列的时机不同,如 onclick, setTimeout, ajax 处理的方式都不同,这些异步操作是由浏览器内核的 webcore 来执行的,webcore 包含上面提到的3种 webAPI,分别是 DOM Binding、timer、network模块。
onclick 由浏览器内核的 DOM Binding 模块来处理,当事件触发的时候,回调函数会立即添加到任务队列中。
setTimeout 会由浏览器内核的 timer 模块来进行延时处理,当时间到达的时候,才会将回调函数添加到任务队列中。
ajax 则会由浏览器内核的 network 模块来处理,在网络请求完成返回之后,才将回调添加到任务队列中。
最后再来说下并行,并行是关于能够同时发生的事情,是一种多线程的运行机制,而不管同步异步都是单线程的。

二、为什么要用异步操作

这个很好理解,同步下前一个事件执行完了才能执行后一个事件,那么要是遇到Ajax请求这种耗时很长的,那页面在这段时间就没法操作了,卡在那儿,更有甚者,万一这个请求由于某种原因一直没有完成,那页面就block了,很不友好。

三、如何实现异步

我们可以通过回调函数Promise生成器Async/Await等来实现异步。
今天我们先说最基础的回调函数处理方法来实现,列举几个大家熟悉的使用场景,比如:ajax请求、IO操作、定时器。

ajax(url, function(){
   //这就是回调函数
});
setTimeOut(function(){
   //回调函数
}, 1000)

回调本身是比较好用的,但是随着javascript越来越成熟,对于异步编程领域的发展,回调已经不够用了,体现在以下几点:

1、大脑处理程序是顺序的,对于复杂的回调函数会不易理解,我们需要一种更同步、更顺序的方式来表达异步。
举例说明:

//回调函数实现两数相加
function add(getX,  getY, cb){
  var x, y;
  getX(function(xVal){
    x=xVal;
    if(y!=undefined){
      cb(x+y);
    }
  });
  getY(function(){
    y=yVal;
    if(x!=undefined){
      cb(x+y);
    }
  });
}
add(fetchX, fetchY, function(sum){
  console.log(sum);
})

//Promise实现两数相加
function add(xPromise, yPromise){
  return Promise.all([xPromise, yPromise])
  .then(function(values){
    return value[0] + value[1];
  });
}
//fetchX()、fetchY()返回相应值的Promise
add(fetchX(), fetchY())
  .then(function(sum){
    console.log(sum);
  })

只看结构是不是Promise的写法更顺序话一些。
2、回调一般会把控制权交给第三方,从而带来信任问题,比如:

  • 调用回调过早
  • 调用回调过晚(或未调用)
  • 调用回调次数过多或过少
  • 未能传递所需的环境和参数
  • 吞掉可能出现的错误和异常

而Promise的特性就有效地解决了这些问题,它是如何解决的呢?

调用回调过早

这种顾虑主要是代码是否会引入类Zalgo效应,也就是一个任务有时会同步完地成,而有时会异步地完成,这将导致竟合状态。
Promise被定义为不能受这种顾虑的影响,因为即便是立即完成的Promise(比如 new Promise(function(resolve){ resolve(42); }))也不可能被同步地 监听。也就是说,但你在Promise上调用then(..)的时候,即便这个Promise已经被解析了,你给then(..)提供的回调也将总是被异步地调用。

调用回调过晚

当一个Promise被调用时,这个Promise 上的then注册的回调函数都会在下一个异步时机点上,按顺序地,被立即调用。这些回调中的任意一个都无法影响或延误对其它回调的调用。
举例说明:

p.then( function(){
    p.then( function(){
        console.log( "C" );
    } );
    console.log( "A" );
} );
p.then( function(){
    console.log( "B" );
} );
// A B C

为什么“C”没有排到“B”的前面?因为因为“C”所处的.then回调函数是在下一个事件循环tick。

回调未调用

这是一个很常见的顾虑。Promise用几种方式解决它。
首先,当Promise被解析后,在代码不出错的情况下它一定会告知你解析结果。如果代码有错误,归类于后面的“吞掉错误或异常”中。
那如果Promise本身不管怎样永远没有被解析呢?那么Promise会用Promise.race来解决。
看代码示例:

// 一个使Promise超时的工具
function timeoutPromise(delay) {
    return new Promise( function(resolve,reject){
        setTimeout( function(){
            reject( "Timeout!" );
        }, delay );
    } );
}

// 为`foo()`设置一个超时
Promise.race( [
    foo(),                    // 尝试调用`foo()`
    timeoutPromise( 3000 )    // 给它3秒钟
] )
.then(
    function(){
        // `foo(..)`及时地完成了!
    },
    function(err){
        // `foo()`不是被拒绝了,就是它没有及时完成
        // 那么可以考察`err`来知道是哪种情况
    }
);
调用次数过少或过多

正常是调用一次,“过少”就是未被调用,参考上文;“过多”的情况也很容易理解。Promise的定义方式使得它只能被决议一次,如果出于某种情况决议了多次,Promise也只会接受第一次决议,并忽略后续调用。

未能传递所需的参数/环境值

Promise只会有一个解析结果(完成或拒绝)。如果没有用一个值明确地解析它,它的值就是undefined,就像JS中常见的那样。

吞掉错误或异常

Promise中异常会被捕获,并且使这个Promise被拒绝。
举个例子:

var p = new Promise( function(resolve,reject){
    foo.bar();    // `foo`没有定义,所以这是一个错误!
    resolve( 42 );    // 永远不会跑到这里 :(
} );

p.then(
    function fulfilled(){
        // 永远不会跑到这里 :(
    },
    function rejected(err){
        // `err`将是一个来自`foo.bar()`那一行的`TypeError`异常对象
    }
);

Promise就先说到这里,关于PromiseAPI及其源码还有生成器、Async/Await 在后续文章中整理报道。
【写得不好的地方请大胆吐槽,非常感谢大家带我进步。】

参考资料:
阮一峰event-loop
王福朋深入理解javascript异步系列一
你不知道的javascript
你不懂JS: 异步与性能 第三章: Promise(上)


原作者:程序媛Wendy
链接:https://www.jianshu.com/p/f4abe8c4fc2f

以上是关于js异步处理的主要内容,如果未能解决你的问题,请参考以下文章

javascript中异步操作的异常怎么处理

ajaxFileUpload上传带参数文件及JS验证文件大小

使用 node.js 处理 Javascript 异步异常

如何在CEF JS与browser进程间异步通信

如何在 Node.js expressjs 的异步对象方法中处理未处理的承诺拒绝?

html怎么实现ajax异步处理?