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 相关文章推荐
JavaScript 更严格的相等 [译]
Sep 20 Javascript
用Jquery重写windows.alert方法实现思路
Apr 03 Javascript
ie 7/8不支持trim的属性的解决方案
May 23 Javascript
jQuery中prop()方法用法实例
Jan 05 Javascript
自己动手写的jquery分页控件(非常简单实用)
Oct 28 Javascript
详解WordPress开发中get_current_screen()函数的使用
Jan 11 Javascript
浅谈window.onbeforeunload() 事件调用ajax
Jun 29 Javascript
用JS写的一个Ajax库(实例代码)
Aug 06 Javascript
深入理解React中es6创建组件this的方法
Aug 29 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成"...")
Nov 28 Javascript
Angularjs实现数组随机排序的方法
Oct 02 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
Aug 27 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中array_map与array_column之间的关系分析
2014/08/19 PHP
php版微信开发之接收消息,自动判断及回复相应消息的方法
2016/09/23 PHP
Thinkphp整合微信支付功能
2016/12/14 PHP
js之WEB开发调试利器:Firebug 下载
2007/01/13 Javascript
js操作select控件的几种方法
2010/06/02 Javascript
深入理解javascript动态插入技术
2013/11/12 Javascript
jQuery使用andSelf()来包含之前的选择集
2014/05/19 Javascript
JSON字符串和对象之间的转换详解
2015/05/26 Javascript
easyui Droppable组件实现放置特效
2015/08/19 Javascript
jquery限定文本框只能输入数字(整数和小数)
2016/01/08 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
2016/03/17 Javascript
js实现添加删除表格(两种方法)
2017/04/27 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
2017/06/08 Javascript
详解使用React全家桶搭建一个后台管理系统
2017/11/04 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
2018/02/01 Javascript
详解node.js 下载图片的 2 种方式
2018/03/02 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
2018/06/20 Javascript
layui框架table 数据表格的方法级渲染详解
2018/08/19 Javascript
JS+php后台实现文件上传功能详解
2019/03/02 Javascript
JavaScript实现随机点名器实例详解
2019/05/07 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
2020/08/07 Javascript
Openlayers+EasyUI Tree动态实现图层控制
2020/09/28 Javascript
JS实现手风琴特效
2020/11/08 Javascript
Python通过递归遍历出集合中所有元素的方法
2015/02/25 Python
python实现ID3决策树算法
2018/08/29 Python
Python从函数参数类型引出元组实例分析
2019/05/28 Python
Python流程控制 if else实现解析
2019/09/02 Python
python mysql 字段与关键字冲突的解决方式
2020/03/02 Python
Python使用configparser读取ini配置文件
2020/05/25 Python
HTML5全屏(Fullscreen)API详细介绍
2015/04/24 HTML / CSS
Nisbets爱尔兰:英国最大的厨房和餐饮设备供应商
2019/01/26 全球购物
法学专业个人求职信
2013/09/26 职场文书
项目合作意向书模板
2014/07/29 职场文书
预备党员2014年第四季度思想汇报范文
2014/10/25 职场文书
课文《燕子》教学反思
2016/02/17 职场文书
同学会演讲稿
2019/04/02 职场文书