美文网首页
JavaScript异步流程控制的前世今生

JavaScript异步流程控制的前世今生

作者: 圆儿圈圈 | 来源:发表于2018-01-19 16:15 被阅读0次

js的流程控制老大难问题就是异步回调。
一个流程过程,往往会出现回调地狱,这个回调异步控制就被提上研究得议程。

目前有实现的回调流程有以下几种

  • 回调函数实现
  • 事件监听
  • 发布订阅
  • Promise/A+ 和生成器函数
  • async/await

回调函数实现

fs.readFile((err,data)=>{
    if(err){
        console.err(err)
    }else{
        console.log(data);
    }
})

事件发布订阅

使用node 模块EventEmitter 注册事件在完成后emit发射事件

let Promise = require('promise')

let p1 = new Promise((resolve,reject)=>{
    setTimeout(function () {
        resolve('p1完成')
    },100)
})

let p2 = new Promise((resolve,reject)=>{
    setTimeout(function () {
        reject('p2失败')
    },200)
})

p1.then(function (data) {
    eve.emit('ready','p1成功',data)
},function (data) {
    eve.emit('ready','p1失败',data)
})
p2.then(function (data) {
    eve.emit('ready','p2成功',data)
},function (data) {
    eve.emit('ready','p2失败',data)
})

//事件订阅
let EventEmitter = require('events');
let eve = new EventEmitter();
let html = {}
eve.on('ready',function (key,value) {
    html[key] = value
    if(Object.keys(html).length == 2){
        console.log(html)
    }
})

哨兵变量

let Promise = require('promise')
//哨兵变量
function render(length,cb) {
    let html = {}
    return function (key,value) {
        html[key] = value
        if(Object.keys(html).length == length){
            cb(html)
        }
    }
}
let p1 = new Promise((resolve,reject)=>{
    setTimeout(function () {
        resolve('p1完成')
    },100)
})
let p2 = new Promise((resolve,reject)=>{
    setTimeout(function () {
        reject('p2失败')
    },200)
})
let done = render(2,function (data) {
    console.log(data)
})
p1.then(function (data) {
    done('p1成功',data)
},function (data) {
    done('p1失败',data)
})

p2.then(function (data) {
    done('p2成功',data)
},function (data) {
    done('p2失败',data)
})

yield

let fs = require('fs')

function *gen() {
    console.log(1)
    let b = yield p1()
    console.log(2)
    return b
}
function p1(){
    fs.read
}
let it = gen()
let r1 = it.next()
console.log(r1);
let r2 = it.next()
console.log(r2);
let r3 = it.next()
console.log(r3);

co

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

Async/ await

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异步编程的前世今生

    Javascript语言的执行环境是"单线程"(single thread) 所谓"单线程",就是指一次只能完成一...

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

    众所周知javascript是单线程的,它的设计之初是为浏览器设计的GUI编程语言,GUI编程的特性之一是保证UI...

  • 『中级篇』容器的技术概述(二)

    容器的前世今生 物理机 部署非常慢购买服务器服务,放在IDC机房,各种走流程,很多流程不可控制流程慢。 成本非常高...

  • JavaScript的前世今生

    Tim Berners-Lee 于 1989 年发明了万维网并于 1991 年对外发布了世界上第一个网页浏览器 W...

  • async 异步编程框架

    Async介绍Async是一个流程控制工具包,提供了直接而强大的异步功能。基于Javascript为Node.js...

  • async介绍

    Async介绍 Async是一个流程控制工具包,提供了直接而强大的异步功能。基于Javascript为Node.j...

  • 异步编程的前世今生

    异步编程的前世今生 1、为什么需要异步编程 异步编程是相对同步编程来说的,开发项目时,开发者总是希望,程序的执行顺...

  • JavaScript——入门篇

    JS 前世今生 JavaScript 和它父亲的故事 维基百科 基本语法 变量 相关概念 JavaScript 是...

  • node 异步模式

    异步流程控制的包:Async Step

网友评论

      本文标题:JavaScript异步流程控制的前世今生

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