异步编程的前世今生(异步流程历史)

心已赠人 2022-03-16 14:08 299阅读 0赞

众所周知javascript是单线程的，它的设计之初是为浏览器设计的GUI编程语言，GUI编程的特性之一是保证UI线程一定不能阻塞，否则体验不佳，甚至界面卡死。

所谓"单线程"，就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务，以此类推。

# 什么叫异步？ #

*  所谓异步简单说就是一个任务分成两段，先执行一段，转而执行其他任务，等做好了准备转而执行第二段。

以下是当有ABC三个任务，同步或异步执行的流程图：

同步

> thread ->|----A-----||-----B-----------||-------C------|
    复制代码

异步

A-Start ---------------------------------------- A-End   
               | B-Start ----------------------------------------|--- B-End   
               |   |     C-Start -------------------- C-End      |     |   
               V   V       V                           V         V     V      
      thread-> |-A-|---B---|-C-|-A-|-C-|--A--|-B-|--C--|---A-----|--B--|
    复制代码

##### 异步编程时就需要指定异步任务完成后需要执行的指令，异步的发展历程如下： #####

> 1.  回调函数
> 2.  Promise
> 3.  Generator
> 4.  co
> 5.  async,await

下面会一步一步展现各种方式。

# 回调函数 #

function f1(callback){
    
    setTimeout(function () {
    
    // f1的任务代码
        callback();
    
    }, 1000);
    
    }
    复制代码

缺点 :

1.  不利于代码的阅读和维护，各个部分之间高度耦合，流程会很混乱
2.  每个任务只能指定一个回调函数。
3.  不能捕获异常 （`try catch` 同步执行，回调函数会加入队列，无法捕获错误）

# Promise #

Promise 不仅可以避免回调地狱，还可以统一捕获失败的原因，目前也应用广泛

let promise = new Promise(function (resolve,reject) {
        resolve('wo')
    });
    promise.then(function (data) {
        return data +'shuai'
    }).then(function (data) {
        console.log(data)
    }).catch(function (err) {
        console.log(err)
    });// woshuai
    复制代码

# Generator(ECMAScript6) #

1.  生成器是一个函数，需要加\* ，可以用来生成迭代器
2.  生成器函数和普通函数不一样，普通函数是一旦调用一定会执行完，但是生成器函数中间可以暂停。
3.  生成器和普通函数不一样，调用它并不会立即执行
4.  它会返回此生成器的迭代器,迭代器是一个对象，每调用一次next就可以返回一个值对象

function *go(a){
      console.log(1);
      //此处的b用来供外界输入进来的
      //这一行实现输入和输出，本次的输出放在yield后面，下次的输入放在yield前面
      let b =  yield a;
      console.log(2);
      let c = yield b;
      console.log(3);
      return c;
    }
    let it = go("a值");
    //next第一次执行不需要参数，传参数没有意义
    let r1 = it.next();
    //第一次调用next会返回一个对象，此对象有两个属性，一个是value就是yield后面那个值，一个是done表示是否迭代完成
    console.log(r1);//{ value: 'a', done: false }
    let r2 = it.next('B值');
    console.log(r2);//{ value: 'B值', done: false }
    let r3 = it.next('C值');
    console.log(r3);//{ value: 'C值', done: true }
    复制代码

# co #

随着前端的迅速发展，大神们觉得要像同步代码一样写异步，co问世了，co是 TJ 大神结合了promise 和 生成器 的一个库，实际上还是帮助我们自动执行迭代器

# async/await #

async await是语法糖，内部是generator+promise实现 async函数就是将Generator函数的星号（\*）替换成async，将yield替换成await

let Promise = require('bluebird');
    let readFile = Promise.promisify(require('fs').readFile);
    async function read() {
      //await后面必须跟一个promise,
      let a = await readFile('./1.txt','utf8');
      console.log(a);
      let b = await readFile('./2.txt','utf8');
      console.log(b);
      let c = await readFile('./3.txt','utf8');
      console.log(c);
      return 'ok';
    }
    复制代码

> `setTimeout`,`process.nextTick`,`ajax`,`setImmediate`都可以处理异步逻辑，下一篇文章[EventLoop][]会进行详细的介绍。

[下一篇 javascript 运行机制 EventLoop][EventLoop]

[EventLoop]: https://link.juejin.im?target=https%3A%2F%2Fwww.jianshu.com%2Fp%2F10714ad38f9a