美文网首页
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异步发展史

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