javascript异步发展史

335 阅读2分钟

js中的异步是指一个函数在执行过程中,其中一部分不能马上执行完毕,然后执行函数体中另外一部分。等到第一部分得到返回值再执行第二部分。

1.回调函数callback
无法捕获错误 try catch
不能return
回调地狱

function personInfo(callback){
    $.ajax({
          type: "GET",
          url: "test.json",  
          data: {
                username:username,
                content:content
          },
         dataType: "json",
        success: function(data){
              if(data.length>0){
                    callback&&callback();
              }
        }
  });
}

2.事件发布/订阅模型
给一个事件,订阅几个方法,方法依次执行。

function Event() {
    this.event = {};
}
Event.prototype.on = function (type,callBack) {
    if(this.event[type]){
        this.event[type].push(callBack);
    }else{
        this.event[type] = [callBack];
    }
};
Event.prototype.emit = function (type,...data) {
    this.event[type].forEach((item)=>item(...data));
};
let event = new Event();
function fn1(){
   console.log('吃饭');
}
function fn2(){
    console.log('工作');
}
event.on('我的一天',fn1);
event.on('我的一天',fn2);
event.emit('我的一天');


3.Promise异步函数解决方案
A执行完执行B,B执行完执行C。把A的返回值给B再给C
每一次执行,返回一个新的Promise实例(链式调用)
代码易读

let p1 = new Promise(function(resolve,reject){
  reject(10000000);
});
p1.then(function(value){
  console.log('成功1=',value);
},function(reason){
  console.log('失败1=',reason);
});
p1.then(function(value){
  console.log('成功2=',value);
},function(reason){
  console.log('失败2=',reason);
});


4.Generator生成器函数
调用一个生成器函数它不会立刻执行
它返回一个迭代器函数,每调用一次next就可以返回一个值对象

function *go(a){
    console.log(1);
    let b =  yield a;
    console.log(2);
    let c = yield b;
    console.log(3);
    return c;
}
let it = go("a值");
let r1 = it.next();
let r2 = it.next('B值');


5.Co
co是一个为Node.js和浏览器打造的基于生成器的流程控制工具,借助于Promise,你可以使用更加优雅的方式编写非阻塞代码。

let fs = require('fs');
function readFile(filename) {
  return new Promise(function (resolve, reject) {
    fs.readFile(filename, function (err, data) {
      if (err)
        reject(err);
      else
        resolve(data);
    })
  })
}
function *read() {
  let template = yield readFile('./template.txt');
  let data = yield readFile('./data.txt');
  return template + '+' + data;
}
co(read).then(function (data) {
  console.log(data);
}, function (err) {
  console.log(err);
});
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, reason => reject(reason));
      }
    }();
  });
}


6.Async/ await
可以实现和co一样的功能
结构简单,可读性强

let fs = require('fs');
function readFile(filename) {
  return new Promise(function (resolve, reject) {
    fs.readFile(filename, 'utf8', function (err, data) {
      if (err)
        reject(err);
      else
        resolve(data);
    })
  })
}


async function read() {
  let template = await readFile('./template.txt');
  let data = await readFile('./data.txt');
  return template + '+' + data;
}
let result = read();
result.then(data=>console.log(data));