JS ES6异步解决方案


Posted in Javascript onApril 29, 2021

最初使用回调函数

​ 由于最初j s官方没有明确的规范,各种第三方库中封装的异步函数中传的回调函数中的参数没有明确的规范, 没有明确各个参数的意义, 不便于使用。

​ 但是node中有明确的规范

​ node中的的回调模式:

1. 所有回调函数必须有两个参数,第一个参数表示错误,第二个参数表示结果

2. 所有回调函数必须作为函数最后的参数

3. 所有回调函数不能作为属性出现

es6 异步处理模型

Es6 出现以后, 官方就提出了异步处理的规范, 提出了一种适用于所有异步场景的处理模型。该模型有:

  • 两个阶段: 未决unsettled, 已决settled。
  • 三个状态: pending挂起状态 , resolved成功, rejected失败
  • 总是从未决阶段推向已决阶段,且已决阶段的状态不再改变

任务已决状态后可能需要后续处理,

  • 针对resolved的后续处理我们称之为thenable
  • 针对rejected的后续处理我们称之为catchable

为该异步模型量身打造的API : promise

如何使用promise

Copy

const task = new Promise((resolve, reject) => {     
    // 任务未决阶段代码  
    // 立即执行  
    console.log("开始100米长跑");  
    setTimeout(() => {  
       if (Math.random() > 0.5) {  
           // 成功: 跑完了  
           // 推向成功  
           resolve("跑完了");  
       } else {  
           // 失败: 腿摔断了  
           // 推向失败  
           reject("腿摔断了");  
       }  
    }, 1000)
});
task.then((result) => {
  console.log(result);
}).catch((error) => {
  console.log(error);
})

1s 后任务推向已决, 后续处理在then 或者 catch中 处理。

注意

pending状态 =》rejected状态 :

Copy

1. 调用reject

2. 代码执行报错

3. 手动抛出错误

后续处理函数一定是异步的,且会放到微队列中,

j s执行栈清空后会先执行微队列中的任务,微队列里任务清空后才会执行宏队列中的任务。

  • 宏任务队列有:setTimeout,setInterval,setImmediately,I/O,UI render
  • 微任务队列有:promise,process.nexttick,Object.observe(已经不用了),Mutation.observe

Async await 是es7新增的promise的语法糖大家也可以了解下,本文只是对promise做了个概述,要掌握的其他细节还有很多

以上就是JS ES6异步解决方案的详细内容,更多关于ES6异步解决方案的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
js和jquery批量绑定事件传参数一(新猪猪原创)
Jun 23 Javascript
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
Jan 06 Javascript
node.js中格式化数字增加千位符的几种方法
Jul 03 Javascript
jQuery插件实现文件上传功能(支持拖拽)
Aug 27 Javascript
在JSP中如何实现MD5加密的方法
Nov 02 Javascript
浅谈React 属性和状态的一些总结
Nov 21 Javascript
js事件源window.event.srcElement兼容性写法(详解)
Nov 25 Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
Oct 31 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
Sep 21 Javascript
全面分析JavaScript 继承
May 30 Javascript
基于layPage插件实现两种分页方式浅析
Jul 27 Javascript
javascript执行上下文、变量对象实例分析
Apr 25 Javascript
聊聊JS ES6中的解构
Apr 29 #Javascript
详解TypeScript中的类型保护
Apr 29 #Javascript
7个你应该知道的JS原生错误类型
Apr 29 #Javascript
使用vue-element-admin框架从后端动态获取菜单功能的实现
如何使用JavaScript策略模式校验表单
Apr 29 #Javascript
react中props 的使用及进行限制的方法
Apr 28 #Javascript
React Hook用法示例详解(6个常见hook)
You might like
php多维数组去掉重复值示例分享
2014/03/02 PHP
php查找字符串中第一个非0的位置截取
2017/02/27 PHP
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
2007/02/05 Javascript
jQuery 隔行换色 支持键盘上下键,按Enter选定值
2009/08/02 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
2013/09/26 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
2014/05/27 Javascript
JavaScript阻止事件冒泡示例分享
2014/12/28 Javascript
javascript模拟命名空间
2015/04/17 Javascript
js基础之DOM中document对象的常用属性方法详解
2016/10/28 Javascript
AngularJS自定义控件实例详解
2016/12/13 Javascript
原生js更改css样式的两种方式
2017/03/15 Javascript
AngularJS折叠菜单实现方法示例
2017/05/18 Javascript
详解用webpack2搭建angular2的项目
2017/06/22 Javascript
深入浅出webpack之externals的使用
2017/12/04 Javascript
JavaScript中 ES6变量的结构赋值
2018/07/10 Javascript
iView框架问题整理小结
2018/10/16 Javascript
vue form check 表单验证的实现代码
2018/12/09 Javascript
Smartour 让网页导览变得更简单(推荐)
2019/07/19 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
2020/06/01 Javascript
Python的ORM框架中SQLAlchemy库的查询操作的教程
2015/04/25 Python
学习Python3 Dlib19.7进行人脸面部识别
2018/01/24 Python
Python3 使用selenium插件爬取苏宁商家联系电话
2019/12/23 Python
Python中bisect的使用方法
2019/12/31 Python
PyTorch中 tensor.detach() 和 tensor.data 的区别详解
2020/01/06 Python
Python for循环通过序列索引迭代过程解析
2020/02/07 Python
Pycharm自带Git实现版本管理的方法步骤
2020/09/18 Python
HTML5 input新增type属性color颜色拾取器的实例代码
2018/08/27 HTML / CSS
eDreams加拿大:廉价航班、酒店和度假
2019/03/29 全球购物
英国领先的新鲜松露和最好的松露产品供应商:TruffleHunter
2019/08/26 全球购物
int和Integer有什么区别
2013/05/25 面试题
创业计划书撰写原则
2014/01/25 职场文书
餐厅经理岗位职责和岗位目标
2014/02/13 职场文书
求职意向书
2014/04/01 职场文书
新教师培训心得体会
2014/09/02 职场文书
mysql分组后合并显示一个字段的多条数据方式
2022/01/22 MySQL
Python调用腾讯API实现人脸身份证比对功能
2022/04/04 Python