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 相关文章推荐
取得父标签
Nov 14 Javascript
使用JS操作页面表格,元素的一些技巧
Feb 02 Javascript
得到文本框选中的文字,动态插入文字的js代码
Mar 07 Javascript
js 未结束的字符串常量错误解决方法
Jun 13 Javascript
基于OL2实现百度地图ABCD marker的效果
Oct 01 Javascript
如何检测JavaScript的各种类型
Jul 30 Javascript
HTML页面,测试JS对C函数的调用简单实例
Aug 09 Javascript
easyui messager alert 三秒后自动关闭提示的实例
Nov 07 Javascript
js仿拉勾网首页穿墙广告效果
Mar 08 Javascript
vue将毫秒数转化为正常日期格式的实例
Sep 16 Javascript
对vue v-if v-else-if v-else 的简单使用详解
Sep 29 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
Apr 09 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 session 错误
2009/05/21 PHP
php 操作excel文件的方法小结
2009/12/31 PHP
php删除与复制文件夹及其文件夹下所有文件的实现代码
2013/01/23 PHP
PHP5中实现多态的两种方法实例分享
2014/04/21 PHP
PHP 5.3和PHP 5.4出现FastCGI Error解决方法
2015/02/12 PHP
两种php给图片加水印的实现代码
2020/04/18 PHP
在laravel框架中实现封装公共方法全局调用
2019/10/14 PHP
Javascript Math对象
2009/08/13 Javascript
为指定元素增加样式的js代码
2009/12/09 Javascript
JavaScript中把数字转换为字符串的程序代码
2013/06/19 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
2014/07/08 Javascript
jQuery给动态添加的元素绑定事件的方法
2015/03/09 Javascript
jQuery+AJAX实现无刷新下拉加载更多
2015/07/03 Javascript
JavaScript操作select元素和option的实例代码
2016/01/29 Javascript
老生常谈 js中this的指向
2016/06/30 Javascript
很棒的js Tab选项卡切换效果
2016/08/30 Javascript
详解原生js实现offset方法
2017/06/15 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
2017/12/12 Javascript
Vue组件Draggable实现拖拽功能
2018/12/01 Javascript
layui表单提交到后台自动封装到实体类的方法
2019/09/12 Javascript
基于ant design日期控件使用_仅月份的操作
2020/10/27 Javascript
Vue 的 v-model用法实例
2020/11/23 Vue.js
获取Django项目的全部url方法详解
2017/10/26 Python
python3 实现对图片进行局部切割的方法
2018/12/05 Python
关于Python字符串显示u...的解决方式
2020/03/06 Python
详解PyQt5信号与槽的几种高级玩法
2020/03/24 Python
详解用Python爬虫获取百度企业信用中企业基本信息
2020/07/02 Python
解决Python中导入自己写的类,被划红线,但不影响执行的问题
2020/07/13 Python
HTML5实现移动端复制功能
2018/04/19 HTML / CSS
斯巴达比赛商店:Spartan Race
2019/01/08 全球购物
作为网站管理者应当如何防范XSS
2014/08/16 面试题
电大学习个人自我评价范文
2013/10/04 职场文书
令人印象深刻的自荐信
2014/05/25 职场文书
公司奖励通知
2015/04/21 职场文书
给校长的建议书作文300字
2015/09/14 职场文书
大学生,三分钟即兴演讲稿
2019/07/22 职场文书