javascript异步编程的六种方式总结


Posted in Javascript onMay 17, 2019

异步编程

众所周知 JavaScript 是单线程工作,也就是只有一个脚本执行完成后才能执行下一个脚本,两个脚本不能同时执行,如果某个脚本耗时很长,后面的脚本都必须排队等着,会拖延整个程序的执行。那么如何让程序像人类一样可以多线程工作呢?以下为几种异步编程方式的总结,希望与君共勉。

  1. 回调函数
  2. 事件监听
  3. 发布订阅模式
  4. Promise
  5. Generator (ES6)
  6. async (ES7)

异步编程传统的解决方案:回调函数和事件监听

初始示例:假设有两个函数, f1 和 f2,f1 是一个需要一定时间的函数。

function f1() {
  setTimeout(function(){
    console.log('先执行 f1')
  },1000)
}
function f2() {
  console.log('再执行 f2')
}

回调函数

因为 f1 是一个需要一定时间的函数,所以可以将 f2 写成 f1 的回调函数,将同步操作变成异步操作,f1 不会阻塞程序的运行,f2 也无需空空等待,例如 JQuery 的 ajax。

回调函数的demo:

function f1(f2){
  setTimeout(function(){
    console.log('先执行 f1')
  },1000)
  f2()
}
function f2() {
  console.log('再执行 f2')
}

效果如下:

 javascript异步编程的六种方式总结

总结:回调函数易于实现、便于理解,但是多次回调会导致代码高度耦合

事件监听

脚本的执行不取决代码的顺序,而取决于某一个事件是否发生。

事件监听的demo

$(document).ready(function(){
   console.log('DOM 已经 ready')
});

发布订阅模式

发布/订阅模式是利用一个消息中心,发布者发布一个消息给消息中心,订阅者从消息中心订阅该消息,。类似于 vue 的父子组件之间的传值。

发布订阅模式的 demo

//订阅done事件
$('#app').on('done',function(data){
  console.log(data)
})
//发布事件
$('#app').trigger('done,'haha')

Promise

Promise 实际就是一个对象, 从它可以获得异步操作的消息,Promise 对象有三种状态,pending(进行中)、fulfilled(已成功)和rejected(已失败)。Promise 的状态一旦改变之后,就不会在发生任何变化,将回调函数变成了链式调用。

Promise 封装异步请求demo

export default function getMethods (url){
  return new Promise(function(resolve, reject){
    axios.get(url).then(res => {
      resolve(res)
    }).catch(err =>{
      reject(err)
    })
  })
}

getMethods('/api/xxx').then(res => {
  console.log(res)
}, err => {
  console.log(err)
})

Generator

Generator 函数是一个状态机,封装了多个内部状态。执行 Generator 函数会返回一个遍历器对象,使用该对象的 next() 方法,可以遍历 Generator 函数内部的每一个状态,直到 return 语句。

形式上,Generator 函数是一个普通函数,但是有两个特征。一是,function关键字与函数名之间有一个星号;二是,函数体内部使用yield表达式, yield是暂停执行的标记。

next() 方法遇到yield表达式,就暂停执行后面的操作,并将紧跟在yield后面的那个表达式的值,作为返回的对象的value属性值。

Generator 的 demo

function *generatorDemo() {
 yield 'hello';
 yield 1 + 2;
 return 'ok';
}

var demo = generatorDemo()

demo.next()  // { value: 'hello', done: false } 
demo.next()  // { value: 3, done: false } 
demo.next()  // { value: 'ok', done: ture } 
demo.next()  // { value: undefined, done: ture }

async

async函数返回的是一个 Promise 对象,可以使用 then 方法添加回调函数,async 函数内部 return 语句返回的值,会成为 then 方法回调函数的参数。当函数执行的时候,一旦遇到await就会先返回,等到异步操作完成,再接着执行函数体内后面的语句。

1.await命令后面返回的是 Promise 对象,运行结果可能是rejected,所以最好把await命令放在try...catch代码块中。

async 的 demo1

async function demo() {
 try {
  await new Promise(function (resolve, reject) {
   // something
  });
 } catch (err) {
  console.log(err);
 }
}

demo().then(data => {
  console.log(data) // 
})

参考文献

https://developers.google.com/web/fundamentals/primers/promises
http://es6.ruanyifeng.com

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery.Jwin.js 基于jquery的弹出层插件代码
May 23 Javascript
js事件(Event)知识整理
Oct 11 Javascript
深入了解javascript中的prototype与继承
Apr 14 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
Aug 29 Javascript
jquery中attr和prop的区别分析
Mar 16 Javascript
jquery使用each方法遍历json格式数据实例
May 18 Javascript
jQuery实现多级联动下拉列表查询框
Jan 18 Javascript
浅谈JavaScript的自动垃圾收集机制
Dec 15 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
Jul 11 Javascript
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
ajax请求data遇到的问题分析
Jan 18 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
May 05 Javascript
150行代码带你实现微信小程序中的数据侦听
May 17 #Javascript
angular4应用中输入的最小值和最大值的方法
May 17 #Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 #jQuery
详解 微信小程序开发框架(MINA)
May 17 #Javascript
Vue模板语法中数据绑定的实例代码
May 17 #Javascript
jQuery控制input只能输入数字和两位小数的方法
May 16 #jQuery
微信小程序云开发详细教程
May 16 #Javascript
You might like
PHP实现域名whois查询的代码(数据源万网、新网)
2010/02/22 PHP
解析PHP中$_FILES的使用以及注意事项
2013/07/05 PHP
PHP取余函数介绍MOD(x,y)与x%y
2014/05/15 PHP
PHP结合JQueryJcrop实现图片裁切实例详解
2014/07/24 PHP
yii操作session实例简介
2014/07/31 PHP
PHP关键特性之命名空间实例详解
2017/05/06 PHP
PHP基于curl模拟post提交json数据示例
2018/06/22 PHP
PHP通过文件保存和更新信息的方法分析
2019/09/12 PHP
javascript检查日期格式的函数[比较全]
2008/10/17 Javascript
jQuery 添加/移除CSS类实现代码
2010/02/11 Javascript
jQuery lazyload 的重复加载错误以及修复方法
2010/11/19 Javascript
js写一个弹出层并锁屏效果实现代码
2012/12/07 Javascript
浅谈Jquery核心函数
2015/06/18 Javascript
jquery实现的代替传统checkbox样式插件
2015/06/19 Javascript
使用vue.js编写蓝色拼图小游戏
2017/03/17 Javascript
详解vue项目构建与实战
2017/06/27 Javascript
vue的事件绑定与方法详解
2017/08/16 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
2018/11/14 Javascript
nodejs log4js 使用详解
2019/05/31 NodeJs
Vue用mixin合并重复代码的实现
2020/11/27 Vue.js
[01:34]2014DOTA2 TI预选赛预选赛 选手比赛房大揭秘!
2014/05/20 DOTA
Python3下错误AttributeError: ‘dict’ object has no attribute’iteritems‘的分析与解决
2017/07/06 Python
Python中list的交、并、差集获取方法示例
2019/08/01 Python
Python实现搜索算法的实例代码
2020/01/02 Python
Jupyter Notebook安装及使用方法解析
2020/11/12 Python
销售心得体会
2014/01/02 职场文书
2014年销售部工作总结
2014/12/01 职场文书
劳模先进事迹材料
2014/12/24 职场文书
报名委托书
2015/01/29 职场文书
2015廉洁自律个人总结
2015/02/14 职场文书
在职人员跳槽求职信
2015/03/20 职场文书
2015年七夕爱情寄语
2015/03/24 职场文书
秋菊打官司观后感
2015/06/03 职场文书
正规欠条模板
2015/07/03 职场文书
新郎父母婚礼答谢词
2015/09/29 职场文书
详解python的异常捕获
2022/03/03 Python