美文网首页
javascript异步发展史

javascript异步发展史

作者: 柳贤_e8c5 | 来源:发表于2018-01-20 23:00 被阅读0次

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));

相关文章

  • javascript异步发展史

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

  • JavaScript异步发展史

    一道面试题引发的血战。问:怎么理解异步的发展过程,例如axios、ajax、promise、await、async...

  • JavaScript异步编程好文摘要

    JavaScript之异步编程简述JavaScript异步编程

  • AJAX

    AJAX:Asynchronous javascript And XML 异步的javascript和xml 异步...

  • ES6 之 Promise

    Promise是JavaScript异步编程中的重要概念,异步抽象处理对象,是目前比较流行Javascript异步...

  • ajax:load()加载静态资源

    AJAX = 异步 JavaScript 和 XML (Asynchronous JavaScript ...

  • Ajax

    Asynchronous JavaScript and XML (异步的 JavaScript and XML )...

  • 动态Web编程

    一、AJAX异步提交 异步提交AJAX = Asynchronous JavaScript and XML(异步的...

  • part1整理

    函数式编程:JavaScript函数式编程指南 异步编程:异步编程 Promise源码 JavaScript基础知...

  • jquery与ajax

    AJAX? AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript ...

网友评论

      本文标题:javascript异步发展史

      本文链接:https://www.haomeiwen.com/subject/gljxaxtx.html