js异步处理

Posted 2020-10-27 ShareAndCreate

一、什么是异步？

我们一般喜欢把异步和同步、并行拿出来比较，我以前的理解总是很模糊，总是生硬地记着“同步就是排队执行，异步就是一起执行”，现在一看，当初简直就是傻，所以我们第一步先把这三个概念搞清楚，我不太喜欢看网上有些博客里很含糊地说“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