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 相关文章推荐
javascript下4个跨浏览器必备的函数
Mar 07 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
Jun 13 Javascript
ionic js 模型 $ionicModal 可以遮住用户主界面的内容框
Jun 06 Javascript
AngularJS教程之简单应用程序示例
Aug 16 Javascript
简单的js表格操作
Sep 24 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
Apr 19 Javascript
前端主流框架vue学习笔记第二篇
Jul 26 Javascript
微信小程序实现炫酷的弹出式菜单特效
Jan 28 Javascript
基于layui实现高级搜索(筛选)功能
Jul 26 Javascript
Vue通过配置WebSocket并实现群聊功能
Dec 31 Javascript
详解JavaScript 作用域
Jul 14 Javascript
微信小程序绘制半圆(弧形)进度条
Nov 18 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代码
2013/11/19 PHP
PHP中的命名空间详细介绍
2015/07/02 PHP
基于PHP实现用户注册登录功能
2016/10/14 PHP
Yii框架实现的验证码、登录及退出功能示例
2017/05/20 PHP
PHP PDOStatement::debugDumpParams讲解
2019/01/30 PHP
jQuery ui1.7 dialog只能弹出一次问题
2009/08/27 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
2013/03/04 Javascript
jQuery平滑旋转幻灯片特效代码分享
2015/09/07 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
2017/06/12 Javascript
Vuejs监听vuex中值的变化的方法示例
2018/12/02 Javascript
JS实现获取当前所在周的周六、周日示例分析
2019/05/11 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
2019/06/20 jQuery
javascript实现摄像头拍照预览
2019/09/30 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
2020/02/27 Javascript
浅谈React中组件逻辑复用的那些事儿
2020/05/21 Javascript
JS使用setInterval计时器实现挑战10秒
2020/11/08 Javascript
python检测lvs real server状态
2014/01/22 Python
Python批量按比例缩小图片脚本分享
2015/05/21 Python
详解Python的Django框架中manage命令的使用与扩展
2016/04/11 Python
Python3爬虫教程之利用Python实现发送天气预报邮件
2018/12/16 Python
Pyqt清空某一个QTreeewidgetItem下的所有分支方法
2019/06/17 Python
浅析pip安装第三方库及pycharm中导入第三方库的问题
2020/03/10 Python
通过自学python能找到工作吗
2020/06/21 Python
Python绘图之二维图与三维图详解
2020/08/04 Python
Python Pivot table透视表使用方法解析
2020/09/11 Python
怎样实现H5+CSS3手指滑动切换图片的示例代码
2019/05/05 HTML / CSS
世界上最大的折扣香水店:FragranceNet.com
2016/10/26 全球购物
会计自我鉴定范文
2013/10/06 职场文书
革命先烈的英雄事迹材料
2014/02/15 职场文书
人力资源部经理岗位职责规定
2014/02/23 职场文书
家长写给老师的建议书
2014/03/13 职场文书
2014年社区党建工作总结
2014/11/11 职场文书
2015年班组工作总结
2015/04/20 职场文书
2015中秋祝酒词
2015/08/12 职场文书
共青团优秀团员申请书(范文)
2019/08/15 职场文书
解决Python中的modf()函数取小数部分不准确问题
2021/05/28 Python