妈妈再也不用担心我不会JS 异步编程方案

JS异步编程方案，可以说在咱们日常前端开发工作中很常见的，首先我们得深入理解其原理，才能更好的去使用
我们都知道 JS是单线程的，所谓的单线程，就是一次只能执行一个任务，后面的任务只能排队等待，这样的弊端很明显，会阻塞后面的代码执行，造成页面卡在这个地方，其他任务无法执行。
为了解决这个问题，js语言将任务又分为两种执行模式： 同步和异步。

什么是同步？

所谓的同步就是在执行某段代码时，在该代码没有得到返回结果之前，其他代码暂时是无法执行的，但是一旦执行完成拿到返回值之后，就可以执行其他代码了

什么是异步？

所谓异步就是当某一代码执行异步过程调用发出后，这段代码不会立刻得到返回结果。而是在异步调用发出之后，一般通过回调函数处理这个调用之后拿到结果。异步调用发出后，不会影响阻塞后面的代码执行，这样的情形称为异步。

JS实现异步编程的方式有哪些？

好了，接下来我们说下有哪些方式可以实现异步编程。

回调函数

使用回调函数是一个最最最常见的一种编码方式，但是它也有一个弊端，就是容易产生回调地狱。

baseRequst.request('paramsA',function(res){
    baseRequst.request('paramsB',function(res){
         baseRequst.request('paramsC',function(res){
                  //```````
        })
   })
})

上面的代码逻辑就是接口请求先调用A，获取到A接口返回的数据 然后再去请求B接口，等待B接口返回数据再去请求C.上面的代码很容易就行程了回调地狱，容易行程回调地狱的场景也有很多，比如：

1 ajax请求的回调
2. 定时器的回调
3. 事件回调
4.node.js中的一些方法回调

异步回调如果嵌套的层级较多，就会大大的降低代码的可读性和维护性

promise

为了解决地狱回调问题，之后社区就推出了Promise的解决方案

function request(url,params) {
   return new Promise((resolve, reject) => {
            baseRequst.request(url,params,function(res){
                resolve(data);
      })
   });
}

request(urlA,paramsA).then(data => {
   return request(urlB,paramsB);
}).then(data => {
   return  request(urlC,paramsC);
}).then(data => {
   return  request(urlD,paramsD);
}).catch(reason => {
   console.log(reason);
});

从上面代码上看，针对回调地狱有个很好的改进，代码的可读性上也有一定的提升，但是依旧不够优秀，所以又推出了promise.all方案

  function request(url,params) {
    return new Promise((resolve, reject) => {
             baseRequst.request(url,params,function(res){
                 resolve(data);
       })
    });
}

// 通过 Promise.all 可以实现多个异步并行执行，同一时刻获取最终结果的问题
Promise.all([request(urlC,paramsB), request(urlB,paramsB), request(urlC,paramsC)]).then(data => {
    console.log(data);
}).catch(err => 
    console.log(err)
);

这样改造之后是不是比上面直接使用 Promise 来实现，看起来更清晰一目了然了