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

发布时间:2019-08-13 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了JavaScript异步流程控制的前世今生脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

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

JavaScript

javascript在设计之初.为了避免资源管理复杂问题(多个线程同时操作dom,以哪个为准),因此被设计成为了单线程语言.

说起异步就不得不提回调, 为了解决多重回调嵌套导致代码难以维护问题.javascript一直都在完善这个解决方案.

在10多年中javascript 异步流程控制经过了

callback -> event -> promise -> yield & co -> async await

Callback

ES6之前异步编程最常用的方法,如果回调函数嵌套层数较深,代码将变得难以维护.并且在回调函数之外无法捕获回调函数中的异常.

VAR fs = require('fs')

try {
  fs.reaDFile('file', 'utf8', function(err, data){
    // if (err) {
    //   console.LOG(err)
    // } else {
      console.log(data)
    // }
  })
} catch(e) {
  console.log(e)
}  

尝试读取一个不存在的文件时.外层的try/catch 无法捕获这一异常.将输出 undefine.
callback异步操作,异步调用的本体和callback属于不同的事件循环.而try/catch 只能捕获当前事件的异常.因此将无法捕获

Event (发布/订阅模式)

采用事件驱动模式.任务的执行不取决于代码的顺序,由某个事件来决定

var EventEmITter = require('events') 
var fs = require('fs')

var eve = new EventEmitter()

// 监听read事件
eve.on('read', function(value){
  console.log(value)
})
// 执行一个异步读取
fs.readFile('./template.txt', 'utf8', function (err, data) {
  if (err) {
    console.log(err)
  } else {
    // 拿到数据后 发送一个read事件.并传递数据 
    eve.emit('read', data)
  }
})

Promise

在ES6中提供了PRomise对象.给外界提供了统一API.可用同步操作的流程来表达异步操作.避免了callback 中的嵌套层数过深,不便维护的弊端.

var fs = require('fs')

function read (path) {
  return new Promise(function(resolve, reject){
    fs.readFile(path, 'utf8', function(err, data){
      if (err) {
        reject(err)
      } else {
        console.log(data)
        resolve()
      }
    })
  })
}

read('./1.txt').then(function(){
  return read('./2.txt')
}).then(function(){
  return read('./3.txt')
}).then(function(){
  console.log('执行结束')
})

yield && co

通过Generator函数封装异步任务.在需要暂停的地方使用yield

var fs = require('fs')

function *getData () {
 var a = yield readFile('./1.txt')
 console.log(a)
 var b =  yield readFile('./2.txt')
 console.log(b)
 var c =  yield readFile('./3.txt')
 console.log(c)
}

function readFile(path) {
  return new Promise(function(resolve, reject){
    fs.readFile(path, 'utf8', function (err, data) {
      if (err) {
        reject(err)
      } else {
        resolve(data)
      }
    })
  })
}

function co(gen) {
  var fn = gen()
  var lastVal
  return new Promise(function(resolve, reject){
    !function next(lastVal) {
      var {value, done}  = fn.next(lastVal)
      if (done) {
        resolve()
      } else {
        value.then(next, reject)
      }
    }()
  })
}

co(getData)

async/await

Async/Await应该是目前最简单的异步方案了

  • async 表示这是一个async函数,await只能用在这个函数里面
  • await 表示在这里等待promise返回结果了,再继续执行。
  • await 后面跟着的应该是一个promise对象(其他返回值也可以,只是会立即执行)
  • 捕获错误
  • @H_112_360@
    var fs = require('fs')
    
    async function getData () {
      try {
        var a = await readFile('file')
      } catch(e) {
        console.log(e)
      }  
      var b =  await readFile('./2.txt')
      console.log(b)
      var c =  await readFile('./3.txt')
      console.log(c)
    }
    
    function readFile(path) {
      return new Promise(function(resolve, reject){
        fs.readFile(path, 'utf8', function (err, data) {
          if (err) {
            reject(err)
          } else {
            resolve(data)
          }
        })
      })
    }
    
    getData()

    参考文章
    Generator 函数的含义与用法

    脚本宝典总结

    以上是脚本宝典为你收集整理的JavaScript异步流程控制的前世今生全部内容,希望文章能够帮你解决JavaScript异步流程控制的前世今生所遇到的问题。

    如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

    本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
    如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。