JavaScript的异步编程

我就是我 2023-06-10 15:24 31阅读 0赞

越来越发现JavaScript这个语言相当的不错，之前还一直以为就跟HTML，CSS一样差不多（实际上这两者的门道也不浅）。随着AJAX，ES6，甚至ES7新标准新特性，很多玩法加入进来，再加上node的推动下JavaScript的生态也越来越好，多学习一下人很有裨益。

1 最原始的异步编程  
其实就是搞一个嵌套一类的东西，非常的oldschool，用setTimeOut来举例子（工作中可以将其替换成ajax网络请求，获取到结果执行下一步的）  
比如弄一个简单的例子，一方面来证明是异步的，复制到浏览器的conclose里即可。

function a (){ 
    	console.log("我是a我不是异步代码")
    	setTimeout(
    		function(){ console.log("我是a的异步代码")}
    		,1000)
    }
    function b (){ 
    	console.log("我是b我不是异步代码")
    	setTimeout(
    		function(){ console.log("我是b的异步代码")}
    		,1000)
    }
    a()
    b()

看到a异步代码永远是在b的非异步代码后面执行，无论你怎么设置延时的定时器时间哪怕是设置为0，而且b的异步代码也不会跑在b的前面。同样作为异步代码他会在满足条件时才会触发，但是问题来了我要是好几层怎么办，A依赖于B的请求返回结果，B依赖于C的请求返回结果。。。。，很可能是下面的情况

setTimeout(
      () => { 
        console.log("ZP很帅 +"+ 1);
        setTimeout(
          () => { 
            console.log("ZP很帅 +" +2);
            setTimeout(
              () => { 
                console.log("ZP很帅 +"+ 3);
              },
              1000
            );
          },
          1000
        );
      },
      1000
    )

但是这个东西看起来就知道不够优雅，怎么样写得更简洁呢，可以试着分离一下。我在别的大佬的JS里经常会遇到各种XXXXCallBack，借鉴一下人家的分离思想。

其实已经很不错了，因为在JS里面函数也可以作为参数传参进来这个特性，刚开始这个我这个弯没转过来浪费了不少时间。

2 ES6新特性 promise  
其实做到分离，还是会出现嵌套的问题对于这种嵌套的代码还有个称呼，“厄运金字塔”（其实挺贴切的想要得到你的结果从塔顶到塔尖，这种代码改起来最蛋疼七扭八歪的。）

于是ES6提供了个原生支持叫做promise来解决，他的构造方法接受一个函数，并且这个函数接受resolve和reject这两个参数。前者未来成功时调用后者未来失败时调用（其实第一个厄运金字塔代码类型callBack也可以分为成功的successCallBack和失败的failCallBack于是代码更难改。）

var run = steps => 
      () => 
        new Promise((resolve, reject) => { 
          setTimeout(
            () => { 
              console.log(steps);
              resolve(); // 一秒后的未来执行成功，需要调用
            },
            1000
          );
        });
    
    Promise.resolve()
      .then(run(1))
      .then(run(2))
      .then(run(3));

当然前半段代码看不明白也没关系，箭头函数 =>这个让代码变简洁是个不错的东西，当然也提高了阅读的门槛，下面是我从MDN上找到

(参数1, 参数2, …, 参数N) => {  函数声明 }
    
    //相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }
    (参数1, 参数2, …, 参数N) => 表达式（单一）
    
    // 当只有一个参数时，圆括号是可选的：
    (单一参数) => { 函数声明}
    单一参数 => { 函数声明}
    
    // 没有参数的函数应该写成一对圆括号。
    () => { 函数声明}

我的改写可能让你大概了解一点，异步函数有好处也有坏处，但是它确实能让代码简短。

是不是就没有嵌套了，最起码第一眼看上去很像同步代码，直观的链式调用。

3 ES7的await和async语法糖  
async标记函数为异步函数，await表示他后面要返回为一个Promise对象，在这个promise的异步结果出来之后就再继续往下执行。

var run = async steps => { 
      await wait(1000);
      console.log(steps);
    }

4 用生成器实现协程  
协程是在线程里面，所以是共享的线程资源，甚至连线程间切换消耗资源都省了。协程 Coroutine，一种协作多任务式多任务的，任务挂起与恢复实现任务间切换。

知道go的人肯定对协程有听过（然而我目前也只是听过，看过资料了解过的程度。）JavaScript是怎么实现协程，并没有什么关键词。于是要通过生成器Generator来实现这个玩意，在JavaScript的“可迭代协议”和“迭代器协议”，function\*和yield关键字配合下就完成了。

function\*是生成生成器对象的，yield是用来在生成器的next()方法执行时中断位置返回右侧表达式的值。

function* IdGenerator() { 
      let index = 1;
      while (true)
        yield index++;
    }
    
    var idGenerator = IdGenerator();
    
    console.log(idGenerator.next());
    console.log(idGenerator.next());

5 异步异常  
其实异步代码异常是一个问题，现实中涉及到请求的尤其是这样很可能是两套逻辑再嵌套的那种。  
原始的两种callback,promise有resolve和reject两种，await，async也有对应的将结果解析出来，生成器没怎么细了解过，但是MDN上解释还挺清楚的。

熊四火老师的专栏关于这个异步写的比较好建议多看几遍。  
我的公众号：我是坑货