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

最新推荐文章于 2024-11-02 11:32:21 发布

weixin_34216036

最新推荐文章于 2024-11-02 11:32:21 发布

阅读量134

点赞数

文章标签： ui javascript 前端 ViewUI

原文链接：https://juejin.im/post/5a62d002f265da3e355b270b

版权

众所周知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--|
复制代码

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

回调函数
Promise
Generator
co
async,await

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

回调函数

function f1(callback){

setTimeout(function () {

// f1的任务代码
    callback();

}, 1000);

}
复制代码

缺点 :

不利于代码的阅读和维护，各个部分之间高度耦合，流程会很混乱
每个任务只能指定一个回调函数。
不能捕获异常（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)

生成器是一个函数，需要加* ，可以用来生成迭代器
生成器函数和普通函数不一样，普通函数是一旦调用一定会执行完，但是生成器函数中间可以暂停。
生成器和普通函数不一样，调用它并不会立即执行
它会返回此生成器的迭代器,迭代器是一个对象，每调用一次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 和生成器的一个库，实际上还是帮助我们自动执行迭代器

let fs = require('fs');

function readFile(filename) {
  return new Promise(function (resolve, reject) {
    fs.readFile(filename, 'utf8', function (err, data) {
      err ? reject(err) : resolve(data);
    });
  })
}
function *read() {
  console.log('开始');
  let a = yield readFile('1.txt');
  console.log(a);
  let b = yield readFile('2.txt');
  console.log(b);
  let c = yield readFile('3.txt');
  console.log(c);
  return c;
}
function co(gen) {
  let it = gen();//我们要让我们的生成器持续执行
  return new Promise(function (resolve, reject) {
    !function next(lastVal) {
        let {value,done} = it.next(lastVal);
        if(done){
          resolve(value);
        }else{
          value.then(next,reject);
        }
    }()
  });
}
co(read).then(function (data) {
  console.log(data);
});
复制代码

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';
}
复制代码